前言
接觸Angular也有小半個(gè)月了,雖然沒(méi)有使勁折騰,不過(guò)正所謂"no zuo no die".學(xué)一門(mén)新東西,不好好折騰一下總覺(jué)得對(duì)不起祖國(guó),最不起人民...好像扯遠(yuǎn)了,想寫(xiě)前言來(lái)著.為什么要寫(xiě)這篇構(gòu)建指南?最大的原因是為了給正在找這方面資料,掙扎于各種說(shuō)法中的同學(xué)一個(gè)借鑒,同時(shí)我也把自己的經(jīng)驗(yàn)記錄下來(lái),兩全其美.
正文
如果你不知道什么是Angular或者根本沒(méi)聽(tīng)說(shuō)過(guò),那么我接下來(lái)所說(shuō)的對(duì)你來(lái)說(shuō)毫無(wú)益處,不過(guò)如果你打算以后會(huì)接觸Angular或者干脆要漲漲姿勢(shì)~讀下去還是有點(diǎn)用的.
Angular和它之前所出現(xiàn)的其余前端框架最大的不同,在于它的核心不再是DOM,而是數(shù)據(jù),是model.我們慣用的不管是單純的jQuery還是MVC的Backbone,它們本質(zhì)仍是讓我們更方便更有條理的操作DOM,但是Angular不是.通過(guò)一系列魔術(shù)般的手法,它將一切的重心轉(zhuǎn)移到數(shù)據(jù)上.以開(kāi)發(fā)應(yīng)用而不是操作節(jié)點(diǎn)的方式去開(kāi)發(fā)Web,一切以數(shù)據(jù)為中心,數(shù)據(jù)的變化驅(qū)動(dòng)了一切,包括行為.
文本主題,如何構(gòu)建一個(gè)angular項(xiàng)目?
坦白說(shuō)最開(kāi)始構(gòu)建一個(gè)項(xiàng)目的時(shí)候,雖然很小但是很糾結(jié).我本身是有點(diǎn)完美主義的,所以雖然一開(kāi)始什么都沒(méi)有也想做到盡善盡美.因?yàn)槁?tīng)過(guò)很多前輩的經(jīng)驗(yàn),說(shuō)如果框架基礎(chǔ)沒(méi)搭好,等到后來(lái)不管是重構(gòu)還是維護(hù)都是一場(chǎng)噩夢(mèng).所以一開(kāi)始小心意義,希望能將項(xiàng)目盡量搭建的結(jié)實(shí)并且益于維護(hù)和開(kāi)發(fā).
在搭建伊始首先遇到的一個(gè)問(wèn)題,就是到底要不要引入requirejs或者seajs這類(lèi)依賴(lài)管理的工具?
我本身沒(méi)有多少語(yǔ)言或者技術(shù)的上的情節(jié),對(duì)于各個(gè)大神也沒(méi)有多少膜拜的憧憬(更多的是我根本不清楚誰(shuí)是大神,也從沒(méi)去找過(guò)).所以對(duì)于我來(lái)講不管是requirejs的AMD還是seajs的CMD,從實(shí)現(xiàn)的角度上來(lái)講都是做了同一個(gè)工作.在考慮一個(gè)Angular應(yīng)用到底需不需要這種工具的時(shí)候,我也在網(wǎng)上看了很多人的說(shuō)法.我總結(jié)一句就是,基本都和沒(méi)說(shuō)一樣,也就是用不用隨便,看情況.
那么我能有什么好的答案,其實(shí)我現(xiàn)在的答案就是:"可以不用".怎么說(shuō)是可以不用呢,如果你不用requirejs也能滿(mǎn)足項(xiàng)目的開(kāi)發(fā)以及各種需求,那么就別用了.angular本身的模塊已經(jīng)做到了依賴(lài)注入,所以我們不需要通過(guò)requirejs進(jìn)行異步加載也可以很好的用下去.
當(dāng)然,如果你開(kāi)發(fā)過(guò)程中發(fā)覺(jué)還是有些地方需要,那么也可以加上去.本文里我會(huì)詳細(xì)說(shuō)明這兩種方式的構(gòu)建方法.但是這里我的觀點(diǎn)已經(jīng)表明了:在不需要的情況下,不要用.
帶你走近AngularJS系列:
如何在 AngularJS 中對(duì)控制器進(jìn)行單元測(cè)試 http://www.linuxidc.com/Linux/2013-12/94166.htm
AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm
(1) 不用requirejs直接構(gòu)建Angular
之所以不使用requirejs就直接構(gòu)建angular,因?yàn)閍ngular對(duì)于依賴(lài)的管理以及angular的使用場(chǎng)景完全可以做到這一點(diǎn).首先在以來(lái)上,angular的依賴(lài)注入是個(gè)好東西,不了解的同學(xué)可以去搜一下資料.我這里簡(jiǎn)單的說(shuō),就是當(dāng)我需要一個(gè)module的時(shí)候,我不用管它在哪,它是什么.我只要知道它的名字然后告訴angular就可以了,至于怎么將它的對(duì)象傳遞過(guò)來(lái),怎么找到的,angular自己會(huì)去處理.
angular.module('myApp', [
'ngRoute',
]);
例如這里的ngRoute,我需要知道ngRoute怎么來(lái)的,在哪里.只要有一個(gè)模塊定義為ngRoute我就可以直接拿來(lái)用.
鑒于Angular如此的給力,剩下的事情就好辦了.我們只需要從功能和業(yè)務(wù)兩方面將文件劃分成module就可以了,然后將所有的庫(kù)文件在頁(yè)面上通過(guò)script標(biāo)簽引用,再將所有的業(yè)務(wù)文件也即是我們自己寫(xiě)的js合并為一個(gè)all.js加載到頁(yè)面上即可.
這里文件的劃分遵循angular官方的推薦方式:
|--js
|--app.js // app啟動(dòng)文件,用于app配置
|--controllers.js // controllers也就是存放我們自己的業(yè)務(wù)文件
|--directives.js // 指令文件(指令可共用)
|--fliters.js // 過(guò)濾器文件(過(guò)濾器可共用)
|--services.js // 服務(wù)文件(可共用,一般是與服務(wù)器交互的服務(wù))
|--partials
|--html1.html
|--html2.html
|--index.html
app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
controllers.js
'use strict';
/* Controllers */
angular.module('myApp.controllers', [])
.controller('MyCtrl1', ['$scope', function($scope) {
}])
.controller('MyCtrl2', ['$scope', function($scope) {
}]);
directives.js
'use strict';
/* Directives */
angular.module('myApp.directives', []).
directive('appVersion', ['version', function(version) {
return function(scope, elm, attrs) {
elm.text(version);
};
}]);
filters.js
'use strict';
/* Filters */
angular.module('myApp.filters', []).
filter('interpolate', ['version', function(version) {
return function(text) {
return String(text).replace(/\%VERSION\%/mg, version);
};
}]);
services.js
'use strict';
/* Services */
// Demonstrate how to register services
// In this case it is a simple value service.
angular.module('myApp.services', []).
value('version', '0.1');
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html ng-app="myApp"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="css/app.css"/>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<ul>
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>
<!--[if lt IE 7]>
<p>You are using an <strong>outdated</strong> browser. Please <a >upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
如此在不使用requirejs的情景下,項(xiàng)目就構(gòu)建完成了.還有幾個(gè)補(bǔ)充點(diǎn)就是其一你可以將controllers繼續(xù)拆分為多個(gè)controller模塊,這里可以完全按照你的業(yè)務(wù)進(jìn)行劃分.比如user目錄下userController等等.然后將所有這些我們自己寫(xiě)的文件通過(guò)grunt或者gulp進(jìn)行合并為一個(gè)單獨(dú)的總的文件all.js這樣在頁(yè)面中除了庫(kù)文件只要這一個(gè)文件就行了.angular的module所帶來(lái)的好處就是這樣合并的文件,不用在乎js合并的順序,因?yàn)樗峭ㄟ^(guò)angular依賴(lài)注入的.
聯(lián)系客服