首先进入使用 Angular CLI 创建的应用程序目录,例如:
$ cd my-app
然后运行:
$ ng serve
当运行上面的命令后,将发生以下事情:
Angular CLI 从 .angular-cli.json 文件中加载配置信息
Angular CLI 运行 Webpack 打包相关 JavaScript 和 CSS 文件
Angular CLI 启动 webpack dev server 本地开发服务器,默认的地址是 localhost:4200
若要停止应用程序,你可以使用 ctrl+c 快捷键。
添加新的类
为了添加类名为 UserProfile 类,我们可以运行:
$ ng generate class user-profile
Angular CLI 会自动调整文件名和类名的字母大小写,因此以下命令具有相同的效果:
$ ng generate class user-profile
$ ng generate class userProfile
$ ng generate class UserProfile
运行上述命令后,在幕后将发生以下事情:
在 src/app 目录下将创建一个 user-profile.ts 文件,该文件导出一个名为 UserProfile 的类
添加新的组件
若想创建一个选择器为 app-site-header 的组件,则可以运行:
$ ng generate component site-header
installing component
create src/app/site-header/site-header.component.css
create src/app/site-header/site-header.component.html
create src/app/site-header/site-header.component.spec.ts
create src/app/site-header/site-header.component.ts
update src/app/app.module.ts
Angular CLI 将自动调整文件名和组件名称的字母大小写,并将前缀应用于组件选择器,因此以下命令具有相同的效果:
$ ng generate component site-header
$ ng generate component siteHeader
$ ng generate component SiteHeader
运行上述命令后,在幕后将发生以下事情:
src/app/site-header 目录被创建
site-header 目录下会生成以下四个文件:
CSS 样式文件,用于设置组件的样式
HTML 模板文件,用于设置组件的模板
TypeScript 文件,里面包含一个 SiteHeaderComponent 组件类和组件的元信息
Spec 文件,包含组件相关的测试用例
SiteHeaderComponent 组件会被自动地添加到最近模块 @NgModule 装饰器的 declarations 属性中。