AngularJs 实现动态(懒)加载

前端之家收集整理的这篇文章主要介绍了AngularJs 实现动态(懒)加载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本。

实现的过程主要是引用3个主要的JS文件

 
 
  1. <script src="angular/1.4.8/angular/angular.min.js"></script>
  2. "angular/ui-router/release/angular-ui-router.min.js"></script>
  3. "angular/oclazyload/src/ocLazyLoad.min.js"></script>

然后通过 APP 配置,将依赖的脚本进行注入操作

var app = angular.module('pkcms', ["ui.router" "oc.lazyLoad"]);
  
  
  • app.config(["$provide""$compileProvider""$controllerProvider""$filterProvider" function($provide $compileProvider $controllerProvider $filterProvider){
  • appcontroller register;
  • directive directive;
  • filter ;
  • factory $providefactory;
  • service service;
  • constant constant;
  • }]);
  • // 按模块化加载其他的脚本文件
  • 'Modules_Config'[
  • name:'treeControl' serietrue files[
  • "Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
  • ]
  • }
  • ]);
  • "$ocLazyLoadProvider""Modules_Config"routeFn routeFn$ocLazyLoadProviderModules_Config){
  • $ocLazyLoadProvider({
  • debug:false events modules:Modules_Config
  • });
  • };
  • 以上是初始化动态加载的配置过程。

    接着是建立路由

    "use strict"
      
      
  • "$stateProvider""$urlRouterProvider"]);
  • $stateProvider$urlRouterProvider){
  • $urlRouterProviderotherwise"/main");
  • $stateProvider
  • state"main" url: templateUrl"views/main.html" controller"mainCtrl" controllerAs resolve:{
  • deps:["$ocLazyLoad"function$ocLazyLoadreturn $ocLazyLoadload"controllers/main.js");
  • }]
  • }
  • })
  • "adminUser""/adminUser""views/adminUser.html""adminUserCtrl":{
  • "controllers/adminUser.js"}]
  • }
  • })
  • 最后是按路由配置的在对应目录下建2个HTML页面文件和2个JS文件用做测试
    main.html

    <div>
  • {{main.value}}
  • </div>
  • adminUser.html

     {{adminUser.value}}
      
      
  • main.js

    /**
  • * mainCtrl
  • * Created by pkcms.cn on 2016/6/24.
  • */
  • (@H_849_403@(){
  • "use strict"
  • controller mainCtrlFn);
  • {
  • thisvalue "Hello World"}
  • }())
  • adminUser.js

     * adminUserCtrlFn
      
      
  • 'adminUserCtrl'adminUserCtrlFn);
  • adminUserCtrlFn{
  • "welcome to admin user"}());
  • 原文链接:https://www.f2er.com/angularjs/147843.html

    猜你在找的Angularjs相关文章