AngularJS ui-router的应用场景

背景

《全栈开发之道》书中的应用实例，所用到的是 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



     AngularJS ui-router example  
  
 
 
 


     first message

创建路由文件:

 // 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
 
  this is from msg1 template
   a= {{a}},  b = {{b}}

整个工程目录，如图所示：

ui-router 工程目录

运行结果

启动Web 应用，在浏览器地址栏输入：

http://localhost:8080/a01.html#/first-msg

点击 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 跨域访问，参考方案：

AJAX 跨越访问，解决方案

AngularJS 基于 ui-router，实现页面的跳转和传参（一）

AngularJS 基于 factory，实现页面的跳转和传参（二）

参考书：《全栈开发之道：MongoDB+Express+AngularJS+Node.js 》

更多全栈技术，请关注微信公众号： “全栈工程师的早读课”，每天早8:00 准时推送技术文章。