ng 创建一个新项目

首先进入使用 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 属性中。

参考
https://segmentfault.com/a/1190000009771946

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值