Angular項目構建指南：不再為angular構建而猶豫不決
前言
接觸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進行異步加載也可以很好的用下去.
當然,如果你開發過程中發覺還是有些地方需要,那么也可以加上去.本文里我會詳細說明這兩種方式的構建方法.但是這里我的觀點已經表明了:在不需要的情況下,不要用.
(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依賴注入的。
(2) 通過requirejs構建
這種方式的構建可能對于某些人來講更加清晰,結構和上面的基本一樣,多了一個man.js用來配置requirejs,單獨拆分出routes.js以及一個controller文件夾通過requirejs將controller一個個拆分出來,按需的異步加載。
index.html
- <!doctype html>
- <html ng-app>
- <head>
- <title>Angular-RequireJS sample app</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" type="text/css" media="all" href="app/css/app.css" />
- </head>
- <body >
- <h1>AngularJS + RequireJS</h1>
- <ul>
- <li><a href="#/view1">View 1</a></li>
- <li><a href="#/view2">View 2</a></li>
- </ul>
- <div ng-view></div>
- <script data-main="app/js/main" src="/bower_components/requirejs/require.js"></script>
- </body>
- </html>
#p#
main.js
- require.config({
- paths: {
- angular: '../../bower_components/angular/angular',
- angularRoute: '../../bower_components/angular-route/angular-route',
- angularMocks: '../../bower_components/angular-mocks/angular-mocks',
- text: '../../bower_components/requirejs-text/text'
- },
- shim: {
- 'angular' : {'exports' : 'angular'},
- 'angularRoute': ['angular'],
- 'angularMocks': {
- deps:['angular'],
- 'exports':'angular.mock'
- }
- },
- priority: [
- "angular"
- ]
- });
- //http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
- window.name = "NG_DEFER_BOOTSTRAP!";
- require( [
- 'angular',
- 'app',
- 'routes'
- ], function(angular, app, routes) {
- 'use strict';
- var $html = angular.element(document.getElementsByTagName('html')[0]);
- angular.element().ready(function() {
- angular.resumeBootstrap([app['name']]);
- });
- });
app.js
- define([
- 'angular',
- 'filters',
- 'services',
- 'directives',
- 'controllers',
- 'angularRoute',
- ], function (angular, filters, services, directives, controllers) {
- 'use strict';
- // Declare app level module which depends on filters, and services
- return angular.module('myApp', [
- 'ngRoute',
- 'myApp.controllers',
- 'myApp.filters',
- 'myApp.services',
- 'myApp.directives'
- ]);
- });
controllers.js
- define(['angular', 'services'], function (angular) {
- 'use strict';
- /* Controllers */
- return angular.module('myApp.controllers', ['myApp.services'])
- // Sample controller where service is being used
- .controller('MyCtrl1', ['$scope', 'version', function ($scope, version) {
- $scope.scopedAppVersion = version;
- }])
- // More involved example where controller is required from an external file
- .controller('MyCtrl2', ['$scope', '$injector', function($scope, $injector) {
- require(['controllers/myctrl2'], function(myctrl2) {
- // injector method takes an array of modules as the first argument
- // if you want your controller to be able to use components from
- // any of your other modules, make sure you include it together with 'ng'
- // Furthermore we need to pass on the $scope as it's unique to this controller
- $injector.invoke(myctrl2, this, {'$scope': $scope});
- });
- }]);
- });
directives.js
- define(['angular', 'services'], function(angular, services) {
- 'use strict';
- /* Directives */
- angular.module('myApp.directives', ['myApp.services'])
- .directive('appVersion', ['version', function(version) {
- return function(scope, elm, attrs) {
- elm.text(version);
- };
- }]);
- });
filters.js
- define(['angular', 'services'], function (angular, services) {
- 'use strict';
- /* Filters */
- angular.module('myApp.filters', ['myApp.services'])
- .filter('interpolate', ['version', function(version) {
- return function(text) {
- return String(text).replace(/\%VERSION\%/mg, version);
- };
- }]);
- });
routes.js
- define(['angular', 'app'], function(angular, app) {
- 'use strict';
- return app.config(['$routeProvider', function($routeProvider) {
- $routeProvider.when('/view1', {
- templateUrl: 'app/partials/partial1.html',
- controller: 'MyCtrl1'
- });
- $routeProvider.when('/view2', {
- templateUrl: 'app/partials/partial2.html',
- controller: 'MyCtrl2'
- });
- $routeProvider.otherwise({redirectTo: '/view1'});
- }]);
- });
services.js
- define(['angular'], function (angular) {
- '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');
- });
controllers文件夾中一個單獨controlle文件,myCtrl2.js
- define([], function() {
- return ['$scope', '$http', function($scope, $http) {
- // You can access the scope of the controller from here
- $scope.welcomeMessage = 'hey this is myctrl2.js!';
- // because this has happened asynchroneusly we've missed
- // Angular's initial call to $apply after the controller has been loaded
- // hence we need to explicityly call it at the end of our Controller constructor
- $scope.$apply();
- }];
- });
結尾
寫到這應該差不多了,就快超字數了.通常情況下Angular應用的構建這樣就可以了,因為比起傳統框架angular的代碼量上肯定會有優勢,所以一些不必要的東西就不用引入了.上面這些也是我在這段時間的項目中遇到并且做過的,已經實戰過了,所以如果有類似需求的同學可以不必在此填坑。
***留個彩蛋吧,在不用requirejs的情況下,angular也是可以實現異步加載的,只要通過一個非常小巧的庫就可以,名字叫script.js.https://github.com/ded/script.js
