Angular安装与基础语法

安装Angular cli

npm i -g angular-cli

创建项目

npm new project_name(项目名称)

启动项目

cd project_name(j进入新创建的项目)

ng serve --open

创建组件 

ng g c xxx

会在根组件的统计生成一个组件xxx文件夹，比如ng g c hello 就会生成一个hello组件文件夹，里面是这个hello组件的四个文件，同时angularcli脚手架会自动把这个组件引入到app.module.ts中。

引用组件：

hello组件的ts文件中，可以通过selector属性得到组件名，引用时直接通过<组件名></组件名>的方式即可。

angular语法

模版：

在angular中，模版就是一块HTML。

1、插值语法

就是将表达式嵌入到标记文本中，默认情况下，插值会用双花括号{{}}作为分隔符。

在组件A 的js文件中声明的变量，可以直接用在相对应组件A的html中通过{{}}花括号引用：

支持：简单的JS运算、三元表达式；不支持循环、if判断

2、属性绑定

2-1、attribute绑定

语法：使用[属性名] ，如果要绑定字符串作为属性，就要使用" '属性名' "；

如果不使用" ' ' "，则会默认为属性绑定的是变量

2-2、类绑定

单类名、多类名

2-3、样式绑定

单一样式绑定、多样式绑定

3、条件判断

使用*ngIf 直接影响元素是否被渲染，而非控制元素的显示和隐藏。

elseTemplate这个名称是唯一的，模版中不能出现多个elseTemplate，如果出现则只会渲染第一个同名的模版，此时可以将elseTemplate的名称修改即可

angular语法快捷键插件

4、循环语句

两种方式：*ngFor 、 [ngSwitch]

声明两个变量

使用*ngFor循环语句：

使用[ngSwitch]循环语句，结合*ngSwitchCase使用：

 

5、事件绑定

在标签上，使用（click）添加绑定事件 。

html中添加绑定事件 

ts中声明方法：

6、模版引用变量

 

7、数据双向绑定ngModel

双向绑定是应用中的组件共享数据的一种方式，使用双向绑定来侦听事件并在父组件和子组件之间同步更新值，ngModel指令只对表单元素有效，且在使用之前需要导入FormsMoudle模块 。

写法：在表单元素上使用[(NGModel)]="要进行双向绑定的变量"。

1、引入FormsMoudle模块

2、在模版中使用双向绑定变量

声明变量title

在模版中给表单元素使用[(ngModel)]，双向绑定变量

双向绑定页面显示：在input表单中输入文字，下面引用了变量的位置同时发生更新；

 

 8、单个动态表单控件

 1、要使用响应式表单控件，就要从@angular/forms 包中导入ReactiveFormsModule，并把它添加到NgMoudle的imports数组中

2、要注册一个表单控件，就要导入FormControl类并创建一个FormControl的新实例，将其保存为类的属性。 

要在哪个组件中使用表单控件，就要在哪个组件的js/ts文件中引用，并创建实例。

比如hello组件要使用动态表单控件，就要现在hello组件的js/ts中引入；

引入后，在组件hello的js/ts文件中创建实例 。

模板表单元素动态绑定变量，注意使用动态表单控件时，要通过name.value调用

 如何修改动态表单绑定的变量呢？通过FormControl提供的setValue（）方法；

 9、表单控件分组

上面提到的FormControl 是怎么引入的，FormGroup同理。

 10、表单验证

 表单元素添加required关键字标识必填，通过绑定ngModel的引用可以拿到当前组件的信息，通过引用获取到验证的信息。

首先要给表单元素通过#绑定模版引用变量，这个引用变量需要等于ngModel，才能拿到当前表单绑定的响应状态

 当表单元素设置了required时表示必填但是没有输入时，通过#模版引用变量，可以获取到当前表单元素的验证信息；

 11、自定义表单验证

在组件内引入validators、formBuilder模块

 

 

 12、angualr管道

按照上方的管道使用时，单词字母均要改成小写，并且去掉Pipe ；管道可以连续调用，连续调用时是从左往右逐层执行，见下 

自定义管道，使用脚手架命令：

ng g p 自定义管道名 ，执行命令得到以下：

 

13、组件的声明周期以及属性传递

注意：ngOnchanges生命周期在ngOnInit钩子函数之前。

 14、组件交互

子传父： 

子组件给父组件传递数据，使用@Output

 父传子：

方法①： 

@ViewChild，父组件中通过给子组件添加#myChild 字样，可以获取子组件实例，获取子组件数据。

方法②：

父组件给子组件传递属性，父组件直接在子组件标签通过[ 属性名 ]的方式传递属性，子组件通过@Input接收父组件传递过来的属性；

 

 15、Angular服务