安装angular-cli

如果你使用的的是 beta.28或更以前的版本升级前需要先卸载angular-cli,因为 angular-cli 已经变成了 @angular/cli

升级Angular CLI,你需要同时升级全局的和项目本地目录中的,避免出现一些难以排查的问题

安装完成后运行命令 ng version 我现在使用的版本是1.0.0 ,安装时候请注意node的版本

 

新建项目

使用命令

注意:npm 包下载安装会需要一段时间,请耐心等待出现successfully created

 

路由

我们参照官方的教程(https://www.angular.cn/docs/ts/latest/tutorial/toh-pt5.html)来配置一下路由实现home页和about页面的切换

我们创建两个组件,home和about

在这里我还创建了一个about的module,随后的懒加载会用到

 

app.module.ts

 

app.component.html

 

修改以上代码就可以实现一个简单的路由功能

 

懒加载 Lazy Loading

现在开始我们修改代码来实现懒加载

首先我们来修改稍早建立的about.module.ts

 

然后修改app.module.ts的路由部分

完成!就是这么简单,通过loadChildren来实现懒加载

 

现在运行 ng serve看看效果

可以看到在加载about的时候多了一个0.chunk.js的文件

Categories: Angular2web前端

发表评论

Related Posts

Angular2

angular2 官方教程中 关于templateUrl和styleUrls 引用文件路径的问题

在跟随angular官方教程练习的过程中发现一个问题,关于@Compo Read more…

AngularJS

yeoman,generator-angular

前言 最近一个月新项目启动,为了更快速的搭建架构使用了yeoman(1 Read more…

Angular2

Angular2:5分钟快速入门 (for javascript)

让我们从零开始使用JavaScript建立一个超简单的Angular2 Read more…