今天完成的事情：

‍‍‍‍什么是模板　　它是页面呈现的骨架，是盛装组件数据的容器。与之相关的内容包括了-----模板与组件件 '数据交互'、'内置指令'、'表单'、'管道'等。‍‍

数据绑定

根据数据流向可以分为三种：

单向：数据源到视图

复制代码

//插值DOM元素属性

<p>{{ detail.telNum }}</P>

//绑定HTML标签特性

<div [title]="name"></div>

//绑定

<div [style.color]="color">hello world</div>

复制代码

单向：从视图目标到数据源

//事件绑定

(click)="editContact()"

on-click="editContact()"

双向

//双向绑定

<div [(title)]="name"></div>

<div bindon-title="name"></div>

NOTE 

Property为DOM对象属性，以DOM元素作为多想，其附加内容，是在文档对象模型里定义的，如childNodes、firstChild。 而Attribute为HTML标签特性，是DOM节点自带的属性，在HTML中定义的，即只要是在HTML标签中出现的属性（HTML代码）都是Attribute。

数据绑定是借助于DOM对象属性和事件来运作的。

2.1 插值

双大括号{{ }}语法来实现。

2.2 模板表达式

类似于JS的表达式，绝大多数JS表达式均为合法模板表达式。它应用于插值语法双大括号中和属性绑定“=”右侧的括号中。但以下JS表达式不是合法模板表达式：

带有new运算符的表达式

赋值表达式

带有 ; 或者 , 的链式表达式

带有自增自减

模板表达式不支持位运算。

2.3 属性绑定

DOM元素属性绑定：把DOM对象属性绑定到组件的属性上，而绑定目标可以是中括号，也可以加前缀，还可以使用属性绑定设置自定义组件的输入属性。

复制代码

//中括号

<div [title]="titleText"></div>

//加前缀

<div bind-title="titleText"></div>

//自定义组件的输入属性

<user-detail [user]="currentUser"></user-detail> 

NOTE： 

中括号的作用是计算右侧模板表达式，如果没有中括号，右侧表达式会被当成字符串常量，如果是字符串常量则建议省略中括号，例如：

<user-detail detail="我是字符串常量" [user]="currentUser"></user-detail>

HTML标签特性绑定：纯粹的HTML标签特性比如<table>的colspan采用和DOM一样的绑定方式会报错，例如：

HTML标签特性绑定类似于属性绑定，但是中括号的部分不是一个元素的属性名，而是由attr.前缀和HTML元素特性名称组成的形式。

CSS类绑定：CSS类既属于DOM对象属性，也属于HTML标签特性，所以可以使用以上两种方式绑定：

<div class='red font14' [class]="changeGreen">14号 绿色字</div>

特有的绑定方式：[class.class-name]语法，被赋值为true时，将class-name这个类添加到该绑定的标签上，否则移除这个类。

<div [class.class-blue]="isBlue()">若isBlue()返回true，这里的字体将变成蓝色</div>

<div class="footer" [class.footer]="showFooter">若showFooter为false，则footer这个css被移除</div>

Style样式绑定：HTML标签内联样式可以通过Style样式绑定的方式设置。语法为[style.style-property]，可以带单位如px和%：

<button [style.background-color]="canClick ? 'blue' : 'red'">若canClick为true，则按钮背景颜色为蓝色</button>

<button [style.font-size.px]="isLarge ? 18 : 13">若isLarge为true，则按钮字体变为18px</button>

2.4 事件绑定

单向，数据从模板到组件类流动。Angular监听用户操作时间，如键盘事件、鼠标事件、触屏事件等方法。事件绑定的语法为：“=”左侧小括号内的目标事件和“=”右侧引号中的模板语句组成。

模板语句与模板表达式一样，和JS表达式类似，有一些JS表达式在模板语句中不被支持：

赋值操作，如+=或-=

自增和自减操作符（++和–）

new 操作符

位运算符 | 和 &

模板表达式运算符

模板语句和模板运算符一样，只能访问其上下文环境的成员，模板语句的上下文环境就是绑定事件对应组件的实例。也可以包含组件外的对象，如模板局部变量和事件绑定语句中的$event

目标事件：小括号中的事件名表示目标事件，还可以带on-前缀的形式来标记目标事件，还可以是自定义指令的事件：

$event事件对象：$event事件对象用来获取事件的相关信息，如果目标事件是原生DOM元素事件（可以是自定义事件），则$event将是一个包含了target和target.value属性的DOM时间对象，例如：

<input [value]="currentUser.firstName" (input)="currentUser.firstName=$event.target.value"/>

1

自定义事件：借助EventEmitter实现。它的实现步骤：一、在组件中创建EventEmitter实例对象，并将其以输出属性形式暴露；二、父组件通过绑定一个属性来自定义一个事件；三、在组件中调用EventEmitter.emit()触发自定义事件；四、父组件绑定的事件通过$event对象访问数据。

命名规范：

（一）文件名

总体原则：英文全部小写，用‘-’进行单词分割，这样比较利于人眼阅读，比如：disk-creation.html，add-disk-dialog.html。其实最好全用名词性短语起名，但是英语水平有限，用动宾短语形式也可以接受。

还有就是一个文件代表一个angularjs模块，尽量不要在一个文件里写多个模块，比如在一个文件里写多个controller，这样非常不好查找，不利于后来新人快速学习。

controller模块以“.controller”结尾，例如server.controller.js，add-disk.controller.js

service模块以“.service”结尾，例如：server.service.js

module模块以“.module”结尾，例如app.module.js，app-hardware.module.js

路由文件以“.routes”结尾，例如hardware.routes.js，这里看项目对路由是如何处理的，根据自己项目需要

directive模块以“.directive”结尾，例如menu-list.directive.js，如果一个文件里写了多个小directive，用复数（directives）形式结尾

filter模块以“.filter”结尾，同理多个filter写在一个文件的用filters结尾

压缩过的模板文件用“.templates”结尾，例如app.templates.js

上面应该覆盖了主要的angularjs各种模块，还有其它的可以根据这个原则处理。这里说一下为什么会把多个directive放在一个文件里，因为有的directive比较小，可能就5-6行代码，如果一个directive写一个文件，会造成文件数的快速增长，虽然发布的时候可以都压缩在一起，但维护起来仍然比较繁琐。所以可以折中一下，根据自己的项目安排即可。

（二）angularjs模块名

总体原则：驼峰方式命名

Controller名称以Ctrl结尾，开头单词大写，因为angularjs中的Controller是个类概念，在使用的时候会被实体化，所以遵循类的命名范式。例如ServerCtrl，ServerCreationCtrl

Service名称以Srv结尾，开头单词小写，因为angularjs中的Service是个单例概念，不需要被实例化。例如serverSrv

Directive没有做强制要求，能描述功能就可以，但其实开头应该加上项目名称简写的前缀，这样在使用的时候非常容易区别到底是自己写的还是导入第三方库的directive，例如项目叫console，应该以cs开头命名，就像angularjs内置的directive都以ng打头一样

Filter没有强制要求，可以参考上面的两个style里有啥说法

Module的名称，本项目中都以小写命名了，并且用点分割父子关系，比如hardware子模块叫app.hardware

Utils，这里所谓的Utils还是Service，就是叫习惯了，所以有些通用的功能需要封装的，就叫Utils了。比如httpUtils，domUtils。当然了文件名还是以“.service.js”结尾，如果觉得会有困扰，根据自己的需求，可以改成Srv结尾

上面大概介绍了一下本人感觉还可以的命名方式，好不好可以根据自己的项目进行调整，只要项目成员觉得易懂，容易查找就可以。至于具体的js代码怎么写，上面的两个参考style中也都有介绍，比如是用：

module.controller('DiskCreationCtrl', ['$scope','$uibModalInstance',function($scope,$uibModalInsta

1.什么是@input

       @input的作用是定义模块输入，是用来让父级组件向子组件传递内容。

2.@input用法

       首先在子组件中将需要传递给父组件的变量用@input()修饰

       需要在子组件ts文件import中还添加Input

实例:

        import {Component, Input, OnInit} from '@angular/core';

例如:     

      子组件的ts:

@Input() person;  //@Input 此命令用来修饰person是用来接收父组件传递的值

       这个时候还实现不了父组件向子组件传值，还记得前面曾经讲过ngModel 单向传值，所以我们还需要在父组件中使用ngModel单向传值，用子组件的person接收父组件传递的值。

              父组件ts:             

AppPerson = { 

       name: “Henry”,

       color: “yellow” 

};

父组件html:

<app-exam [person]=”AppPerson”></app-exam> 

子组件html:

<p> {{person.name}} </p>

<p> {{person.color}} </p>            

       运行结果:             

由此结果可以看出，子组件属性person已经成功接收到了父组件AppPerson的值。

简单的Input完成！

angular应用的模块系统被称为angular模块或NgModule

定义：

///angular是带有@NgModule装饰器提供元数据的类。 其模块系统被称为angular模块或NgModules.每一个angular应用至少有一个模块，不可或缺的根模块(如：AppModule)。

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

import { BrowserModule } from '@angular/platform-browser';

@NgModule({

  imports:      [ BrowserModule ],

  providers:    [ Logger ],

  declarations: [ AppComponent ],

  exports:      [ AppComponent ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

作用：

1.angular模块把组件、指令、管道打包成内聚功能块；

2.angular模块用于添加服务（外部或自定义，如http请求类、路由类等）；

3.angular模块在应用启动时，可以主动或懒加载；

@NgModule:

@NgModule({

  imports:      [ BrowserModule ],

  providers:    [ Logger ],

  declarations: [ AppComponent ],

  exports:      [ AppComponent ],

  bootstrap:    [ AppComponent ]

});

//imports--angular模块把特性合并成离散单元的一种方式，当应用需要模块的特性时，将其添加到imports数组中，它告诉Angular应用需要它们来正常工作。

//providers--创建的服务加入到当前模块中，如果是根模块，则可以用于应用任何部分。

//declarations--声明当前module控制的组件，创建的指令和管道也要添加至declarations数组中。

//exports--declarations 的子集，可用于其它模块的组件模板。

//bootstrap--指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。

明天计划的事情：（一定要写非常细致的内容） 
遇到的问题：（遇到什么困难，怎么解决的） 
收获：（通过今天的学习，学到了什么知识）