Arquivo da categoria: Programação

AngularJS – Lazy Loading non-Angular Libraries with ocLazyLoad

index.html




  
  

  
  
  
  







demo.js

angular.module("demo", ["ui.router", "oc.lazyLoad"])
    .config(function ($stateProvider) {
        $stateProvider.state('store', {
            templateUrl: "store/store.html",
            controller: "StoreCtrl as store",
            resolve: {
                store: function ($ocLazyLoad) {
                    return $ocLazyLoad.load(
                        {
                            name: "store",
                            files: ["store/store.js"]
                        }
                    )
                }
            }
        })
    })

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

store/store.js

angular.module("store", [{
    name: "cart",
    files: ["cart/cart.js", "//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.js"]
}])
    .controller("StoreCtrl", function (list) {
        var store = this;
        store.message = list.items;

        store.date = moment().format('MMMM Do YYYY, h:mm:ss a');

    })

store/store.html

I'm the store template

{{ store.message }}

{{ store.date }}

cart/cart.js

angular.module("cart", [])
    .service("list", function () {
        this.items = ["shoe", "apple", "phone"];
    })

AngularJS – Simple Lazy Loaded Angular Module Syntax with ocLazyLoad

index.html




  
  

  
  
  
  







demo.js

angular.module("demo", ["ui.router", "oc.lazyLoad"])
    .config(function ($stateProvider) {
        $stateProvider.state('store', {
            templateUrl: "store/store.html",
            controller: "StoreCtrl as store",
            resolve: {
                store: function ($ocLazyLoad) {
                    return $ocLazyLoad.load(
                        {
                            name: "store",
                            files: ["store/store.js"]
                        }
                    )
                }
            }
        })
    })

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

store/store.html

I'm the store template

{{ store.message }}

store/store.js

angular.module("store", [{
    name: "cart",
    files: ["cart/cart.js"]
}])
    .controller("StoreCtrl", function (list) {
        var store = this;
        store.message = list.items
    })

cart/cart.js

angular.module("cart", [])
    .service("list", function () {
        this.items = ["shoe", "apple", "phone"];
    })