angular routing, ui-router,ocLazyLoad usage

angular for beginners. Please point out the mistakes. Thank you.

1.angular routing, modularization, replacement of html content to replace the display of the page.

2. After routing is established, ui-router is used to change content in two (or more) different places of the page at the same time.

3. If it is not a small project, all the js and css used in routing sub-pages are loaded in the first load of the home page, and the experience is very poor, using ocLazyLoad to achieve on-demand loading (loaded js are stored in the cache, only loaded once, not repeated loading).

Next, step by step.

One: angular routing (there are a lot of online tutorials, only posting code)

html

<script src="style/js/angular.min.js"></script>  
<script src="style/js/angular-route.js"></script>

<body ng-app="myapp">  
    <div class="nav">  
        <ul>  
        <span style="white-space:pre">  </span><li><a href="#/ indexcont "> Home page</a></li>  
            <li><a href="#/ P1 "> Article</a></li>  
            <li><a href="#/ p2"> Bullet Window</a></li>  
            <li><a href="#/ P3 "> input box</a></li>  
        </ul>  
    </div>  
    <div class="cont" ng-view></div>  
</body>

var app = angular.module('myapp',['ngRoute'])  
    .config(['$routeProvider',function($routeProvider) {  
        $routeProvider  
        .when('/indexcont',{templateUrl:'html/indexcont.html'})  
        .when('/p1',{templateUrl:'html/p1.html'})  
        .when('/p2',{templateUrl:'html/p2.html'})  
        .when('/p3',{templateUrl:'html/p3.html'})  
        .otherwise({redirectTo:'/indexcont'});  
    }])

Second: Change multiple content at the same time: ui-router
Replacing ng ng ng-route with ui-router makes module dependencies different. Here's the code

html

<script src="style/js/angular.min.js"></script>  
<script src="style/js/angular-ui-router.min.js"></script>

<body ng-app="myapp">  
  <div class="nav">  
  <ul>  
    <li><a href="#/ indexcont "> Home page</a></li>  
    <li><a href="#/ P1 "> Article</a></li>  
    <li><a href="#/ p2"> Bullet Window</a></li>  
    <li><a href="#/ P3 "> input box</a></li>  
  </ul>  
  </div>  
    <div class="cont" ui-view="cont1"></div>  
    <div class="cont" ui-view='cont2'></div>  
</body>

Here, the place to change is ui-view=""

var app = angular.module('myapp',['ui.router']);  
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {  
    $urlRouterProvider.otherwise('/indexcont');  
    $stateProvider  
    .state('indexcont',{  
        url:'/indexcont',  
        views:{  
            "cont1":{templateUrl:'html/indexcont.html'}  
        }  
    })  
    .state('p1',{  
        url:'/p1',  
        views:{  
            "cont1":{templateUrl:'html/p1.html'},  
            'cont2':{templateUrl:'html/p3.html'}  
        }  
    })  
    .state('p2',{  
        url:'/p2',  
        views:{  
            "cont1":{templateUrl:'html/p2.html'}  
        }  
    })  
    .state('p3',{  
        url:'/p3',  
        views:{  
            "cont1":{templateUrl:'html/p3.html'}  
        }  
    })  
}])

Writing is different in many ways, but it's more powerful.

Three: On-demand Load Controller: ocLazyLoad

Compared with two, there is only one more dependency module and more resolution behind views.

Introducing a framework with one more html code unchanged

html

<script src="style/js/angular.min.js"></script>  
<script src="style/js/angular-ui-router.min.js"></script>  
<script src="style/js/ocLazyLoad.min.js"></script>

<body ng-app="myapp">  
    <div class="nav">  
        <ul>  
            <li><a href="#/ indexcont "> Home page</a></li>  
            <li><a href="#/ P1 "> Article</a></li>  
            <li><a href="#/ p2"> Bullet Window</a></li>  
            <li><a href="#/ P3 "> input box</a></li>  
        </ul>  
    </div>  
    <div class="cont" ui-view="cont1"></div>  
    <div class="cont" ui-view='cont2'></div>  
</body>

var app = angular.module('myapp',['ui.router','oc.lazyLoad']);  
app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider) {  
    $urlRouterProvider.otherwise('/indexcont');  
    $stateProvider  
    .state('indexcont',{  
        url:'/indexcont',  
        views:{  
            "cont1":{templateUrl:'html/indexcont.html'}  
        }  
    })  
    .state('p1',{  
        url:'/p1',  
        views:{  
            "cont1":{templateUrl:'html/p1.html'},  
            'cont2':{templateUrl:'html/p3.html'}  
        },  
        resolve:{  
            loadMyCtrl:['$ocLazyLoad',function($ocLazyLoad){  
                return $ocLazyLoad.load('style/js/p3.js');  
            }]  
        }  
    })  
    .state('p2',{  
        url:'/p2',  
        views:{  
            "cont1":{templateUrl:'html/p2.html'}  
        },  
        resolve:{  
            loadMyCtrl:['$ocLazyLoad',function($ocLazyLoad){  
                return $ocLazyLoad.load('style/js/p2.js');  
            }]  
        }  
    })  
    .state('p3',{  
        url:'/p3',  
        views:{  
            "cont1":{templateUrl:'html/p3.html'}  
        },  
        resolve:{  
            loadMyCtrl:['$ocLazyLoad',function($ocLazyLoad){  
                return $ocLazyLoad.load('style/js/p3.js');  
            }]  
        }  
    })  
}])

Resolve is the controller address, only the controller address, not the native js (or js written by jquery, etc.) code script we wrote, because the code in resolve is loaded earlier than that in views, and it is not the controller script that does not work even if it is loaded. Our general js scripts can be introduced into the html code we want to load (which will be repeated).

Of course, resolve can also load css and so on. It can load multiple controller scripts and css at the same time, write them into arrays and put them in parentheses.

Posted by Kifebear on Sat, 30 Mar 2019 18:45:27 -0700

Programmer Group

angular routing, ui-router,ocLazyLoad usage

Hot Keywords