发表于: 2017-07-05 22:59:51
1 965
今天完成的事情:
实现懒加载:
引入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 视图中直接绑定原型类的属性和方法。
明天计划的事情:
完成任务
问题:
样式还有很多地方要改
收获:
如上
评论