日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Angular項目構建指南：不再為angular構建而猶豫不決

前言

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名與空間、雅安服務器托管、營銷軟件、網(wǎng)站建設、墨脫網(wǎng)站維護、網(wǎng)站推廣。

接觸Angular也有小半個月了,雖然沒有使勁折騰,不過正所謂"no zuo no die".學一門新東西,不好好折騰一下總覺得對不起祖國,最不起人民...好像扯遠了,想寫前言來著.為什么要寫這篇構建指南?***的原因是為了給正在找這方面資料,掙扎于各種說法中的同學一個借鑒,同時我也把自己的經(jīng)驗記錄下來,兩全其美.

正文

如果你不知道什么是Angular或者根本沒聽說過,那么我接下來所說的對你來說毫無益處,不過如果你打算以后會接觸Angular或者干脆要漲漲姿勢~讀下去還是有點用的.

Angular和它之前所出現(xiàn)的其余前端框架***的不同,在于它的核心不再是DOM,而是數(shù)據(jù),是model.我們慣用的不管是單純的jQuery還是MVC的Backbone,它們本質仍是讓我們更方便更有條理的操作DOM,但是Angular不是.通過一系列魔術般的手法,它將一切的重心轉移到數(shù)據(jù)上.以開發(fā)應用而不是操作節(jié)點的方式去開發(fā)Web,一切以數(shù)據(jù)為中心,數(shù)據(jù)的變化驅動了一切,包括行為.

文本主題,如何構建一個angular項目?

坦白說最開始構建一個項目的時候,雖然很小但是很糾結.我本身是有點***主義的,所以雖然一開始什么都沒有也想做到盡善盡美.因為聽過很多前輩的經(jīng)驗,說如果框架基礎沒搭好,等到后來不管是重構還是維護都是一場噩夢.所以一開始小心意義,希望能將項目盡量搭建的結實并且益于維護和開發(fā).

在搭建伊始首先遇到的一個問題,就是到底要不要引入requirejs或者seajs這類依賴管理的工具?

我本身沒有多少語言或者技術的上的情節(jié),對于各個大神也沒有多少膜拜的憧憬(更多的是我根本不清楚誰是大神,也從沒去找過).所以對于我來講不管是requirejs的AMD還是seajs的CMD,從實現(xiàn)的角度上來講都是做了同一個工作.在考慮一個Angular應用到底需不需要這種工具的時候,我也在網(wǎng)上看了很多人的說法.我總結一句就是,基本都和沒說一樣,也就是用不用隨便,看情況.

那么我能有什么好的答案,其實我現(xiàn)在的答案就是:"可以不用".怎么說是可以不用呢,如果你不用requirejs也能滿足項目的開發(fā)以及各種需求,那么就別用了.angular本身的模塊已經(jīng)做到了依賴注入,所以我們不需要通過requirejs進行異步加載也可以很好的用下去.

當然,如果你開發(fā)過程中發(fā)覺還是有些地方需要,那么也可以加上去.本文里我會詳細說明這兩種方式的構建方法.但是這里我的觀點已經(jīng)表明了:在不需要的情況下,不要用.

(1) 不用requirejs直接構建Angular

之所以不使用requirejs就直接構建angular,因為angular對于依賴的管理以及angular的使用場景完全可以做到這一點.首先在以來上,angular的依賴注入是個好東西,不了解的同學可以去搜一下資料.我這里簡單的說,就是當我需要一個module的時候,我不用管它在哪,它是什么.我只要知道它的名字然后告訴angular就可以了,至于怎么將它的對象傳遞過來,怎么找到的,angular自己會去處理.

 
 
    
  
  
  1. angular.module('myApp', [  
    2. 
  
  
  2.   'ngRoute',  
    3. 
  
  
  3. ]); 
    4.

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

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

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

|--js
   |--app.js                     // app啟動文件,用于app配置
   |--controllers.js          // controllers也就是存放我們自己的業(yè)務文件
   |--directives.js            // 指令文件(指令可共用)
   |--fliters.js                  // 過濾器文件(過濾器可共用)
   |--services.js             //  服務文件(可共用,一般是與服務器交互的服務)
|--partials
   |--html1.html  
   |--html2.html
|--index.html

app.js

 
 
    
  
  
  1. 'use strict';  
    2. 
  
  
  2.  
    3. 
  
  
  3.  
    4. 
  
  
  4. // Declare app level module which depends on filters, and services  
    5. 
  
  
  5. angular.module('myApp', [  
    6. 
  
  
  6.   'ngRoute',  
    7. 
  
  
  7.   'myApp.filters',  
    8. 
  
  
  8.   'myApp.services',  
    9. 
  
  
  9.   'myApp.directives',  
    10. 
  
  
  10.   'myApp.controllers' 
    11. 
  
  
  11. ]).  
    12. 
  
  
  12. config(['$routeProvider', function($routeProvider) {  
    13. 
  
  
  13.   $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});  
    14. 
  
  
  14.   $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});  
    15. 
  
  
  15.   $routeProvider.otherwise({redirectTo: '/view1'});  
    16. 
  
  
  16. }]); 
    17.

controllers.js

 
 
    
  
  
  1. 'use strict';  
    2. 
  
  
  2.  
    3. 
  
  
  3. /* Controllers */ 
    4. 
  
  
  4.  
    5. 
  
  
  5. angular.module('myApp.controllers', [])  
    6. 
  
  
  6.   .controller('MyCtrl1', ['$scope', function($scope) {  
    7. 
  
  
  7.  
    8. 
  
  
  8.   }])  
    9. 
  
  
  9.   .controller('MyCtrl2', ['$scope', function($scope) {  
    10. 
  
  
  10.  
    11. 
  
  
  11.   }]); 
    12.

directives.js

 
 
    
  
  
  1. 'use strict';  
    2. 
  
  
  2.  
    3. 
  
  
  3. /* Directives */ 
    4. 
  
  
  4.  
    5. 
  
  
  5.  
    6. 
  
  
  6. angular.module('myApp.directives', []).  
    7. 
  
  
  7.   directive('appVersion', ['version', function(version) {  
    8. 
  
  
  8.     return function(scope, elm, attrs) {  
    9. 
  
  
  9.       elm.text(version);  
    10. 
  
  
  10.     };  
    11. 
  
  
  11.   }]); 
    12.

filters.js

 
 
    
  
  
  1. 'use strict';  
    2. 
  
  
  2.  
    3. 
  
  
  3. /* Filters */ 
    4. 
  
  
  4.  
    5. 
  
  
  5. angular.module('myApp.filters', []).  
    6. 
  
  
  6.   filter('interpolate', ['version', function(version) {  
    7. 
  
  
  7.     return function(text) {  
    8. 
  
  
  8.       return String(text).replace(/\%VERSION\%/mg, version);  
    9. 
  
  
  9.     };  
    10. 
  
  
  10.   }]); 
    11.

services.js

 
 
    
  
  
  1. 'use strict';  
    2. 
  
  
  2.  
    3. 
  
  
  3. /* Services */ 
    4. 
  
  
  4.  
    5. 
  
  
  5.  
    6. 
  
  
  6. // Demonstrate how to register services  
    7. 
  
  
  7. // In this case it is a simple value service.  
    8. 
  
  
  8. angular.module('myApp.services', []).  
    9. 
  
  
  9.   value('version', '0.1'); 
    10.

index.html

 
 
    
  
  
  1.  
    2. 
  
  
  2.  
    3. 
  
  
  3.  
    4. 
  
  
  4.  
    5. 
  
  
  5.    
    6. 
  
  
  6.  
    7. 
  
  
  7.    
    8. 
  
  
  8.    
    9. 
  
  
  9.   My AngularJS App 
    10. 
  
  
  10.    
    11. 
  
  
  11.    
    12. 
  
  
  12.    
    13. 
  
  
  13.    
    14. 
  
  
  14.    
    15. 
  
  
  15.    
    16. 
  
  
  16.  
    17. 
  
  
  17.  
    18. 
  
  
  18.   
       
  
  
    •     
    • view1
      •  
  
  
    •     
    • view2
      •  
  
  
    •   
     
    19. 
  
  
  19.  
    20. 
  
  
  20.    
    21. 
  
  
  21.  
    22. 
  
  
  22.   
 
  •  
  •   
    Angular seed app: v
     
  •  
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •    
  •  
  •  

    • 如此在不使用requirejs的情景下,項目就構建完成了.還有幾個補充點就是其一你可以將controllers繼續(xù)拆分為多個controller模塊,這里可以完全按照你的業(yè)務進行劃分.比如user目錄下userController等等.然后將所有這些我們自己寫的文件通過grunt或者gulp進行合并為一個單獨的總的文件all.js這樣在頁面中除了庫文件只要這一個文件就行了.angular的module所帶來的好處就是這樣合并的文件,不用在乎js合并的順序,因為它是通過angular依賴注入的。

    (2) 通過requirejs構建

    這種方式的構建可能對于某些人來講更加清晰,結構和上面的基本一樣,多了一個man.js用來配置requirejs,單獨拆分出routes.js以及一個controller文件夾通過requirejs將controller一個個拆分出來,按需的異步加載。

    index.html

     
 
      
  
  
    1.  
      2. 
  
  
    2.  
      3. 
  
  
    3.  
      4. 
  
  
    4. Angular-RequireJS sample app 
      5. 
  
  
    5.  
      6. 
  
  
    6.  
      7. 
  
  
    7.  
      8. 
  
  
    8.  
      9. 
  
  
    9. AngularJS + RequireJS
       
      10. 
  
  
      10.  
  
  
      • View 1
        •  
  
  
      • View 2
        •  
  
  
       
      11.
     
  •  
  •  
  •  

    • #p#

    main.js

     
 
      
  
  
    1. require.config({  
      2. 
  
  
    2.     paths: {  
      3. 
  
  
    3.         angular: '../../bower_components/angular/angular',  
      4. 
  
  
    4.         angularRoute: '../../bower_components/angular-route/angular-route',  
      5. 
  
  
    5.         angularMocks: '../../bower_components/angular-mocks/angular-mocks',  
      6. 
  
  
    6.         text: '../../bower_components/requirejs-text/text' 
      7. 
  
  
    7.     },  
      8. 
  
  
    8.     shim: {  
      9. 
  
  
    9.         'angular' : {'exports' : 'angular'},  
      10. 
  
  
    10.         'angularRoute': ['angular'],  
      11. 
  
  
    11.         'angularMocks': {  
      12. 
  
  
    12.             deps:['angular'],  
      13. 
  
  
    13.             'exports':'angular.mock' 
      14. 
  
  
    14.         }  
      15. 
  
  
    15.     },  
      16. 
  
  
    16.     priority: [  
      17. 
  
  
    17.         "angular" 
      18. 
  
  
    18.     ]  
      19. 
  
  
    19. });  
      20. 
  
  
    20.  
      21. 
  
  
    21. //http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap  
      22. 
  
  
    22. window.name = "NG_DEFER_BOOTSTRAP!";  
      23. 
  
  
    23.  
      24. 
  
  
    24. require( [  
      25. 
  
  
    25.     'angular',  
      26. 
  
  
    26.     'app',  
      27. 
  
  
    27.     'routes' 
      28. 
  
  
    28. ], function(angular, app, routes) {  
      29. 
  
  
    29.     'use strict';  
      30. 
  
  
    30.     var $html = angular.element(document.getElementsByTagName('html')[0]);  
      31. 
  
  
    31.  
      32. 
  
  
    32.     angular.element().ready(function() {  
      33. 
  
  
    33.         angular.resumeBootstrap([app['name']]);  
      34. 
  
  
    34.     });  
      35. 
  
  
    35. }); 
      36.

    app.js

     
 
      
  
  
    1. define([  
      2. 
  
  
    2.     'angular',  
      3. 
  
  
    3.     'filters',  
      4. 
  
  
    4.     'services',  
      5. 
  
  
    5.     'directives',  
      6. 
  
  
    6.     'controllers',  
      7. 
  
  
    7.     'angularRoute',  
      8. 
  
  
    8.     ], function (angular, filters, services, directives, controllers) {  
      9. 
  
  
    9.         'use strict';  
      10. 
  
  
    10.  
      11. 
  
  
    11.         // Declare app level module which depends on filters, and services  
      12. 
  
  
    12.           
      13. 
  
  
    13.         return angular.module('myApp', [  
      14. 
  
  
    14.             'ngRoute',  
      15. 
  
  
    15.             'myApp.controllers',  
      16. 
  
  
    16.             'myApp.filters',  
      17. 
  
  
    17.             'myApp.services',  
      18. 
  
  
    18.             'myApp.directives' 
      19. 
  
  
    19.         ]);  
      20. 
  
  
    20. }); 
      21.

    controllers.js

     
 
      
  
  
    1. define(['angular', 'services'], function (angular) {  
      2. 
  
  
    2.     'use strict';  
      3. 
  
  
    3.  
      4. 
  
  
    4.     /* Controllers */ 
      5. 
  
  
    5.       
      6. 
  
  
    6.     return angular.module('myApp.controllers', ['myApp.services'])  
      7. 
  
  
    7.         // Sample controller where service is being used  
      8. 
  
  
    8.         .controller('MyCtrl1', ['$scope', 'version', function ($scope, version) {  
      9. 
  
  
    9.             $scope.scopedAppVersion = version;  
      10. 
  
  
    10.         }])  
      11. 
  
  
    11.         // More involved example where controller is required from an external file  
      12. 
  
  
    12.         .controller('MyCtrl2', ['$scope', '$injector', function($scope, $injector) {  
      13. 
  
  
    13.             require(['controllers/myctrl2'], function(myctrl2) {  
      14. 
  
  
    14.                 // injector method takes an array of modules as the first argument  
      15. 
  
  
    15.                 // if you want your controller to be able to use components from  
      16. 
  
  
    16.                 // any of your other modules, make sure you include it together with 'ng'  
      17. 
  
  
    17.                 // Furthermore we need to pass on the $scope as it's unique to this controller  
      18. 
  
  
    18.                 $injector.invoke(myctrl2, this, {'$scope': $scope});  
      19. 
  
  
    19.             });  
      20. 
  
  
    20.         }]);  
      21. 
  
  
    21. }); 
      22.

    directives.js

     
 
      
  
  
    1. define(['angular', 'services'], function(angular, services) {  
      2. 
  
  
    2.     'use strict';  
      3. 
  
  
    3.  
      4. 
  
  
    4.   /* Directives */ 
      5. 
  
  
    5.  
      6. 
  
  
    6.     angular.module('myApp.directives', ['myApp.services'])  
      7. 
  
  
    7.         .directive('appVersion', ['version', function(version) {  
      8. 
  
  
    8.             return function(scope, elm, attrs) {  
      9. 
  
  
    9.                 elm.text(version);  
      10. 
  
  
    10.         };  
      11. 
  
  
    11.     }]);  
      12. 
  
  
    12. }); 
      13.

    filters.js?

     
 
      
  
  
    1. define(['angular', 'services'], function (angular, services) {  
      2. 
  
  
    2.     'use strict';  
      3. 
  
  
    3.  
      4. 
  
  
    4.     /* Filters */ 
      5. 
  
  
    5.     
      6. 
  
  
    6.     angular.module('myApp.filters', ['myApp.services'])  
      7. 
  
  
    7.         .filter('interpolate', ['version', function(version) {  
      8. 
  
  
    8.             return function(text) {  
      9. 
  
  
    9.                 return String(text).replace(/\%VERSION\%/mg, version);  
      10. 
  
  
    10.             };  
      11. 
  
  
    11.     }]);  
      12. 
  
  
    12. }); 
      13.

    routes.js

     
 
      
  
  
    1. define(['angular', 'app'], function(angular, app) {  
      2. 
  
  
    2.     'use strict';  
      3. 
  
  
    3.  
      4. 
  
  
    4.     return app.config(['$routeProvider', function($routeProvider) {  
      5. 
  
  
    5.         $routeProvider.when('/view1', {  
      6. 
  
  
    6.             templateUrl: 'app/partials/partial1.html',  
      7. 
  
  
    7.             controller: 'MyCtrl1' 
      8. 
  
  
    8.         });  
      9. 
  
  
    9.         $routeProvider.when('/view2', {  
      10. 
  
  
    10.             templateUrl: 'app/partials/partial2.html',  
      11. 
  
  
    11.             controller: 'MyCtrl2' 
      12. 
  
  
    12.         });  
      13. 
  
  
    13.         $routeProvider.otherwise({redirectTo: '/view1'});  
      14. 
  
  
    14.     }]);  
      15. 
  
  
    15.  
      16. 
  
  
    16. }); 
      17.

    services.js

     
 
      
  
  
    1. define(['angular'], function (angular) {  
      2. 
  
  
    2.     'use strict';  
      3. 
  
  
    3.       
      4. 
  
  
    4.   /* Services */ 
      5. 
  
  
    5.  
      6. 
  
  
    6.   // Demonstrate how to register services  
      7. 
  
  
    7.   // In this case it is a simple value service.  
      8. 
  
  
    8.     angular.module('myApp.services', [])  
      9. 
  
  
    9.         .value('version', '0.1');  
      10. 
  
  
    10. }); 
      11.

    controllers文件夾中一個單獨controlle文件,myCtrl2.js

     
 
      
  
  
    1. define([], function() {  
      2. 
  
  
    2.     return ['$scope', '$http', function($scope, $http) {  
      3. 
  
  
    3.         // You can access the scope of the controller from here  
      4. 
  
  
    4.         $scope.welcomeMessage = 'hey this is myctrl2.js!';  
      5. 
  
  
    5.  
      6. 
  
  
    6.         // because this has happened asynchroneusly we've missed  
      7. 
  
  
    7.         // Angular's initial call to $apply after the controller has been loaded  
      8. 
  
  
    8.         // hence we need to explicityly call it at the end of our Controller constructor  
      9. 
  
  
    9.         $scope.$apply();  
      10. 
  
  
    10.     }];  
      11. 
  
  
    11. }); 
      12.

    ?結尾

    寫到這應該差不多了,就快超字數(shù)了.通常情況下Angular應用的構建這樣就可以了,因為比起傳統(tǒng)框架angular的代碼量上肯定會有優(yōu)勢,所以一些不必要的東西就不用引入了.上面這些也是我在這段時間的項目中遇到并且做過的,已經(jīng)實戰(zhàn)過了,所以如果有類似需求的同學可以不必在此填坑。

    ***留個彩蛋吧,在不用requirejs的情況下,angular也是可以實現(xiàn)異步加載的,只要通過一個非常小巧的庫就可以,名字叫script.js.https://github.com/ded/script.js


    網(wǎng)站名稱：Angular項目構建指南：不再為angular構建而猶豫不決
    文章網(wǎng)址：http://www.dlmjj.cn/article/djoiecc.html