发表于: 2017-07-05 22:59:51

1 966


今天完成的事情:


实现懒加载:
引入JS文件:

<script src="assets/libs/ocLazyLoad.require.js"></script>

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

var app = angular.module("app",["ui.router","oc.lazyLoad"]);
app.config(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider",
function ($provide, $compileProvider, $controllerProvider, $filterProvider) {
       app.controller = $controllerProvider.register;
       app.directive = $compileProvider.directive;
       app.filter = $filterProvider.register;
       app.factory = $provide.factory;
       app.service = $provide.service;
       app.constant = $provide.constant;
   }]);
// 按模块化加载其他的脚本文件
app.constant('Modules_Config', [
   {
       name: 'treeControl',
serie: true,
files: [
           "Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"
       ]
   }
]);
app.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);
function routeFn($ocLazyLoadProvider,Modules_Config){
   $ocLazyLoadProvider.config({
       debug:false,
events:false,
modules:Modules_Config
   });
};

路由:

"use strict"
app.config(["$stateProvider","$urlRouterProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider){
   $urlRouterProvider.otherwise("/main");
   $stateProvider
       .state("main",{
           url:"/main",
templateUrl:"views/main.html",
controller:"mainCtrl",
controllerAs:"main",
resolve:{
               deps:["$ocLazyLoad",function($ocLazyLoad){
                   return $ocLazyLoad.load("controllers/main.js");
               }]
           }
       })
       .state("adminUser",{
           url:"/adminUser",
templateUrl:"views/adminUser.html",
controller:"adminUserCtrl",
controllerAs:"adminUser",
resolve:{
               deps:["$ocLazyLoad",function($ocLazyLoad){
                   return $ocLazyLoad.load("controllers/adminUser.js");
               }]
           }
       })
};


关于angularJS的controllerAS


使用了 controllerAs 有什么区别呢? 在 AngularJS 的文档中是这样说的:

one binds methods and properties directly onto the controller using this: ng-controller=”SettingsController1 as settings”

one injects $scope into the controller: ng-controller=”SettingsController2”

上面的意思是说, 就是使用 controllerAs 将直接绑定 Controller 的属性和方法, 而不使用 controllerAs 将绑定到为 Controller 注入的 $scope 参数,


使用 controllerAs 时, 可以将 Controller 定义成 Javascript 的原型类, 在 HTML 视图中直接绑定原型类的属性和方法。


明天计划的事情:
完成任务


问题:

样式还有很多地方要改


收获:
如上


返回列表 返回列表
评论

    分享到