Angular項(xiàng)目構(gòu)建的方法是什么

本篇內(nèi)容介紹了“Angular項(xiàng)目構(gòu)建的方法是什么”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)建站是專業(yè)的石門網(wǎng)站建設(shè)公司，石門接單;提供網(wǎng)站建設(shè)、網(wǎng)站制作,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行石門網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

(1) 不用requirejs直接構(gòu)建Angular

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

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

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

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

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

|--js
   |--app.js                     // app啟動文件,用于app配置
   |--controllers.js          // controllers也就是存放我們自己的業(yè)務(wù)文件
   |--directives.js            // 指令文件(指令可共用)
   |--fliters.js                  // 過濾器文件(過濾器可共用)
   |--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

                My AngularJS App                            view1
     view2

Angular seed app: v

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

(2) 通過requirejs構(gòu)建

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

index.html

   Angular-RequireJS sample app     AngularJS + RequireJS
  View 1
 View 2

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文件夾中一個單獨(dú)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項(xiàng)目構(gòu)建的方法是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

名稱欄目：Angular項(xiàng)目構(gòu)建的方法是什么
URL網(wǎng)址：http://www.xueling.net.cn/article/jccgog.html

老熟女激烈的高潮_日韩一级黄色录像_亚洲1区2区3区视频_精品少妇一区二区三区在线播放_国产欧美日产久久_午夜福利精品导航凹凸

重慶分公司，新征程啟航

Angular項(xiàng)目構(gòu)建的方法是什么

AngularJS + RequireJS

其他資訊