1. 安装 Angular-cli 工具
npm install -g @angular/cli
注意这里最好不用 cnpm 因为可能会有一些奇怪的错误
2. 创建一个Angualr工程
使用 angular-cli
ng new my-first-project
如果这个过程很慢, 可以尝试加上 --skip-install意思是跳过安装 依赖包的过程。在项目创建完成后，再使用 cnpm install 来安装依赖包。
3. 运行默认工程
执行命令
npm run start
然后打开 localhost:4200
在Resources栏下是一些学习开发的资源, 在Next Steps栏下是一些常用的Angular-cli命令, 目前我也只用过 ng generate component <compont-name>
4. 创建一个组件
ng generate component <compont-name> 的作用是创建一个Angular组件, 创建的组件位于src/app/ 目录下, 更多的可以参考官方的中文文档 angular.cn/cli/generat…
ng generate component first
并且在src/app/app.module.ts中自动将FirstComponent注册到全局
将src/app/app.component.html的代码改为
<div class="content" role="main"> <h1>这里是根节点</h1> <app-first></app-first></div>
就可以看到新注册的FirstComponent组件了, 默认的内容是 'first works!'
<app-first> 会自动替换成我们新建的FirstComponent组件
因为在 src/app/first/first.component.ts 文件中的
selector字段指向模板中使用该组件的标签名称
templaUrl字段指向该组件的模板
styleUrls字段指向改组件应用的样式表
下一节, 简单说下ng new 创建工程的目录结构
