內(nèi)容簡(jiǎn)介
- AngularJS的模塊化實(shí)現(xiàn)
- 一個(gè)完整項(xiàng)目結(jié)構(gòu)是什么樣的？---示例演示
- 使用ngRoute進(jìn)行視圖之間的路由
- 一切都是從模塊開始的
- ng官方推薦的模塊切分方式是什么臭觉？
- 模塊之間的依賴應(yīng)該怎么做昆雀？--依賴注入
1. AngularJS的模塊化實(shí)現(xiàn)
enter description here
MVC1.html
<!doctype html>
<html ng-app="HelloAngular">
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="helloNgCtrl">
<p>{{greeting.text}},Angular</p>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="NgModule1.js"></script>
</html>
NgModule1.js
var helloModule=angular.module('HelloAngular', []);
helloModule.controller('helloNgCtrl', ['$scope', function($scope){
$scope.greeting = {
text: 'Hello'
};
}]);
2. 一個(gè)完整的項(xiàng)目結(jié)構(gòu)
- app---存放源碼的文件夾
- framework---存放需要用到的一些組件
- js---存放所有的js文件夾
- tpls---模板文件
package.json 配置文件（管理使用到了那些框架、插件等）
{
"version": "0.0.0",
"private": true,
"name": "angular-recommended",
"description": "ng官方推薦的項(xiàng)目結(jié)構(gòu)",
"license": "MIT",
"devDependencies": {
"http-server": "^0.6.1",
"bower": "^1.3.1"
},
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -p 8000"
}
}
index.html
<!doctype html>
<html ng-app="bookStoreApp">
<head>
<meta charset="UTF-8">
<title>BookStore</title>
<script src="framework/1.3.0.14/angular.js"></script>
<script src="framework/1.3.0.14/angular-route.js"></script>
<script src="framework/1.3.0.14/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
bookList.html
<ul>
<li ng-repeat="book in books">
書名:{{book.title}} 作者:{{book.author}}
</li>
</ul>
hello.html
<p>{{greeting.text}},Angular</p>
app.js
var bookStoreApp = angular.module('bookStoreApp', [
'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
'bookStoreServices', 'bookStoreDirectives'
]);
bookStoreApp.config(function($routeProvider) {
$routeProvider.when('/hello', {
templateUrl: 'tpls/hello.html',
controller: 'HelloCtrl'
}).when('/list',{
templateUrl:'tpls/bookList.html',
controller:'BookListCtrl'
}).otherwise({
redirectTo: '/hello'
})
});
controllers.js
var bookStoreCtrls = angular.module('bookStoreCtrls', []);
bookStoreCtrls.controller('HelloCtrl', ['$scope',
function($scope) {
$scope.greeting = {
text: 'Hello'
};
}
]);
bookStoreCtrls.controller('BookListCtrl', ['$scope',
function($scope) {
$scope.books =[
{title:"《Ext江湖》",author:"大漠窮秋"},
{title:"《ActionScript游戲設(shè)計(jì)基礎(chǔ)（第二版）》",author:"大漠窮秋"},
{title:"《用AngularJS開發(fā)下一代WEB應(yīng)用》",author:"大漠窮秋"}
]
}
]);
/**
* 這里接著往下寫蝠筑，如果控制器的數(shù)量非常多狞膘，需要分給多個(gè)開發(fā)者，可以借助于grunt來合并代碼
*/
directvies.js
var bookStoreDirectives = angular.module('bookStoreDirectives', []);
bookStoreDirectives.directive('bookStoreDirective_1', ['$scope',
function($scope) {}
]);
bookStoreDirectives.directive('bookStoreDirective_2', ['$scope',
function($scope) {}
]);
filters.js
var bookStoreFilters = angular.module('bookStoreFilters', []);
bookStoreFilters.filter('bookStoreFilter_1', ['$scope',
function($scope) {}
]);
bookStoreFilters.filter('bookStoreFilter_2', ['$scope',
function($scope) {}
]);
services.js
var bookStoreServices = angular.module('bookStoreServices', []);
bookStoreServices.service('bookStoreService_1', ['$scope',
function($scope) {}
]);
bookStoreServices.service('bookStoreService_2', ['$scope',
function($scope) {}
]);
3. 使用ngRoute進(jìn)行視圖之間的路由
enter description here
路由的原理：首先分析下這個(gè)地址http://127.0.0.1:8080/app/#/hello
我們發(fā)現(xiàn)這個(gè)地址中的#的作用是：內(nèi)部錨點(diǎn)什乙，用來進(jìn)行頁(yè)面內(nèi)部的跳轉(zhuǎn)挽封，加上這個(gè)#后它不會(huì)像服務(wù)器進(jìn)行提交請(qǐng)求。
那么既然是頁(yè)面的內(nèi)部跳轉(zhuǎn)臣镣，這個(gè)AngularJS就可以捕獲這個(gè)跳轉(zhuǎn)從而通過定義路由規(guī)則進(jìn)行頁(yè)面的渲染辅愿。
4. 一切都是從模塊開始的
enter description here
5. ng官方推薦的模塊切分方式
enter description here
6. 模塊之間的依賴應(yīng)該怎么做？--依賴注入
enter description here--
