--@angularJS--路由、模块、依赖注入
以下是演示angular路由切换的demo.
主页: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>
模板文件(html碎片文件)tpls/:
hello.html:
<p>{{greeting.text}},Angular</p>
bookList.html:
<ul>
<li ng-repeat="book in books">
书名:{{book.title}} 作者:{{book.author}}
</li>
</ul>
控制器文件js/:
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:"《AngularJS从入门到精通》",author:"中华烟云"},
{title:"《AngularJS权威指南》",author:"中华烟云"},
{title:"《用AngularJS开发下一代WEB应用》",author:"中华烟云"}
]
}
]);
/**
* 这里接着往下写,如果控制器的数量非常多,需要分给多个开发者,可以借助于grunt来合并代码
*/
最后实现路由功能的是app.js:
var bookStoreApp = angular.module('bookStoreApp', [
'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
'bookStoreServices', 'bookStoreDirectives' //[]内的为依赖注入的模块,ng开头的为angular自带的模块
]);
bookStoreApp.config(function($routeProvider) { //$routeProvider是angular-route.js提供的原生路由对象,可以通过$routeProvider.when({}).when({})....otherwise({});这种链式写法来配置路由
$routeProvider.when('/hello', { //'/hello'为路由路径,即在哈希符#后面动态输入的路径字串,如:....#/hello
templateUrl: 'tpls/hello.html', //当路径为...#/hello时,调用模板文件'tpls/hello.html'
controller: 'HelloCtrl' //当路径为...#/hello时,调用控制器文件'js/HelloCtrl.js
}).when('/list',{ //:此时若切换到...#/list路径下
templateUrl:'tpls/bookList.html', //当路径为...#/list时,调用模板文件'tpls/bookList.html'
controller:'BookListCtrl' //当路径为...#/list时,调用控制器文件'js/BookListCtrl.js
}).otherwise({ //:否则默认跳转到...#/hello路径下
redirectTo: '/hello'
})
});
注:angular-route.js提供的原生路由对象有个缺陷,就是不能深层次嵌套。要实现深层次嵌套,还得用UI-Router,源文件为angular-UI-Router.js.
UI-Router路由插件将在下一篇讲解.
最新文章
- leetcode算法分类
- XML学习笔记(三) -- Schema
- OC 继承子类对象调用方法机制 子类对象访问父类中的实例变量
- HDU 5265 pog loves szh II (技巧)
- Visual Studio下Qt调用IDL
- UI5_UIAlertView与UIActionSheet
- 五,整型变量的读入——scanf函数
- GCC编译警告和错误
- C++一些注意点之操作符重载
- 每次从vss获取文件都是只读
- VMware克隆CentOS虚拟机后固定IP的问题
- CSS常用Hack集合(adding)
- 如何删除当前正在使用的SQLLite文件?
- SpringCloud(7)---网关概念、Zuul项目搭建
- python之路:列表及元组之定义
- 【阿里云服务器】外网无法访问tomcat下部署的项目
- “玲珑杯”ACM比赛 Round #18---图论你先敲完模板(DP+思维)
- P1274 魔术数字游戏 naive搜索+剪枝
- spring-boot 多线程
- sklearn 中fit_tansform 与 transform的区别