ngStyle 修改HTML元素样式

<div>

1. <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">

1. red text

2. span>

div>

ngIf 条件渲染

<div *ngIf="false">div>

ngClass 设置元素类名

<div [ngClass]="{bordered: false}">This is never bordereddiv>

<div [ngClass]="{bordered: false}">This is never bordereddiv>

ngFor 列表渲染

1. <div class="ui list" *ngFor="let c of cities; let num = index">

2. <div class="item">{{ num+1 }} - {{ c }}div>

3. </div>

angular常用命令整理

1.创建项目 ng new

命令 描述
ng new [options] 创建一个新的 Angular 项目,默认在当前所在目录下
参数 描述
--dry-run -d 只输出要创建的文件和执行的操作，实际上并没有创建项目
--verbose -v 输出详细信息
--skip-npm 在项目第一次创建时不执行任何npm命令
--name 指定创建项目的名称
2.创建控件 ng g component 

命令 描述
ng generate [options] 在项目中构建新代码
ng g [options] 简写
支持的类型 用法
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module
Route ng g route my-route当前已禁用
构建的组件都会使用自用目录,除非 --flat 单独指定.

参数 描述
--flat 不在自用目录内创建代码
--route= 指定父路由.仅用于生成组件和路由.默认为指定的路径.
--skip-router-generation 跳过生成父路由配置。只能用于路由命令。
--default 指定路由应为默认路由。
--lazy 指定路由是延迟的。 默认为true。
3.查看版本 ng version

命令 描述
ng version 输出cli版本, node 版本和操作系统信息
参数 描述
--watch 继续运行测试. 默认为true
4.启动运行 ng serve
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
将会自动在浏览器中打开默认地址 http://localhost:4200/. 运行之后如果你修改了程序源代码.应用将会自动重载.

你也可以自定义配置 IP, 端口和实时重载端口号

ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
5.打包编译 ng build 

构建工件将存储在/dist目录中。

ng build可以指定构建目标（--target = production或--target = development）和要与该构建一起使用的环境文件（--environment = dev或--environment = prod）。 默认情况下，使用开发构建目标和环境。

# 这是生产构建
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
# 这是开发构建
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build

控制器定义有两个参数,第一个是控制器名称(字符串),第二个是一个函数或者数组,当为函数时,表示控制器的构造函数,,当为数组时,数组前面的元素为构造函数用到的字符串形式的服务,数组最后一个元素为构造函数,此时构造函数的参数列表和数.

1.ng-app 初始化Angular JS应用程序
2.ng-bind 绑定HTML元素到程序中
3.ng-init 初始化数据
4.ng-modal 绑定控制器中的值到应用数据中
5.ng-repeat 定义集合中每项数据的模板
6.ng-src 指定img元素的src属性
7.ng-class 指定HTML元素使用的css类
8.ng-disabled 规定一个元素是否被禁用，参数是布尔值
9.ng-readonly 规定一个元素的只读模式，参数是布尔值
10.ng-checked 规定元素是否被选中，多用于单选和多选中，相当于默认选中，参数是布尔值
11.ng-selected 下拉列表中的默认选中，参数是布尔值
12.ng-click 元素被点击时的行为，参数是执行后的表达式
13.ng-dblclick 元素被双击时的行为，参数是执行后的表达式
14.ng-mouseenter 鼠标移入元素发生的行为，参数是执行后的表达式
15.ng-mouseleave 鼠标移出元素发生的行为，参数是执行后的表达式