27angular的路由ui.router和$q

附：双层then的运用：封装一个方法。一、在该方法的内部，（1）获取deferred，（2）执行$http请求，注入then函数(其内执行deferred.resolve(result))、catch函数、finally函数（3）最后返回deferred.promise；二、在该方法调用完成时，通过.then注入成功或失败的回调，供deferred.resolve(result)调用！
```javascript
function outer(obj){
    var deferred = $q.defer();
    $http(obj).then(function (result) {//2、$http(obj)异步，注入此行then  5、服务器返回数据，执行此行的then
        deferred.resolve(result);// 6、传参并执行步骤4的注入（如果不考虑复用性，也可以把步骤4写在这里）
    });
    return deferred.promise;//3、返回promise实例
}
outer().then(function(result){});//1、outer()执行  4、注入then
```
一、ui.router
ui.router和ngRoute的区别
（1）ui.router模块提供$urlRouterProvider、$stateProvider、$stateParams服务
（2）ngRoute模块提供$routeProvider、$routeParams服务
来源https://blog.csdn.net/mcpang/article/details/55101566
1、ui.router 路由模块，
（1）提供$stateProvider对象，用$stateProvider.state(stateNameString, stateConfigObject)配置路由。用template去替换<ui-view></ui-view>或<div ui-view></div>。stateConfigObject包含以下内容：
```html
template： string/function，html模板字符串，或者一个返回html模板字符串的函数。
templateUrl：string/function，模板路径的字符串，或者返回模板路径字符串的函数。
templateProvider：function，返回html模板字符串或模板路径的服务。
controller：string/function，新注册一个控制器函数或者一个已注册的控制器的名称字符串。
controllerProvider：function，返回控制器或者控制器名称的服务
controllerAs：string，控制器别名。
parent：string/object，手动指定该状态的父级。
resolve：object，将会被注入controller去执行的函数，<string,function>形式。
url：string，当前状态的对应url。
views：object，视图展示的配置。<string,object>形式。
abstract：boolean，一个永远不会被激活的抽象的状态，但可以给其子级提供特性的继承。默认是true。
onEnter：function，当进入一个状态后的回调函数。
onExit：function，当退出一个状态后的回调函数。
reloadOnSearch：boolean，如果为false，那么当一个search/query参数改变时不会触发相同的状态，用于当你修改$location.search()的时候不想重新加载页面。默认为true。
data：object，任意对象数据，用于自定义配置。继承父级状态的data属性。换句话说，通过原型继承可以达到添加一个data数据从而整个树结构都能获取到。
params：url里的参数值，通过它可以实现页面间的参数传递。
```


（2）提供$urlRouterProvider对象，用$urlRouterProvider.when配置与后台匹配的路由、用$urlRouterProvider.otherwise配置与后台不匹配的路由
2、ui.router实际执行步骤：参数应该配置在url属性上，参数的初始化应该配置在params上。
```javascript
ng-click="go_to('safe','noRead')"//触发
$scope.go_to = function (page, params) { $state.go(page, { target: params}) };//定义
$scope.go_to = function (page, params) { $state.go('safe', { target: 'noRead'}) };//执行
$stateProvider.state('safe', {params:{target: null},templateUrl: ,})//定义
$stateProvider.state('safe', {params:{target: 'noRead'},templateUrl: ,})//执行
```
（1）定义路由状态；
```javascript
$stateProvider
  .state('page2', {
    url: '/event-safe/:type',//（1）定义参数
    params: {//这项配置的作用是：初始化参数
      type: null
    },
    templateUrl: 'event/event-safe.html',
    controller: 'eventSafeCtrl',
  })
```
（2）在HTML页面触发事件，激活路由
```javascript
A、$state.go()：优先级较高的便利方式，例如<button onclick="changeState()"></button>
B、ui-sref：点击包含此指令跳转，例如<a ui-sref="page2({type:1})"></a>
C、url：url导航，例如<a ng-href="#/page2/1"></a>
```

（3）在目标HTML页面的控制器里，定义函数和获取参数
```javascript
$scope.changeState=function(){
$state.go("page2",{type:1});//（2）赋值参数
}
$stateParams.type //（3）获取参数
```
（4）$stateProvider负责关联url和state。$state.go(state)执行，如果url存在，url将赋值给浏览器地址栏并触发$urlRouterProvider；否则不会。
$urlRouterProvider负责监听浏览器地址栏的url。url改变，当没有state和它关联，url将被赋值为$urlRouterProvider.otherwise(urlA)中的urlA，state被赋值为urlA对应的state。

3、ui.router路由嵌套：通过 .语法进行路由层级配置
案例：
案例来源：https://blog.csdn.net/u011068996/article/details/54861844
案例来源：https://www.cnblogs.com/haogj/p/4885928.html
代码示例一：index.html
```html:run
<!DOCTYPE html>
<html lang="en" ng-app="sunday">
<head>
    <meta charset="UTF-8">
    <title>index.html</title>
</head>
<body>
<a ui-sref="hello" ui-sref-active="active">hello</a>
<a ui-sref="world" ui-sref-active="active">world</a>
<ui-view></ui-view>
<script src="js/angular.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/index.js"></script>
</body>
</html>
```
代码示例二：world.html
```html:run
<div>
    <a ui-sref=".isRely" ui-sref-active="active">isRely</a>
    <a ui-sref="noRely" ui-sref-active="active">noRely</a>
</div>
<div ui-view ></div>
```
代码示例三：index.js
```javascript
    angular.module('sunday',['ui.router'])
            .config(function($stateProvider){
                $stateProvider.state('hello-world',{
                    url:'/hello',
                    template:'<h3>hello world!</h3>'
                }).state('world',{
                    url:'/world',
                    templateUrl:'world.html'
                }).state('world.isRely',{
                    url:'/world/isRely',
                    template:'<h3>This is a World 1</h3>'
                }).state('noRely',{
                    url:'/world/noRely',
                    template:'<h3>noRely并不依赖于world，在我们点击它的时候，他会替换掉index.html中的<div ui-view></div></h3>'
                })
            });
```
附：ngRoute模块提供$routeProvider服务
```javascript
<a class="btn btn-default" href="#/bookDetail/{{book.id}}">//实参
app.config(function ($routeProvider) {$routeProvider.when('/bookDetail/:bookId',{}).when()});//形参
var bookId = $routeParams.bookId;//获取实参
```
二、$q
1、$q源码
$q是Angular中封装的一层Promise，通过$q.defer()平行地返回一个promise实例和三个方法。
$q.defer()==>Deferred()==>一个promise实例和三个方法;
在Angular源码中的q.js 302行：function defer() { return new Deferred(); }
在Angular源码中的q.js 306行：
```javascript
function Deferred() {
var promise = this.promise = new Promise();
//非原型方法(支持未绑定执行所必需的)
//Non prototype methods necessary to support unbound execution
this.resolve = function(val) { resolvePromise(promise, val); };
this.reject = function(reason) { rejectPromise(promise, reason); };
this.notify = function(progress) { notifyPromise(promise, progress); };
}

```
2、$q案例一
```javascript
<script>
    var app = angular.module('appModule',[]);
    app.controller('ctrl',function ($scope) {
        let testFn = () => {
            let deffered = $q.defer();
            setTimeout(() => {
                deffered.resolve("data");
            //向注入进来的回调传参并执行
        },1000);
            return deffered.promise;
        }
        testFn().then((data) => {
            console.log(data);
        return testFn();
    }

    });
</script>
```
3、$q案例二
```html
<!doctype html>
<html lang="en" ng-app="appModule">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body ng-controller="ctrl">
<button class="btn btn-success" ng-click='test()'> 测试$q</button>
<p>每1秒打印出了1个 “data” ,一共打出3个 “data”</p>
</body>
</html>
<script>
    var app = angular.module('appModule',[]);
    app.controller('ctrl',function ($scope) {
        let testFn = () => {
            let deffered = $q.defer();
            setTimeout(() => {
                deffered.resolve("data");
            //向注入进来的回调传参并执行
        },1000);
            return deffered.promise;
        }

        $scope.test = () => {
            testFn()
                    .then((data) => {
                console.log(data);
            return testFn();
        })
        .then((data) => {
                console.log(data);
            return testFn();
        })
        .then((data) => {
                console.log(data);
            return testFn();
        })
        .catch(err => {
                console.log(err);
        })
        }
    });
</script>
```
4、$q案例三
```javascript
$http()
.then(function (res) {deferred.resolve(res.data)})
.catch(function (err) {deferred.reject(err);})
.finally(function () {});
或者
$http()
.then(function (res) {deferred.resolve(res.data)},
      function (err) {deferred.reject(err);})
.finally(function () {})
```
27angular的路由ui.router和$q

猜你喜欢
