Angular框架

一. 安装node环境.

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

二.目录介绍

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

三.概念

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

四.编码

1. 同一个组件(component)

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

2. 父子组件间通信

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