写在前面
对单页应用来讲，视图和路由的作用可以从一个视图跳转到另外一个视图，可以合理管理用户在使用过程中看到的界面。
将视图分解成布局和模版视图，并且根据用户当前访问的URL来展示对应的视图，将会是一种更好的做法。
我们会将这些模版分解到视图中，并在布局模版中进行组装。Angularjs允许我们在$route服务的提供者$routeProvider中通过声明路由实现该功能呢。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-show和ng-hide
一个例子
在HTML中，需要引用AngularJS之后引用angular-route：
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="JS/angular.min.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="JS/angular-route.min.js"></script>
然后，要把ngRoute模块在应用中当作依赖加载进来：
<script> var app = angular.module('app',['ngRoute']); </script>布局模板
创建一个布局模版，就是告诉angularjs把模板渲染到何处。通过将ng-view指令和路由组合到一起，我们可以精确的指定当前路由所对应的模板在dom中的渲染位置。
例如，有这样一段html
<body> <header>这是header</header> <div> <div ng-view></div> </div> <footer>这是footer</footer></body>
在这个例子中，将所有需要渲染的内容都放到了<div>中，而<header>和<footer>中的内容在路由改变时不会发生变化。
ng-view是由ngRoute模块提供的一个特殊指令，它的独特作用是在HTML中给$route对应的视图内容占位。ng-view是一个优先级为1000的终极指令。angularjs不会运行同一个元素上的低优先级指令（例如<div ng-view></div>元素上其他指令都是没有意义的）
ngView指令遵循以下规则
1、每次触发$routeChangeSuccess事件，视图都会更新。
2、如果某个模版同当前的路由相关联：
创建一个新的作用域。
移除上一个视图，同时上一个作用域也会被清楚。
将新的作用域同当前摹本关联在一起。
如果路由中有相关的定义，那么就把对应的控制器同当前作用域关联起来。
触发$viewContentLoaded事件。
如果提供了onload属性，调用该属性所指定的函数。
路由
angularjs提供了when和otherwise两个方法来定义路由。用config函数在特定的模块或应用中定义路由。
现在，我们使用when方法添加一个特定的路由。
when方法：path，route
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"><head><title>路由</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="JS/angular.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="JS/angular-route.min.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) { //这里指定路由 $routeProvider
.when('/', {
templateUrl: './views/Login.html',
controller: 'LoginController'
})
.when('/Login', {
templateUrl: './views/Login.html',
controller: 'LoginController'
})
}]); //控制器 app.controller('LoginController', function ($scope) {
}); </script>
<style>
ul {
list-style-type: none;
}
</style></head><body>
<header>这是header</header>
<div>
<div ng-view></div>
</div>
<footer>这是footer</footer></body></html>
Login视图Login.html
<ul>
<li>用户名：<input type="text" /></li>
<li>密 码：<input type="password" /></li>
<li><button>登录</button><button>取消</button></li>
</ul></div>
在浏览器中查看
当然访问这样的路由：http://localhost:18174/1_4_route.html#/Login也是可以的。
第一个参数：是路由路径，这个路径会与$location.path进行匹配，$location.path也就是当前的URL的路径。如果路径后面还有其他内容，或使用了双斜线也可以正常匹配。我们也可以在url中存储参数，参数需要以冒号开头（例如:name），获取url参数可以使用$routeParams获取。
第二个参数是配置对象，决定了当第一个参数中的路由能够匹配时具体做些什么。配置对象中可以进行设置的属性包括controller、template、templateUrl、resolve、redirectTo和reloadOnSearch。
总结
这里介绍了路由与视图的简单知识点，也是由于在项目中用到的，也只能用到那儿，从哪儿学习，然后自己弄个demo学习了。这里举了一个简单的例子，先上手。当然，在实际的项目中，在项目中添加Controller，views等文件夹，使项目结构更清晰一些。
参考
angularjs权威教程
共同学习，写下你的评论
评论加载中...
作者其他优质文章
