一、路由ngRoute服务
随着web应用越来越大,一个应用里面存在多个视图。在不同的视图之间进行切换时(url),为了支持浏览器的“前进、后退、history”,angular有ngRoute服务,提供$routeProvider
通常我们的URL形式为http ://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如:
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
当我们点击以上的任意一个链接时,向服务端请的地址都是一样的 (http ://runoob.com/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。(防止向后台服务器发送请求,告诉浏览器在页面内跳转)
AngularJS 路由 就通过 # + 标记 把井号后面内容取出来跟$routeProvider中的内容匹配,从而确定展现哪个视图。
$routeProvider 用来定义路由规则。
用法:
$routeProvider.whenAPI来定义我们的路由规则。第一个参数是 URL 或者 URL 正则规则。第二个参数是路由配置对象。根据访问路径不同,展示不同的view:
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
注意:angular自身提供的$routeProvider无法进行深层次的嵌套,可以使用angular-ui里的UI-Router来实现深层次嵌套
链接:https://github.com/angular-ui
与ngRoute的区别是:
1、可实现路由分开控制多模块页面的各个模块
2、index.html中的视图部分为
3、需要依赖ui.router,函数需要引入$stateProvider
及$urlRouterProvider
4、语法类似ngRouter
二、模块
模块是应用控制器的容器。控制器通常属于一个模块。
(1)创建模块
通过 AngularJS 的 angular.module 函数来创建模块:
"myApp">...
接着可以在 AngularJS 应用中添加控制器,指令,过滤器等。
(2)添加控制器
你可以使用 ng-controller 指令来添加应用的控制器:
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
script>
(3)添加指令
AngularJS 提供了很多内置的指令,你可以使用它们来为你的应用添加功能。http://www.runoob.com/angularjs/angularjs-reference.html
此外,你可以使用 .directive 函数来添加自定义的指令。使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive。建议用属性名来调用指令:
<div ng-app="myApp" runoob-directive>div>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "我在指令构造器中创建!"
};
});
script>
通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。那么引入js文件即可:
<script src="myApp.js">script>
在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖,如果有依赖的话会在中括号写上依赖的模块名字。
var app = angular.module("myApp", []);
三、依赖注入
在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分。使得程序设计变得松耦合
依赖注入是通过在需要的地方通过参数进行传递实现的。