[AgnularJS] Route Life Cycle

時間 2019-11-12

標籤 agnularjs route life cycle 简体版

原文原文鏈接

If you change a route, basic there are four steps before you can see the final reuslt.javascript

1. on fire, for exmaple:css

$location.path("/new");

In this step, there is your only change to do something you need to do before route changed.html

2. route change start:java

$rootScope.$on("$routeChangeStart", function(){...});

It knows where it should go and where it comes from. But data is not ready yet.promise

3. route change success:app

$rootScope.$on("$routeChangeSuccess",function(){...});

The data is ready, route is changed ono the address panel and tempalte is loaded into the memory, but not yet shown on the screen.ide

4. show the template on the screen. Get into the new controller.this

var app = angular.module("app", ["ngRoute"]);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/',
        {
            templateUrl: "app.html",
            controller: "ViewCtrl"
        }).when('/new', {
            templateUrl: 'new.html',
            controller: "NewCtrl",
            resolve:{
                loadData: viewCtrl.loadData
            }
        })
});

app.directive('error', function($rootScope){
    return{

        restrict: 'E',
        template: '<div class="alert-box alert" ng-show="isError">Error!!!</div>',
        link: function(scope){
            $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) {
                scope.isError = true;
            })
        }
    }
})

app.controller("AppCtrl", function ($scope, $rootScope, $route, $location) {
    //event on route, depends on root scope
    $rootScope.$on("$routeChangeStart", function(event, current, previous, resolve){
        console.log("-------------2- change start----------------");
        //Before any promises been  resolved
        //know where it's going
        //where it comes from
        //but not yet data ready
        console.log($scope, $rootScope, $route, $location);
    });

    $rootScope.$on("$routeChangeSuccess",function(event, current, previous, resolve){
        console.log("-------------3- change success----------------");
        //Data is ready,
        //route is change
        //template has been loaded into memory
        //but visual not change yet
        console.log($scope, $rootScope, $route, $location);
    });
});

var viewCtrl = app.controller("ViewCtrl", function ($scope, $route, $location) {
    console.log($route);
   $scope.changeRoute = function(){
       console.log("-------------1-before change route----------------");
       console.log($scope);
       //Before the route change, here is the only change to do anything you need to do
       $location.path("/new");
   }
});

app.controller("NewCtrl", function($scope, loadData, $template) {
    console.log("-------------4-all done----------------");
    //change the visual
    console.log($scope, loadData, $template);
});

viewCtrl.loadData = function ($q, $timeout) {
    var defer = $q.defer();
    $timeout(function () {
       defer.resolve({message: "success"})
    }, 2000);
    return defer.promise;
}

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title>Egghead Videos</title>
  <link rel="stylesheet" href="./foundation.min.css">
  <script type="text/javascript" src="./angular.min.js"></script>
  <script type="text/javascript" src="./angular-route.min.js"></script>
  <script type="text/javascript" src="./app.js"></script>  
</head>
<body>

  <div ng-app="app" ng-controller="AppCtrl">
    <ng-view></ng-view>
      <error></error>
  </div>
</body>
</html>

app.htmlspa

<h1><div ng-click="changeRoute()">Change route</div></h1>

new.htmlrest

<h1>Hi, I'm new here!</h1>

after cilick, change to

相關標籤/搜索

route+antd+recharts+excel

paste+pastedeploy+route+webob

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。