[Angular] oc.lazyLoad with Angular ui router

Read More: https://egghead.io/lessons/angularjs-lazy-loading-modules-with-ui-router-and-oclazyload

Ui Router: https://github.com/angular-ui/ui-router

Ui Router: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

 

The idea is when we click the button we change the ui router

at the same time, we load the js file and its template by using oc.lazyLoad.

 

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    
</head>
<body ng-app="app" ng-controller="AppCtrl as vm">
<button ng-click="vm.click()">Click Me</button>
<ui-view></ui-view>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="app.js"></script>
</body>
</html>

 

app.js

/**
 * Created by Answer1215 on 10/20/2014.
 */
angular.module('app',["ui.router", "oc.lazyLoad"])
    .config(function($stateProvider){
        $stateProvider.state('store', {
                templateUrl: 'store/store.tmpl.html',
                controller: 'StoreCtrl as store',
                resolve: {
                    store: function($ocLazyLoad){
                        return $ocLazyLoad.load(
                            {
                                name: "store",  //module name is "store"
                                files: ["store/store.js"]
                            }
                        )
                    }
                }
            }
        )
    })

    .controller("AppCtrl", function($state){
        var app = this;
        app.click = function(){
            $state.go('store');
        }
    })

 

store.js

/**
 * Created by Answer1215 on 10/20/2014.
 */
angular.module("store", [])
    .controller("StoreCtrl", function(){
        var cart = this;
        cart.message = "I'm a message from the controller";
    })

 

store.tmpl.html

<div>
    <h1>Here we have manyy thing to load!</h1>
    {{store.message}}
</div>

 

posted @ 2014-10-21 05:26  Zhentiw  阅读(3318)  评论(0)  编辑  收藏  举报