+
requirejs就可以实现js文件的按需加载。
实现代码如下：
define(['app','navData'],
function
(app)
{
app.config(function($stateProvider,
$urlRouterProvider,
$controllerProvider,
navData){
app.registerController
=
$controllerProvider.register
app.loadJs
=
function(js){
return
function($rootScope,
$q){
var
def
=
$q.defer(),
deps=[]
angular.isArray(js)
?
(deps
=
js)
:
deps.push(js)
require(deps,function(){
$rootScope.$apply(function(){
def.resolve()
})
})
return
def.promise
}
}
$urlRouterProvider.otherwise('/memory')
angular.forEach(navData,
function(it){
var
st
=
it.state.split(/\./gi),
ctrlPath
=
'controllers/'
+
st[0],
ctrlName
=
'ctrl.'
+
st[0]
$stateProvider.state(st[0],{
url
:
'/'
+
st[0],
templateUrl
:
'tpls/'
+
st[0]
+
'.html',
controller
:
ctrlName,
resolve:{
deps:app.loadJs(ctrlPath)
}
})
})
})
})
angular2用webpack打包每次都只打包成单个mian文件，很大，例如页面中的关于我们，联系我们这样的页面，用户可能几乎不会打开，但是我们还是每次都要让用户加载，体验很不好，这样就需要按需加载，当不长访问的页面，我们就单独打包成一个页面，当客户访问时，再去加载JS文件。
那么angular2如何进行按需加载呢？
我们使用webpack-toolkit，可以直接在git上看教程https://github.com/AngularClass/webpack-toolkit
angular2自己也支持异步加载，可以查看AsyncRoute的使用，github上查找会有很多使用例子
我写了个小demo，可以在dev分支中查看相关内容，https://github.com/lyt308012546/ng2-webpack-demo/tree/dev
// Install
npm install @angularclass/webpack-toolkit --save-dev
// app/about/about.ts
@Component({
selector: 'about',
template: '<h1>About</h1>'
})
export class About {}
// app/app.routes.ts
export const routes = [
{ path: '', component: Home },
{ path: 'about', component: 'About' }
]
// main.browser.ts
import {routes} from './app/app.routes'
import { provideWebpack } from '@angularclass/webpack-toolkit'
bootstrap(App, [
provideRouter(routes),
provideWebpack({
'About': require('es6-promise!./app/about')
})
])
// 以下是采用AsyncRoute进行异步加载
import { Component } from '@angular/core'
import { RouteConfig, RouterOutlet ,AsyncRoute } from '@angular/router-deprecated'
import { Router } from '@angular/router-deprecated'
import { SubRouteComponent } from './subroute'
@Component({
template: `
<h2>RouteConfig Demo</h2>
<button (click)="gotoDetail()">跳转</button>
<router-outlet></router-outlet>
`,
directives: [RouterOutlet],
})
@RouteConfig([
{path: '/',name: 'SubRouteComponent', component: SubRouteComponent, useAsDefault: true},
// 异步按需加载
new AsyncRoute({ path: '/detail', loader: () =>require('es6-promise!./routedetail')('RouteDetailComponent'), name: 'RouteDetailComponent' }),
])
export class RouteDemo {
constructor(
private router: Router) {}
gotoDetail(){
this.router.navigate(['RouteDetailComponent'])
}
}
