[Angular] oc.lazyLoad with Angular ui router
2023-09-14 09:00:55 时间
Read More: https://egghead.io/lessons/angularjs-lazy-loading-modules-with-ui-router-and-oclazyload
Ui Router: https://github.com/angular-ui/ui-router
Ui Router: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state
The idea is when we click the button we change the ui router
at the same time, we load the js file and its template by using oc.lazyLoad.
index.html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body ng-app="app" ng-controller="AppCtrl as vm"> <button ng-click="vm.click()">Click Me</button> <ui-view></ui-view> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script> <script src="bower_components/oclazyload/dist/ocLazyLoad.min.js"></script> <script src="app.js"></script> </body> </html>
app.js
/** * Created by Answer1215 on 10/20/2014. */ angular.module('app',["ui.router", "oc.lazyLoad"]) .config(function($stateProvider){ $stateProvider.state('store', { templateUrl: 'store/store.tmpl.html', controller: 'StoreCtrl as store', resolve: { store: function($ocLazyLoad){ return $ocLazyLoad.load( { name: "store", //module name is "store" files: ["store/store.js"] } ) } } } ) }) .controller("AppCtrl", function($state){ var app = this; app.click = function(){ $state.go('store'); } })
store.js
/** * Created by Answer1215 on 10/20/2014. */ angular.module("store", []) .controller("StoreCtrl", function(){ var cart = this; cart.message = "I'm a message from the controller"; })
store.tmpl.html
<div> <h1>Here we have manyy thing to load!</h1> {{store.message}} </div>
相关文章
- 从 Angular Component 和 Directive 的实例化,谈谈 Angular forRoot 方法的命令由来
- 模块化开发 Angular 应用 [含懒加载]
- SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
- 如何在Angular项目中使用MQTT
- angular入门教程_初学者织围巾简单教程慢动作
- 前端人员该怎么面试 经典Angular面试题有哪些[通俗易懂]
- vue相比jquery_angular和vue哪个厉害
- angular 路由懒加载_angular路由
- 使用 Angular 14 的 inject 函数优化对 Ngrx 的使用方式
- Angular 14 inject 函数使用过程中的一些注意事项
- UI自动化平台_ui自动化是什么意思
- orbital angular momentum_omnidirectional
- Angular 应用里 index.html 的作用
- Angular RouterModule.forRoot(ROUTES) 和 forChild(ROUTES)的区别
- 【Angular教程】自定义管道
- 使用 Angular HTTP_INTERCEPTOR 拦截器来记录超时请求的一些思考
- Angular 项目中 angular.json builder 字段的可选项介绍
- Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
- MySQL Error number: 3739; Symbol: ER_SRS_INVALID_ANGULAR_UNIT; SQLSTATE: SR002 报错 故障修复 远程处理
- Angular 4.0发布,致力于减小代码体积详解编程语言