首页 > 代码库 > 黄聪:AngularJS 动态加载控制器实例-ocLoazLazy
黄聪:AngularJS 动态加载控制器实例-ocLoazLazy
一、AngularJS动态加载控制器和视图实例
路由配置关键代码:
[javascript] view plain copy print?
- //二级页面
- $stateProvider.state(‘main‘, {
- url: ‘/:name‘,
- /**如果需要动态加载数据和控制器***/
- views: {
- "": {
- templateUrl: function ($stateParams) {
- console.info($stateParams);
- return ‘/template/‘ + $stateParams.name + ‘.html‘;
- },
- resolve: {
- des: function ($ocLazyLoad, $stateParams) {
- if ($stateParams.name == ‘about‘)
- return;
- return $ocLazyLoad.load(‘/scripts/myjs/‘ + $stateParams.name + ‘.js‘);
- }
- }
- }
- }
- });
1.引用:
[html] view plain copy print?
- <script src=http://www.mamicode.com/"../Scripts/jquery-1.10.2.min.js"></script>
- <script src=http://www.mamicode.com/"../Scripts/Angular/angular.min.js"></script>
- <script src=http://www.mamicode.com/"../Scripts/Angular/ocLazyLoad.min.js"></script>
- <script src=http://www.mamicode.com/"../Scripts/Angular/angular-ui-router.min.js"></script>
- <link href=http://www.mamicode.com/"../Content/bootstrap.min.css" rel="stylesheet" />
2.HTML
[html] view plain copy print?
- <div class="container" ng-app="myApp">
- <ul class="nav nav-pills">
- <li role="presentation"><a href=http://www.mamicode.com/"#/home">首页</a></li>
- <li role="presentation"><a href=http://www.mamicode.com/"#/about">关于页面</a></li>
- </ul>
- <div class="panel panel-danger">
- <div class="panel-heading">
- <div class="panel-title">模板内容</div>
- </div>
- <div class="panel-body" ui-view></div>
- </div>
- </div>
3.Js
[javascript] view plain copy print?
- var app = angular.module(‘myApp‘, [‘oc.lazyLoad‘, ‘ui.router‘]);
- //配置路由
- app.config(function ($stateProvider, $urlRouterProvider) {
- $urlRouterProvider
- .when(‘‘, ‘/‘);
- //首页
- $stateProvider.state(‘index‘, {
- url: ‘/‘,
- templateProvider: function ($stateParams) {
- console.info(‘这是首页‘);
- return ‘<h1>这是首页</h1>‘;
- }
- });
- //二级页面
- $stateProvider.state(‘main‘, {
- url: ‘/:name‘,
- /***如果只是动态加载视图**/
- //templateUrl: function ($stateParams) {
- // console.info($stateParams);
- // return ‘/template/‘ + $stateParams.name + ‘.html‘;
- //},
- //controller: ‘homeController‘,
- /**如果需要动态加载数据和控制器***/
- views: {
- "": {
- templateUrl: function ($stateParams) {
- console.info($stateParams);
- return ‘/template/‘ + $stateParams.name + ‘.html‘;
- },
- resolve: {
- des: function ($ocLazyLoad, $stateParams) {
- if ($stateParams.name == ‘about‘)
- return;
- return $ocLazyLoad.load(‘/scripts/myjs/‘ + $stateParams.name + ‘.js‘);
- }
- }
- }
- }
- });
- });
http://blog.csdn.net/u011127019/article/details/53607852
黄聪:AngularJS 动态加载控制器实例-ocLoazLazy
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。