Angular最佳实践备忘之基本工作流

Angular第一回合分为以下几个部分,从一个组件的创建到整个应用在服务器端的部署,共5个小节:

  • 创建自定义组件
  • 接收表单输入
  • 向视图渲染对象列表
  • 与点击事件交互
  • 部署应用

每一个小节主要以示例代码加描述的形式记录重要的知识点。

环境配置

npm install -g typescript
npm install -g @angular/cli

需要安装node,并自动安装好node的包管理器npm,还需要使用npm安装typescript语法解析模块和angular命令行模块。安装完毕后可以使用版本号检查来检验是否可用:

node -v
npm -v
ng -v

随后使用ng命令行创建一个项目:

ng new angular-hello-world

angular会创建一些文件夹和文件框架,之后自动从npm下载所需的模块,耐心的等待几十秒。

angular为我们搭建了一个基本的应用框架,此时可以使用一个命令来为localhost分配一个端口号,监听应用实时的更新:

ng serve
或
ng serve --port 4200

默认的端口号为127.0.0.1:4200,即:

localhost:4200

在创建项目时确定样式文件扩展格式,使用以下命令:

ng new hello-world --style=scss

创建自定义组件

ng generate component hello-world

接收表单输入

在模版文件中,为表单元素添加标志符声明该变量,以便于在程序中使用。

比如下面的代码片段中,为input标签添加唯一标志 #userInput

<input #userInputTitle/>

在模版文件中使用中括号定义输入数据的变量名,比如此处将上面的input元素传递给自定义的title属性,并用中括号将将title括起来。

<article-item [title]="userInputTitle"></article-item>

在控制器中,需要引入一个新的装饰器类型:

import { Input } from '@angular/core';

并在组件中定义接收输入的 title 表单元素:

@Input() title: HTMLInputElement;

在示例化 article-item 组件的时候,会自动从组的属性中寻找 title 属性,并将属性值传入实例对象中。

向视图渲染对象列表

<li *ngFor="let article of articles"></li>

与点击事件交互

<a (click)="clickButton()"></a>

部署应用

将开发环境用到的各种文件打包,应用于生产环境:

ng build --target=production --base-href /

下一篇《git常用命令合集》

上一篇《我读《小王子》》

永久链接 http://www.shuaihua.cc/article/angular-best-practice-workflow

快速跳转 心头好文 - frameworks - 《Angular最佳实践备忘之基本工作流》

发布日期 2017年12月17日 星期日

版权声明 自由转载-非商用-非衍生-保持署名(创意共享3.0许可证