AngularJS的模块化实现
example.html
<html data-ng-app="HelloAngular">
<head>
<meta charset="utf-8">
</head>
<body>
<div data-ng-controller="helloCtrl">
<p>{{greeting.text}},Angular</p>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
//定义一个模块
angular.module('HelloAngular', [])
//创建一个控制器
.controller('helloCtrl', ['$scope',function($scope){
$scope.greeting = {
text : 'Hello'
}
}]);
/*
*全局函数写法已废弃,因为会造成全局空间的污染
function HelloAngular($scope) {
$scope.greeting = {
text : 'Hello'
};
}
*/
运行结果:
使用ngRoute进行视图之间的路由
$routeProvider是一个用于配置路由的内置服务。由于它是一个服务,根据service的使用建议,我们主要将其当做为工具来使用,所以我们一般直接使用$routeProvider.XXX来调用它的成员方法来实现一定的功能,而不是实例化一个$routeProvider的实例。它主要有以下两个成员函数:
- otherwise(params):设定映射信息到$route.current,一般用于指定没有标明的路由如何处理。
- when(path,route):向$route服务添加新的路由。path是指定的URL路径,route标明路由的处理。
var bookStoreApp = angular.module('bookStoreApp', []);
bookStoreApp.config(function($routeProvider) {
$routeProvider.when('/hello', {
templateUrl : 'tpls/hello.html',
controller : 'HelloCtrl'
}).when('/list',{
templateUrl : 'tpls/bookList.html',
controller : 'BookListCtrl'
}).otherwise({
redirectTo : '/hello'
})
});
#用来防止浏览器向后台提交请求,#相当于内部的锚点,浏览器不会像服务端发送请求,通过锚点和后面的/,用来告诉浏览器在页面内跳转,AngularJS会拦截这个URL地址,然后把#后面的内容取出来,与routeProvider中的内容进行匹配,然后它就知道去展现哪个视图了 。不同的视图可以交给不同的控制器处理。
模块之间的依赖如何实现?——依赖注入
var bookStoreApp = angular.module('bookStoreApp', [
'ngRoute','ngAnimate','bookStoreCtrls','bookStoreFilter',
'bookStoreServices','bookStoreDirectives'
]);
AngularJS在启动的时候会去检测[ ]中的字符串所对应的模块有没有注册或者能不能加载进来,如果模块不存在,AngularJS会报错。AngularJS内部的依赖注入是这样去做的。如果需要依赖其它的模块,只要声明在[ ]数组中,AngularJS就知道了。以ng开头的是AngularJS自身所提供的模块,在index.html中,把它们以script的方式导入进来就可以使用了。