27angular routing ui.router and $ q

Annex: then using the double: a packaging method. An inside of the process, (1) obtaining deferred, (2) perform $ HTTP request, then the function injection (executing within deferred.resolve (result)), catch function, the finally function (3) and finally returns deferred.promise ; Second, when the method call completes, by injecting a callback .then success or failure for deferred.resolve (result) call! 
JavaScript `` ` 
function Outer (obj) { 
    var deferreds q.defer = $ (); 
    $ HTTP (obj) .then (function (Result) {// 2, $ HTTP (obj) asynchronous, this injection line then 5, the server returns the data, then execute this line 
        deferred.resolve (result); // 6, parameter passing and injection step 4 (without considering reuse, step 4 can also go here) 
    }); 
    return deferreds .promise; // 3, return promise instance 
} 
Outer () the then (function (Result) {});.. 1 //, Outer () 4 performs, implantation the then 
`` ` 
a, ui.router 
ui.router and ngRoute the difference between 
(1) ui.router module provides $ urlRouterProvider, $ stateProvider, $ stateParams service 
(2) ngRoute module provides $ routeProvider, $ routeParams service
Source https://blog.csdn.net/mcpang/article/details/55101566 
1, ui.router routing module 
(1) providing a $ stateProvider objects, configure routing with $ stateProvider.state (stateNameString, stateConfigObject). To replace <ui-view> </ ui -view> or <div ui-view> </ div> with the template. stateConfigObject include the following: 
`` `html 
Template: String / function, html template string, or a string returned html template functions. 
templateUrl: string / function, the path string template, template or return path string functions. 
templateProvider: function, return to service html template string or a template path. 
controller: string / function, a new registration name string controller function or a registered controller. 
controllerProvider: function, returns the name of the controller or the controller service 
controllerAs: string, controller alias. 
parent: string / object, manually specify the parent state. 
resolve: object, it will be injected to perform the controller function, <string, function> form. 
url: string, corresponding to the current state of the url. 
views: object, view display configuration. <string, object> form.
abstract: boolean, a never abstract state is activated, it can inherit characteristics to provide its children. The default is true. 
onEnter: function, the callback function when entering a state. 
onExit: function, when a callback function exits the state after. 
reloadOnSearch: boolean, if false, then when a search / query parameter change does not trigger the same state, for when you modify $ location.search () when not want to reload the page. The default is true. 
data: object, any object data, a custom configuration. The data property inherited parent state. In other words, data can be achieved by adding a prototype data so that the entire inheritance tree structure can be obtained. 
params: url in the parameter values, parameter passing between pages can be achieved by it. 
`` ` 


(2) providing a $ urlRouterProvider object with the background $ urlRouterProvider.when configuration matching route, with $ urlRouterProvider.otherwise configuration does not match the background route 
2, ui.router actual implementation the steps of: url attribute parameters should be disposed on initialization parameters should be configured on the params. 
JavaScript `` ` 
ng the Click-=" go_to ( 'Safe', 'noRead') "// Trigger 
$ scope.go_to = function (page, params ) {$ state.go (page, {target: params})}; //definition
$ scope.go_to = function (page, params ) {$ state.go ( 'safe', {target: 'noRead'})}; // execute 
$ stateProvider.state ( 'safe', { params: {target: null }, templateUrl:,}) // define 
$ stateProvider.state ( 'safe', { params: {target: 'noRead'}, templateUrl:,}) // perform 
`` ` 
(1) defines the state of the route; 
` ` JavaScript ` 
$ stateProvider 
  .STATE ( 'PAGE2', { 
    URL: '/ Event-Safe /: type', // (. 1) define the parameters 
    params: {// this effect is arranged: initialization parameter 
      type: null 
    }, 
    templateUrl: 'event / event-safe.html', 
    Controller: 'eventSafeCtrl', 
  }) 
`` ` 
(2) a triggering event in the HTML page, the activation-routing 
` `` JavaScript 
A, $ state.go (): priority than a highly convenient manner, e.g. <button onclick = "changeState () "> </button>
B, ui-sref: Click comprising this jump instruction, e.g. ui-sref="page2({type:1})"> </a> <a 
C, URL: URL navigation, e.g. <a ng-href = " # / PAGE2 /. 1 "> </a> 
` `` 

(. 3) in the target controller in the HTML page, and the definition of acquisition parameters function 
`` `JavaScript 
$ scope.changeState = function () { 
$ state.go (" page2 ", {type: 1} ); // (2) of the assigned parameter 
} 
$ stateParams.type // (. 3) acquisition parameters 
` `` 
(. 4) $ url stateProvider responsible association and state. $ state.go (state) execution, if there is url, url will be assigned to the browser address bar and trigger $ urlRouterProvider; otherwise they would not. 
$ urlRouterProvider responsible for monitoring the url in the browser address bar. url changed, when there is no state associated with it, would be assigned to url $ urlRouterProvider.otherwise (urlA) in Urla, Urla state is assigned to the corresponding state. 

3, ui.router routing nesting: by routing syntax level configuration. 
Case: 
Case Source: https: //blog.csdn.net/u011068996/article/details/54861844 
Case Source: https: //www.cnblogs.com /haogj/p/4885928.html 
the code sample: index.
```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 does not depend on world, we click on it, he will replace <div ui-view> index.html in </ div> </ h3>' 
                }) 
            }); 
` `` 
attached: ngRoute module provides $ routeProvider service 
`` `JavaScript 
<a class="btn btn-default" href="#/bookDetail/{{book.id}}"> // arguments 
app.config (function ( $ routeProvider) {$ routeProvider.when ( ' / bookDetail /: bookId'., {}) when ()}); // parameter 
var bookId = $ routeParams.bookId; // Get argument 
` 
II. $ Q 
. 1, the source $ q 
$ q is encapsulated in a layer Angular Promise, and returns an instance of three methods promise $ q.defer () in parallel. 
$ q.defer () ==> Deferred ( ) ==> instance and a promise three methods; 
in the q.js 302 Angular source line: function defer () {return new Deferred ();} 
in the source code Angular the q.


var promise = this.promise = new Promise ( ); 
non prototyping // (unbound support necessary for execution) 
// Non Necessary to the prototype Methods Execution Support Unbound 
this.resolve = function (Val) {resolvePromise (Promise, Val);}; 
this.reject = function (reason) {rejectPromise (Promise, reason);}; 
this.notify = function (Progress) {notifyPromise (Promise, Progress);}; 
} 

`` ` 
2, $ Q case a 
`` `JavaScript 
<Script> 
    var App = angular.module ( 'the AppModule', []); 
    app.controller ( 'Ctrl', function ($ scope) { 
        the let testFn = () => { 
            the let $ Q = DEFFERED .defer (); 
            the setTimeout (() => { 
                deffered.resolve ( "Data"); 
            // perform the injection parameter passing and coming callback
        },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 test $ </ Button> </ HTML></ body>
<P> per second printing out a "data", played a total of three "Data" </ P>


<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 () {})
```