關(guān)于angularjs、requirejs的基礎(chǔ)知識請自行學(xué)習(xí)
一、簡單事例的項目目錄如下：
-index.html
-scripts文件夾
--controller文件夾
--- mianController.js
--- controller1.js
---controller2.js
--directives文件夾
---mainDirective.js
---directive.js
--app.js
--router.js
--main.js
二、首頁
首先你的index.html大概如下
<!doctype html>
<!-- <html xmlns:ng="//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內(nèi)容-->
<script type=＇text/javascript＇ src=＇../scripts/lib/require.js＇ data-main=＇../scripts/main.js＇></script>
</body>
</html>
在首頁index.html只需要引入requireJs庫文件，并且指明入口函數(shù)main.js，采用手動啟動angularjs應(yīng)用，所以這里不用為首頁添加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() //防止讀取緩存，調(diào)試用
});
關(guān)于require.config()中的配置大概如下（依照自己的項目情況，這里我簡單配置了），
所以總體上說main.js這個文件做的事情就是：由requirejs異步載入所有文件
注意到其中的deps：[＇bootstrap＇]，就是告訴我們要先加載bootstrap.js文件。
四、手動啟動angularjs應(yīng)用
而bootstrap.js就是我用來手動啟動angularjs應(yīng)用的，代碼如下
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，我們看看這兩個文件分別做什么
五、網(wǎng)站路由設(shè)置
我們這里使用ui-router。所以我們的router.js應(yīng)該是這樣的，主要是用來定義路由的，關(guān)于ui-router的配置請自行查看相關(guān)知識，這里就簡單略過
復(fù)制代碼
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();
// 默認(rèn)進(jìn)入先重定向
$urlRouterProvider.otherwise(＇/home＇);
$stateProvider
.state(＇home＇,{
//abstract: true,
url:＇/home＇,
views: {
＇main@＇: {
templateUrl: ＇../view/home.html＇
}
}
})
})
六、angular.module
這時先看看平時我們在寫angularjs應(yīng)用是這樣寫的
var app = angular.module("xxx",["xxx"]);
app.controller("foo",function($scope){});
app.directive(...)
所以我們的app.js應(yīng)該是這樣的
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(){});
主要用來加載各個控制器（所有的控制器都將在這個文件中被加載）,除此之外再不用做其他，因為我們可以有很多個控制器文件，按照具體需要進(jìn)行添加。
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也類似。參考控制器