1. 一个项目的目录结构:
2. 模块化
a. 步骤:
i. 在HTML标签上绑定ng-controller
ii. 定义module,在module上绑定controller
b. e.g.
i. NgModule.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>
ii. NgModule.js
var helloModule=angular.module('HelloAngular', []);
helloModule.controller('helloNgCtrl', ['$scope', function($scope){
$scope.greeting = {
text: 'Hello'
};
}]);
3. 路由
a. 使用ngRoute进行视图之间的路由:通过URL跳转相应的视图
b. 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'
})
});
4. URL中的#号
a. 用来防止浏览器向服务器提交请求,相当于内部的一个锚点,浏览器不会提交请求;
5. 当出现多个controller.js文件
a. 两种解决方式:
i. 使用grunt合并成一个文件,已解决多人开发过程中controller冲突问题;
ii. 官方推荐的方式:
1) 定义多个module,每个module绑定controller;
2) 再定义一个module作为启动点,将其他module绑定到这个module上;
var bookStoreApp = angular.module('bookStoreApp', [
'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
'bookStoreServices', 'bookStoreDirectives'
]);
6. 依赖注入
var bookStoreApp = angular.module('bookStoreApp', [
'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
'bookStoreServices', 'bookStoreDirectives'
]);