版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luo4105/article/details/77897335
路由
路由允许我们通过不同的 URL 访问不同的内容。我觉得听夸张，以前这都是后台的控制器来处理的，如servlet，springMVC这类。
通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。
代码语言：javascript复制<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
<li><ahref="#/">首页</a></li>
<li><ahref="#/computers">电脑</a></li>
<li><ahref="#/printers">打印机</a></li>
<li><ahref="#/others">其他</a></li>
</ul>
<div ng-view></div>
<scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<scriptsrc="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
angular.module("routingDemoApp", ['ngRoute'])
.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when('/',{template : '这是首页页面'})
.when('/computers',{template : '这是电脑页面'})
.when('/printers',{template : '这是打印机页面'})
.otherwise({'redirectTo':'/'})
}])
</script>
</body>通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS通过 # 标记实现，例如：
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由就通过 # 标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
实例解析：
1、载入了实现路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
angular.module('routingDemoApp',['ngRoute'])
3、使用 ngView 指令。
代码语言：javascript复制<div ng-view></div>该 div 内的 HTML 内容会根据路由的变化而变化。
4、配置 $routeProvider，AngularJS$routeProvider 用来定义路由规则。
代码语言：javascript复制module.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);实例
代码语言：javascript复制<body ng-app='routingDemoApp'>
<h2>AngularJS路由应用</h2>
<ul>
<li><ahref="#/">首页</a></li>
<li><ahref="#/computers">电脑</a></li>
<li><ahref="#/printers">打印机</a></li>
<li><ahref="#/others">其他</a></li>
</ul>
<divng-view></div>
<scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<scriptsrc="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{template : '这是首页页面'})
.when('/computers',{template : '这是电脑页面'})
.when('/printers',{template : '这是打印机页面'})
.otherwise({'redirectTo':'/'})
}])
</script>
</body>使用ui-router
代码语言：javascript复制<body ng-app='routingDemoApp'>
<h2>AngularJS路由应用</h2>
<ul>
<li><ahref="#/">首页</a></li>
<li><ahref="#/computers">电脑</a></li>
<li><ahref="#/printers">打印机</a></li>
<li><ahref="#/others">其他</a></li>
</ul>
<divui-view="left"></div>
<divui-view="right"></div>
<scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<scriptsrc="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<scriptsrc="https://cdn.bootcss.com/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"></script>
<script>
varmainApp = angular.module("routingDemoApp", ["ui.router"]);
mainApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("home",{
url: "/",
views: {
left: {
template: "这是首页页面"
},
right: {
template: "这是右侧页面"
}
}
})
.state("computers",{
url: "/computers",
templateUrl: "computers.html"
})
.state("printers",{
url: "/printers",
templateUrl: "printers.html"
})
.state("others",{
url: "/others",
templateUrl: "others.jsp"
});
$urlRouterProvider.otherwise("others");
})
</script>
</body>全局方法
复制
代码语言：javascript复制angular.copy(source,destination)注意
如果只有一个参数（没有指定拷贝的对象），则返回一个拷贝对象
如果指定了destination,则会深拷贝对象复制给destination
如果source是null或者undefined，那么会直接返回source
如果source就是desitination，那么会报错。
