AngularJS與RequireJS集成方案
關于angularjs、requirejs的基礎知識請自行學習
一、簡單事例的項目目錄如下：
-index.html
-scripts文件夾
–controller文件夾
— mianController.js
— controller1.js
—controller2.js
–directives文件夾
—mainDirective.js
—directive.js
–app.js
–router.js
–main.js
</blockquote>二、首頁
首先你的index.html大概如下
<!doctype html> <!-- <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="webApp"> --> <htmls> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> </head><body> <!--其他html內容--> <script type='text/javascript' src='../scripts/lib/require.js' data-main='../scripts/main.js'></script> </body> </html></pre>
在首頁index.html只需要引入requireJs庫文件，并且指明入口函數main.js，采用手動啟動angularjs應用，所以這里不用為首頁添加ng-app=’webApp’。
三、配置mian.js
require.config({ paths:{ //一些庫文件 'jquery': '//cdn.staticfile.org/jquery/1.10.2/jquery.min', 'angular': '//cdn.staticfile.org/angular.js/1.2.10/angular.min', 'angular-route': '//cdn.staticfile.org/angular-ui-router/0.2.8/angular-ui-router.min','domReady': '//cdn.staticfile.org/require-domReady/2.0.1/domReady.min', //js文件 'bootstrap': "../scripts/bootstrap", 'app': "../scripts/app", 'router': "../scripts/router" .....以及其他的js文件，這里省略 }, shim:{ 'angular':{ exports:'angular' }, 'angular-route':{ deps:['angular'], exports: 'angular-route' } }, deps:['bootstrap'], urlArgs: "bust=" + (new Date()).getTime() //防止讀取緩存，調試用 });關于require.config()中的配置大概如下（依照自己的項目情況，這里我簡單配置了），
所以總體上說main.js這個文件做的事情就是：由requirejs異步載入所有文件
注意到其中的deps：['bootstrap']，就是告訴我們要先加載bootstrap.js文件。
四、手動啟動angularjs應用
而bootstrap.js就是我用來手動啟動angularjs應用的，代碼如下
define(['require', 'angular', 'angular-route', 'jquery', 'app', 'router' ],function(require,angular){ 'use strict'; require(['domReady!'],function(document){ angular.bootstrap(document,['webapp']); }); });這里依賴于app.js和router.js，我們看看這兩個文件分別做什么
五、網站路由設置
我們這里使用ui-router。所以我們的router.js應該是這樣的，主要是用來定義路由的，關于ui-router的配置請自行查看相關知識，這里就簡單略過
define(["app"], function(app){ return app.run([ '$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) { $rootScope.$state = $state; $rootScope.$stateParams = $stateParams } ]) .config(function($stateProvider, $urlRouterProvider, $locationProvider, $uiViewScrollProvider){ //用于改變state時跳至頂部 $uiViewScrollProvider.useAnchorScroll(); // 默認進入先重定向 $urlRouterProvider.otherwise('/home'); $stateProvider .state('home',{ //abstract: true, url:'/home', views: { 'main@': { templateUrl: '../view/home.html' } } }) })六、angular.module
這時先看看平時我們在寫angularjs應用是這樣寫的
var app = angular.module("xxx",["xxx"]);app.controller("foo",function($scope){}); app.directive(...)</pre></div>
所以我們的app.js應該是這樣的
define(["angular", 'mainController', 'mainDirective' ],function(angular){ return angular.module("webapp",['ui.router','ngStorage','ngSanitize','webapp.controllers','webapp.directive']); })其中我們的app.js中依賴的mainController和mainDirective主要是用來加載angular的控制器和指令
七、控制器
我們的mainController.js是這樣的
define(['controller1','controller2'],function(){});主要用來加載各個控制器（所有的控制器都將在這個文件中被加載）,除此之外再不用做其他，因為我們可以有很多個控制器文件，按照具體需要進行添加。
controller1.js文件(其他控制器controller2文件類似)
define(['../scripts/controller/module.js','jquery'],function(controllers,$){ 'use strict'; controllers.controller('controller1',function($scope){ //控制器的具體js代碼 }) })其中依賴module.js
而module.js如下
define(['angular'], function (angular) { 'use strict'; return angular.module('webapp.controllers', []); });八、指令
同理mianDirective.js也類似。參考控制器
原文來自：cunjieliu本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！