--@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路由插件将在下一篇讲解.
--@angularJS--路由、模块、依赖注入的更多相关文章
- angular路由 模块 依赖注入
1.模块 var helloModule=angular.module('helloAngular',[]); helloModule.controller('helloNgCrtl',['$scop ...
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
- 理解AngularJS中的依赖注入
点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...
- 详解AngularJS中的依赖注入
点击查看AngularJS系列目录 依赖注入 一般来说,一个对象只能通过三种方法来得到它的依赖项目: 我们可以在对象内部创建依赖项目 我们可以将依赖作为一个全局变量来进行查找或引用 我们可以将依赖传递 ...
- AngularJS学习之依赖注入
1.什么是依赖注入:简称DI,是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端 ...
- AngularJS中的依赖注入
依赖注入 | Dependency Injection 原文链接: Angular Dependency Injection翻译人员: 铁锚翻译时间: 2014年02月10日说明: 译者认为,本文中所 ...
- AngularJS源码分析之依赖注入$injector
开篇 随着javaEE的spring框架的兴起,依赖注入(IoC)的概念彻底深入人心,它彻底改变了我们的编码模式和思维.在IoC之前,我们在程序中需要创建一个对象很简单也很直接,就是在代码中new O ...
- 细数Javascript技术栈中的四种依赖注入
作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道 ...
- Angular依赖注入:全面讲解(翻译中)
在实际使用Angular依赖注入系统时,你需要知道的一切都在本文中.我们将以实用易懂并附带示例的形式解释它的所有高级概念. Angular最强大.最独特的功能之一就是它内置的依赖注入系统. 大多数时候 ...
- 4.了解AngularJS模块和依赖注入
1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画 ...
随机推荐
- android脚步---将layout和其输出一起保存成图片
public void convertViewToBitmap(View view) { //View view = getLayoutInflater().inflate(R.layout.test ...
- JAVA事件监听机制学习
//事件监听机制 import java.awt.*; import java.awt.event.*; public class TestEvent { public static void mai ...
- Android 自定义 SpinnerButton(转)
Android 自定义 SpinnerButton 模仿Android4.0的Spinner Button写的一个MySpinnerButton.这样在1.6~4.0.4版本都可以实现这种下拉框的效果 ...
- arm nop
MOV R0,R0 这个语句相当于做一次无用功,也就相当于实现了NOP. 接下去就是怎么修改机器码的部分.先查询手册,查到MOV 的机器码是0xE1A0(此处可能不同,主要看自己IDA反汇 ...
- C# 开发技巧]如何防止程序多次运行 线程 进程
程序员必有一些好习惯,我的就是看到好文章就收下 文章来源 http://www.cnblogs.com/zhili/p/OnlyInstance.html 转载请注明出处 最近发现很多人在论坛中问 ...
- zencart侧边导航点击一级目录展开二级目录
[小 大] 2013-09-17 00:20 来源: 未知 作者:wtozz_admin 我要投稿 zencart侧边导航点击一级目录展开二级目录 zen cart Categories默认的是只显示 ...
- decimal 和 numeric (Transact-SQL)
decimal(18,0)18是定点精度,0是小数位数.decimal(a,b)a指定指定小数点左边和右边可以存储的十进制数字的最大个数,最大精度38.b指定小数点右边可以存储的十进制数字的最大个数. ...
- jQuery动态绑定
一.原始需求 在实际项目的时候,遇到了一个问题,就是通过JS动态生成的元素,无法触发JS事件. 原始的JS代码: $(function () { $(".original").cl ...
- Delphi天气预报查询
Delphi天气预报查询 天气预报接口api(中国天气网) 开源免费天气预报接口API以及全国所有地区代码!!(国家气象局提供) 真正的中国天气api接口xml,json(求加精) ...
- spring+hibernate中的Result object returned from HibernateCallback isn't a List
Ok the problem is that for executeFind() the return type is List....so there is no way to use unique ...