當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Angular项目构建指南 - 不再为angular构建而犹豫不决(转)

發布時間：2025/3/13 编程问答 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 Angular项目构建指南 - 不再为angular构建而犹豫不决(转) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

如果你不知道什么是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自己會去處理.

1 2 3

angular.module('myApp',?[ ??'ngRoute', ]);

????例如這里的ngRoute,我需要知道ngRoute怎么來的,在哪里.只要有一個模塊定義為ngRoute我就可以直接拿來用.

????鑒于Angular如此的給力,剩下的事情就好辦了.我們只需要從功能和業務兩方面將文件劃分成module就可以了,然后將所有的庫文件在頁面上通過script標簽引用,再將所有的業務文件也即是我們自己寫的js合并為一個all.js加載到頁面上即可.

????這里文件的劃分遵循angular官方的推薦方式:

1 2 3 4 5 6 7 8 9 10

????app.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

'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

1 2 3 4 5 6 7 8 9 10 11

'use?strict'; /*?Controllers?*/ angular.module('myApp.controllers',?[]) ??.controller('MyCtrl1',?['$scope',?function($scope)?{ ??}]) ??.controller('MyCtrl2',?['$scope',?function($scope)?{ ??}]);

????directives.js

1 2 3 4 5 6 7 8 9 10 11

'use?strict'; /*?Directives?*/ angular.module('myApp.directives',?[]). ??directive('appVersion',?['version',?function(version)?{ ????return?function(scope,?elm,?attrs)?{ ??????elm.text(version); ????}; ??}]);

????filters.js

1 2 3 4 5 6 7 8 9 10

'use?strict'; /*?Filters?*/ angular.module('myApp.filters',?[]). ??filter('interpolate',?['version',?function(version)?{ ????return?function(text)?{ ??????return?String(text).replace(/\%VERSION\%/mg,?version); ????}; ??}]);

????services.js

1 2 3 4 5 6 7 8 9

'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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<!DOCTYPE?html>    ?<html?ng-app="myApp">? <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> ?? ??<div?ng-view></div> ??<div>Angular?seed?app:?v<span?app-version></span></div> ?? ??<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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!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>

????main.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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

1 2 3 4 5 6 7 8 9 10 11 12

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

1 2 3 4 5 6 7 8 9 10 11 12

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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

1 2 3 4 5 6 7 8 9 10

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

1 2 3 4 5 6 7 8 9 10 11

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的代碼量上肯定會有優勢,所以一些不必要的東西就不用引入了.上面這些也是我在這段時間的項目中遇到并且做過的,已經實戰過了,所以如果有類似需求的同學可以不必在此填坑.

轉載于:https://www.cnblogs.com/GoodPingGe/p/4507722.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Angular项目构建指南 - 不再为angular构建而犹豫不决(转)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Android自动化测试Uiautoma
下一篇：网站架构之架构演化