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

ng 创建一个新项目

猜你喜欢