溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“Angular項(xiàng)目構(gòu)建的方法是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
(1) 不用requirejs直接構(gòu)建Angular
之所以不使用requirejs就直接構(gòu)建angular,因?yàn)閍ngular對(duì)于依賴的管理以及angular的使用場(chǎng)景完全可以做到這一點(diǎn).首先在以來(lái)上,angular的依賴注入是個(gè)好東西,不了解的同學(xué)可以去搜一下資料.我這里簡(jiǎn)單的說(shuō),就是當(dāng)我需要一個(gè)module的時(shí)候,我不用管它在哪,它是什么.我只要知道它的名字然后告訴angular就可以了,至于怎么將它的對(duì)象傳遞過(guò)來(lái),怎么找到的,angular自己會(huì)去處理.
angular.module('myApp', [ 'ngRoute', ]);例如這里的ngRoute,我需要知道ngRoute怎么來(lái)的,在哪里.只要有一個(gè)模塊定義為ngRoute我就可以直接拿來(lái)用。
鑒于Angular如此的給力,剩下的事情就好辦了.我們只需要從功能和業(yè)務(wù)兩方面將文件劃分成module就可以了,然后將所有的庫(kù)文件在頁(yè)面上通過(guò)script標(biāo)簽引用,再將所有的業(yè)務(wù)文件也即是我們自己寫(xiě)的js合并為一個(gè)all.js加載到頁(yè)面上即可。
這里文件的劃分遵循angular官方的推薦方式：
|--js |--app.js // app啟動(dòng)文件,用于app配置 |--controllers.js // controllers也就是存放我們自己的業(yè)務(wù)文件 |--directives.js // 指令文件(指令可共用) |--fliters.js // 過(guò)濾器文件(過(guò)濾器可共用) |--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
<!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的情景下,項(xiàng)目就構(gòu)建完成了.還有幾個(gè)補(bǔ)充點(diǎn)就是其一你可以將controllers繼續(xù)拆分為多個(gè)controller模塊,這里可以完全按照你的業(yè)務(wù)進(jìn)行劃分.比如user目錄下userController等等.然后將所有這些我們自己寫(xiě)的文件通過(guò)grunt或者gulp進(jìn)行合并為一個(gè)單獨(dú)的總的文件all.js這樣在頁(yè)面中除了庫(kù)文件只要這一個(gè)文件就行了.angular的module所帶來(lái)的好處就是這樣合并的文件,不用在乎js合并的順序,因?yàn)樗峭ㄟ^(guò)angular依賴注入的。
(2) 通過(guò)requirejs構(gòu)建
這種方式的構(gòu)建可能對(duì)于某些人來(lái)講更加清晰,結(jié)構(gòu)和上面的基本一樣,多了一個(gè)man.js用來(lái)配置requirejs,單獨(dú)拆分出routes.js以及一個(gè)controller文件夾通過(guò)requirejs將controller一個(gè)個(gè)拆分出來(lái),按需的異步加載。
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 > <h2>AngularJS + RequireJS</h2> <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
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文件夾中一個(gè)單獨(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)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼