Angularjs中使用ui-route如何异步加载组件?

ui-route相比于angularjs的原生视图路由更好地支持了路由嵌套,状态转移等等。随着视图不断增加,打包的js体积也会越来越大,比如我在应用里面用到了 wangeditor里面单独依赖的jquery就300多k。异步加载各个组件就很有必要。在这里我就以ui-route为框架来进行异步加载说明,希望对大家学习angularjs有所帮助。

首先看一下路由加载文件

angular.module(’webtrn-sns’).config([’$stateProvider’, function ($stateProvider) {

$stateProvider.state({

name: ’home.message’,

url: ’/message’,

abstract: true,

templateProvider: [’resources’, function (resources) {

return resources.template

}],

controllerProvider: [’resources’, (resources)=> {

return resources.controller

}],

onEnter: [’resources’, (resources)=>resources.css.use()],

onExit: [’resources’, (resources)=>resources.css.unuse()],

resolve: {

resources: ()=> {

return new Promise(

resolve => {

require([], () => {

resolve({

css: require(’./css/message_box.css’),

template: require(’./html/message_box.html’),

controller: require(’./js/message_box.js’)

})

})

}

);

}

}

}

).state({

name: ’home.message.add_message’,

url: ’/add_message?isReply&toUid&title’,

params: {isReply: null, toUid: null, title: null},

templateProvider: [’resources’, function (resources) {

return resources.template

}],

controllerProvider: [’resources’, (resources)=> {

return resources.controller

}],

onEnter: [’resources’, (resources)=>resources.css.use()],

onExit: [’resources’, (resources)=>resources.css.unuse()],

resolve: {

resources: ()=> {

return new Promise(

resolve => {

require([’./js/message.js’], () => {

resolve({

css: require(’./css/add_message.css’),

template: require(’./html/add_message.html’),

controller: require(’./js/add_message.js’)

})

})

}

);

}

}

}

)

}])

这个是路由状态的一个声明文件, name , url , param字段的 方式不变,关键是看resolve这个部分。根据ui-route的 resolve 文档,resolve是为了给state或者controller进行自定义注入对象的。

下面是举出文档中关于resolve的例子:

$stateProvider.state(’myState’, {

resolve:{

// Example using function with simple return value.

// Since it’s not a promise, it resolves immediately.

simpleObj: function(){

return {value: ’simple!’};

},

// Example using function with returned promise.

// This is the typical use case of resolve.

// You need to inject any services that you are

// using, e.g. $http in this example

promiseObj: function($http){

// $http returns a promise for the url data

return $http({method: ’GET’, url: ’/someUrl’});

},

// Another promise example. If you need to do some

// processing of the result, use .then, and your

// promise is chained in for free. This is another

// typical use case of resolve.

promiseObj2: function($http){

return $http({method: ’GET’, url: ’/someUrl’})

.then (function (data) {

return doSomeStuffFirst(data);

});

},

// Example using a service by name as string.

// This would look for a ’translations’ service

// within the module and return it.

// Note: The service could return a promise and

// it would work just like the example above

translations: "translations",

// Example showing injection of service into

// resolve function. Service then returns a

// promise. Tip: Inject $stateParams to get

// access to url parameters.

translations2: function(translations, $stateParams){

// Assume that getLang is a service method

// that uses $http to fetch some translations.

// Also assume our url was "/:lang/home".

return translations.getLang($stateParams.lang);

},

// Example showing returning of custom made promise

greeting: function($q, $timeout){

var deferred = $q.defer();

$timeout(function() {

deferred.resolve(’Hello!’);

}, 1000);

return deferred.promise;

}

},

// The controller waits for every one of the above items to be

// completely resolved before instantiation. For example, the

// controller will not instantiate until promiseObj’s promise has

// been resolved. Then those objects are injected into the controller

// and available for use.

controller: function($scope, simpleObj, promiseObj, promiseObj2, translations, translations2, greeting){

$scope.simple = simpleObj.value;

// You can be sure that promiseObj is ready to use!

$scope.items = promiseObj.data.items;

$scope.items = promiseObj2.items;

$scope.title = translations.getLang("english").title;

$scope.title = translations2.title;

$scope.greeting = greeting;

}

})

我们可以看到resolve的对象是支持Promise的。

再回到我们之前的代码 templateProvider 和 controllerProvider 我们注入了resources的模板对象和controller对象, onEnter 和 onExit 注入了css模块。

如果controller中依赖了服务怎么办的?

resolve: {

resources: ()=> {

return new Promise(

resolve => {

require([’./js/message.js’], () => {

resolve({

css: require(’./css/add_message.css’),

template: require(’./html/add_message.html’),

controller: require(’./js/add_message.js’)

})

})

}

);

}

}

可以在require里面将服务注入,如代码中的 message.js 。而为了将服务进行异步加载我们不能用普通的 .factory 或者 .service 。而需要调用 $provide.factory或者 $provide.service

如果采用webpack进行编译打包的话就需要 webpack.optimize.CommonsChunkPlugin 的支持,这样可以对js进行拆分打包,达到异步加载js的目的。

来源:网络

时间: 2024-10-25 12:27:19

Angularjs中使用ui-route如何异步加载组件?的相关文章

Vue中router路由异步加载组件-优化性能

何时使用异步加载组件 当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加载小的js文件的开销大:所以当首页一次性加载的文件太大时,可以使用异步加载组件的写法. 原先写法: 异步加载写法: 不仅路由内可以使用异步加载,组件内也可使用异步加载,建议只有当app.js大于1M时再使用: 原文地址:https://www.cnblogs.com/nayek/p/11824987

React.lazy和React.Suspense异步加载组件

在React16.6中引入了React.lazy和React.Suspense,这两个组件,可以用来实现异步加载组件. 例如: const johanComponent = React.lazy(() => import(/* webpackChunkName: "johanComponent" */ './myAwesome.component')); export const johanAsyncComponent = props => ( <React.Susp

树形ztree 与angularjs结合,实现下级数据异步加载,点击复选框 填写到输入框里

html: <input value="" type="text" id="river_cut"   onclick="showMenu('river_cut_drop');" class=" btn btn-default  dropdown-toggle w200 input_ao" style="text-align:left;" /> <div class=&q

AngularJS中多个ng-app(手动加载模块)

1.当有多个ng-app时:(首先是要加载angularJS) <div ng-app=""> <p>姓名:<input type="text" ng-model="name" placeholder="请输入姓名" /></p> <p> {{name}} </p> </div> <div ng-app="">

浅谈Android中的异步加载之ListView中图片的缓存及优化三

     隔了很久没写博客,现在必须快速脉动回来.今天我还是接着上一个多线程中的异步加载系列中的最后一个使用异步加载实现ListView中的图片缓存及其优化.具体来说这次是一个综合Demo.但是个人觉得里面还算有点价值的就是里面的图片的缓存的实现.因为老实说它确实能在实际的项目中得到很好的应用.主要学习来源于慕课网中的异步加载学习,来自徐宜生大神的灵感.本次也就是对大神所讲知识的一个总结及一些个人的感受吧. 这次是一个综合的Demo,主要里面涉及到的知识主要有:网络编程.异步加载.JSON解析.

Android批量图片加载经典系列——采用二级缓存、异步加载网络图片

一.问题描述 Android应用中经常涉及从网络中加载大量图片,为提升加载速度和效率,减少网络流量都会采用二级缓存和异步加载机制,所谓二级缓存就是通过先从内存中获取.再从文件中获取,最后才会访问网络.内存缓存(一级)本质上是Map集合以key-value对的方式存储图片的url和Bitmap信息,由于内存缓存会造成堆内存泄露, 管理相对复杂一些,可采用第三方组件,对于有经验的可自己编写组件,而文件缓存比较简单通常自己封装一下即可.下面就通过案例看如何实现网络图片加载的优化. 二.案例介绍 案例新

浏览器渲染阻塞与优化-详解推迟加载、异步加载。

我认为一个前端工程师是否优秀,很大程度上取决于对前端性能上优化的功力.所以性能优化对前端真的很重要!!! 本文介绍了什么是阻塞.为什么会阻塞?阻塞优化常用的5种方式以及他们的注意事项. 浏览器渲染阻塞与优化      什么是阻塞?在页面中我们通常会引用外部文件,而浏览器在解析HTML页面是从上到下依次解析.渲染,如果<head>中引用了一个a.js文件,而这个文件很大或者有问题,需要2秒加载,那么浏览器会停止渲染页面(此时是白屏显示,就是页面啥都没有),2秒后加载完成才会继续渲染,这个就是阻塞

jQuery的AJax异步加载片段

主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何内容: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>AJax异步加载</title> <scri

淘宝购物车页面 智能搜索框Ajax异步加载数据

如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区非常的活跃,许多朋友都在不同地方分享了很多优秀的插件.我在相关的网站上找过想实现类似功能的插件,但是没有找到.于是乎,自己动手丰衣足食.自己来搭建智能搜索框下拉列表.当然,如果有类似功能并且常维护Bug的插件,望留言交流. 源码地址: 淘宝购物车页面--PC端和移动端项目实战 首先需要先给大家打一根