前言
接觸Angular也有小半個月了,雖然沒有使勁折騰,不過正所謂"no zuo no die".學一門新東西,不好好折騰一下總覺得對不起祖國,最不起人民...好像扯遠了,想寫前言來著.為什麼要寫這篇構建指南?最大的原因是為了給正在找這方面資料,掙扎於各種說法中的同學一個借鑒,同時我也把自己的經驗記錄下來,兩全其美.
正文
如果你不知道什麼是Angular或者根本沒聽說過,那麼我接下來所說的對你來說毫無益處,不過如果你打算以後會接觸Angular或者干脆要漲漲姿勢~讀下去還是有點用的.
Angular和它之前所出現的其余前端框架最大的不同,在於它的核心不再是DOM,而是數據,是model.我們慣用的不管是單純的jQuery還是MVC的Backbone,它們本質仍是讓我們更方便更有條理的操作DOM,但是Angular不是.通過一系列魔術般的手法,它將一切的重心轉移到數據上.以開發應用而不是操作節點的方式去開發Web,一切以數據為中心,數據的變化驅動了一切,包括行為.
文本主題,如何構建一個angular項目?
坦白說最開始構建一個項目的時候,雖然很小但是很糾結.我本身是有點完美主義的,所以雖然一開始什麼都沒有也想做到盡善盡美.因為聽過很多前輩的經驗,說如果框架基礎沒搭好,等到後來不管是重構還是維護都是一場噩夢.所以一開始小心意義,希望能將項目盡量搭建的結實並且益於維護和開發.
在搭建伊始首先遇到的一個問題,就是到底要不要引入requirejs或者seajs這類依賴管理的工具?
我本身沒有多少語言或者技術的上的情節,對於各個大神也沒有多少膜拜的憧憬(更多的是我根本不清楚誰是大神,也從沒去找過).所以對於我來講不管是requirejs的AMD還是seajs的CMD,從實現的角度上來講都是做了同一個工作.在考慮一個Angular應用到底需不需要這種工具的時候,我也在網上看了很多人的說法.我總結一句就是,基本都和沒說一樣,也就是用不用隨便,看情況.
那麼我能有什麼好的答案,其實我現在的答案就是:"可以不用".怎麼說是可以不用呢,如果你不用requirejs也能滿足項目的開發以及各種需求,那麼就別用了.angular本身的模塊已經做到了依賴注入,所以我們不需要通過requirejs進行異步加載也可以很好的用下去.
當然,如果你開發過程中發覺還是有些地方需要,那麼也可以加上去.本文裡我會詳細說明這兩種方式的構建方法.但是這裡我的觀點已經表明了:在不需要的情況下,不要用.
帶你走近AngularJS系列：
如何在 AngularJS 中對控制器進行單元測試 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直接構建Angular
之所以不使用requirejs就直接構建angular,因為angular對於依賴的管理以及angular的使用場景完全可以做到這一點.首先在以來上,angular的依賴注入是個好東西,不了解的同學可以去搜一下資料.我這裡簡單的說,就是當我需要一個module的時候,我不用管它在哪,它是什麼.我只要知道它的名字然後告訴angular就可以了,至於怎麼將它的對象傳遞過來,怎麼找到的,angular自己會去處理.
angular.module('myApp', [
'ngRoute',
]);
例如這裡的ngRoute,我需要知道ngRoute怎麼來的,在哪裡.只要有一個模塊定義為ngRoute我就可以直接拿來用.
鑒於Angular如此的給力,剩下的事情就好辦了.我們只需要從功能和業務兩方面將文件劃分成module就可以了,然後將所有的庫文件在頁面上通過script標簽引用,再將所有的業務文件也即是我們自己寫的js合並為一個all.js加載到頁面上即可.
這裡文件的劃分遵循angular官方的推薦方式:
|--js
|--app.js // app啟動文件,用於app配置
|--controllers.js // controllers也就是存放我們自己的業務文件
|--directives.js // 指令文件(指令可共用)
|--fliters.js // 過濾器文件(過濾器可共用)
|--services.js // 服務文件(可共用,一般是與服務器交互的服務)
|--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 href="http://browsehappy.com/">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="//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的情景下,項目就構建完成了.還有幾個補充點就是其一你可以將controllers繼續拆分為多個controller模塊,這裡可以完全按照你的業務進行劃分.比如user目錄下userController等等.然後將所有這些我們自己寫的文件通過grunt或者gulp進行合並為一個單獨的總的文件all.js這樣在頁面中除了庫文件只要這一個文件就行了.angular的module所帶來的好處就是這樣合並的文件,不用在乎js合並的順序,因為它是通過angular依賴注入的.
更多詳情見請繼續閱讀下一頁的精彩內容： http://www.linuxidc.com/Linux/2014-06/103371p2.htm
