Angular框架

Angular框架

一. 安装node环境.

1. 使用npm install -g @Angular/cli 来全局的安装Angular库.
2. 使用ng new Demo-name来创建一个Angular工程.
3. 进入工程目录下,使用ng serve --open或者ng serve -o,
   来开启并自动打开浏览器.
4. 终端如果关闭或者使用ctrl+c来终止工程的运行.

二.目录介绍

1. 根目录下的package.json文件,相当于maven项目中pom.xml,
   里面保存着该工程所需的依赖.
2. 根目录下的node_modules文件夹,相当于java工程中的所有外部jar包.
   在工程目录下,使用npm install命令,可以根据package.json中的配置自动下载所有的依赖.
3. tslint.json,里面保存着编码规范,如果编码过程中不符合该规范,那么会出现各种警告.
4. src文件夹,保存着源代码.
5. src中的index.html,首页.
6. src/style.css,全局的样式.
7. src/assets文件夹,保存静态资源.
8. src/app文件夹,主要的代码区.

三.概念

1. component,组件.一般情况下,一个html,一个css,一个TypeScript,组成一个组件.
   这三个资源可以定义一个完整的局部页面,包括内容/样式/业务逻辑信息.
2. module,模块.一个模块中会包含多个组件,一个路由和多个服务.
   组件必须声明到模块中才能使用.如果在某个组件中,需要使用第三方的模块,
   那么这个第三方的模块需要导入(import)到该模块中.

四.编码

1. 同一个组件(component)

1. 在html中显示ts中的某个变量,使用{{变量名}}.
2. 将ts中的某个变量赋值给html中的某个元素的某个属性,使用[属性名]="变量".
3. 设置html中某个元素的某个事件,使用(事件)="ts中的函数(值)".
4. 双向绑定,在模块(module)中导入FormsModule,然后在html中,
   使用[(ngModule)]="变量"来进行双向绑定.
5. 在需要循环的元素属性位置,使用*ngFor = "let item of array"进行循环.
6. 在需要动态显示或隐藏的元素属性位置使用*ngIf="表达式"来控制该元素是否显示.

2. 父子组件间通信

1. 父组件把数据传递到子组件,
   在子组件中,在某个属性上使用@Input()注解,表示该属性是需要从该组件外部传递进来的.
   在使用该组件的时候,指定该组件的[变量名]="父组件中的变量"来进行传值.
2. 子组件把事件传递到父组件,
   在子组件中声明一个EventEmitter属性,
   在该属性上标识@Output()注解.
   在某个时机(点击/请求开始/结束/change事件等等),
   调用EventEmitter对象的emit方法来触发事件的传递.
   在父组件中,使用子组件的时候,使用(事件名)="父组件中的函数"来订阅该事件,
   这样,当子组件发送事件的时候,父组件就可以接收到了.