Angular项目构建的方法是什么

本篇内容介绍了“Angular项目构建的方法是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联建站是专业的石门网站建设公司，石门接单;提供网站建设、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行石门网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

(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

                My AngularJS App                            view1
     view2

Angular seed app: v

如此在不使用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

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

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']]); }); });

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' ]); });

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}); }); }]); });

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); }; }]); });

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); }; }]); });

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'}); }]); });

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'); });

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项目构建的方法是什么

AngularJS + RequireJS

其他资讯