背景
《全栈开发之道》书中的应用实例，所用到的是 ngRoute，用来作为路由的跳转。 其实， 在AngularJS 家族中，还有另外一个重要的路由跳转模块， 它就是 ui-router。
ngRoute 的不足
ngRoute 与 ng-view 配套使用。 它的问题是， 在一个HTML 文件中，只能出现一个 ng-view。 在单页面应用中，一个页面中，需要多个 ng-view的组合。 这时候，就需要ui-router 粉墨登场了。
ui-router的出身
ui-router 是由 AngularJS UT team 创建的；它的功能更为强大，可以完全取代 ngRoute。 在ui-router中，用到的关键字是 state。 通过 $stateProvider 配置路由。
ui-router 最大的优势是应用在 多视图（multiple views）的场景中。
ui-router的使用， 分为三步：
- 引入
ui-router模块 （angular-ui-router.js） （注：在引入 AngularJS之后） - 使用
ui-router，作为模块的依赖注入； - 使用 $stateProvider 配置状态（state）
- 使用 ui-view 注入视图。
ui-router 应用实例
创建视图文件：
// a01.html
<!DOCTYPE html>
<html>
<head>
<title> AngularJS ui-router example </title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' />
<script type="text/javascript" src= "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" >
</script>
<script type="text/javascript" src= "http://apps.bdimg.com/libs/angular-ui-router/0.2.15/angular-ui-router.js" >
</script>
<script type="text/javascript" src="a01.js" > </script>
</head>
<body ng-app= "app">
<a href=" #/first-msg "> first message </a>
<div ui-view >
</div>
</body>
</html>
创建路由文件:
// a01.js
var app = angular.module ('app', ['ui.router']) ;
app.config( [ '$stateProvider', function( $stateProvider ) {
$stateProvider.state('firstMessage', {
url: '/first-msg',
templateUrl: 'msg1.html' ,
controller: 'msg1'
});
}]);
app.controller('msg1', ['$scope', function($scope) {
$scope.a = 10;
$scope.b = 20 ;
} ]);
创建视图组件
// msg1.html
<div>
this is from msg1 template
a= {{a}}, b = {{b}}
</div>
整个工程目录，如图所示：
ui-router 工程目录
运行结果
启动Web 应用， 在浏览器地址栏输入：
点击 first message 时，出现如下效果：
Snip20180102_16.png
疑问
按照以上步骤，完成了代码的编写。通常运行时，直接点击 a01.html。 这时候，浏览器会报错：
浏览器运行报错
angular.js:10695 Failed to load file:///Users/lingzhi/Desktop/test/msg1.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
解决方法
其实，这个报错与 AngularJS 没有直接关系，它是 AJAX 的跨域访问造成的。
一种最为简洁的办法是： 在电脑上安装 node.js ，在终端窗口启动 http-server
leopardmac:test lingzhi$ http-server
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://192.168.1.107:8080
AJAX 跨域访问，参考方案：
AngularJS 基于 ui-router，实现页面的跳转和传参（一）
AngularJS 基于 factory，实现页面的跳转和传参（二）
参考书： 《 全栈开发之道：MongoDB+Express+AngularJS+Node.js 》
更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。
网友评论