关于Angular2的学习笔记

Angular的学习笔记

ps：两个星期断断续续的摸索，终于入门了Angular2.。。只能说是入门。。。学习曲线果然是够曲折(ง •̀_•́)ง。。。。。

（1）起步：如何搭建一个Angular2项目的运行环境

（默认已经安装了node，如果没安装的话，百度官网下载.exe，直接下一步下一步就可以，node要求不是很高）

1）起项目的地方，建一个文件夹

2）进入这个文件夹，右击git bash here

3）npm install -g @angular/cli //安装angular脚手架，脚手架就是angular2帮你搭建好的一个angular的环境，我们直接下载 下来就行

4）ng new my-app //ng是angular脚手架的命令，如果安装成功，就可以直接使用这样ng开头的命令。 my-app就是我们项目的名字

5）编译器打开这个项目（我这里是intellij idea），在terminal终端输入ng serve --open打开我们localhost:4200默认页面

你的编译器没有终端也没关系，直接在git bash here里面输入命令也行

（2）项目目录结构解析：

1）e2e：angular2的语法是typescript的（不明白什么是typescript，去看上一篇博客），e2e是typescript的一些配置文件，这边不需要我们作什么修改，忽略它就行。

2）node_modules：一个或多个node模块，这里是和package.json对应的，svn或者git一些版本控制，并不需要提交node_modules模块，这些node_modules模块的目录会在package.json这个文件里，我们检出的时候，在终端（git bash here）输入npm install之后，就会把这些模块自动下载下来。

3）src：source资源文件夹，app文件夹下面是我们的页面组件，此时不得不说另一个文件，README.md，打开可以看到一些基本的ng命令，比如说我们现在需要新建一个list页面，打开README.md，它告诉我们，新建这个页面的命令是

ng generate component component-name,输入这个命令之后便会在app目录下新建出一个list的组件（这里的新建页面不是跟之前一样右击新建了~~~）

   4）assets，可以放一些我们自己的文件，这边我放的是自己模拟的json数据

   5）enviroment是环境配置，忽略

   6）比较重要的文件就上面这么多，详细的话后续说明

（3）Angular2中的数据绑定

       1）模板绑定 ：在html页面中使用表达式{{myStr}}

       2）属性绑定： 在input中，<input  [value]="myStr" />

       3）数据双向绑定：[(ngModule)]

（4）父子组件之间的数据传递以及子组件之间的数据传递

1）父组件与子组件之间：Input 用来让父模块往子模块传递内容所需要的特殊模块，并且@Input要和自定义属性一起使用

比如：父组件app.component.html要使用home.component.ts里面的person数据，在home.component.ts里面@Input 自定义属性，同时需要import Input这个模块 。找到公共的部分，写入这个自定义属性

同样的，当子模块想定义一些事件给父模块的时候，使用Output

比如：home.component.html传递一个事件给父级组app.component.ts去触发。

子组件之间的数据传递：service

详细的例子戳这个url：http://m.php.cn/article/362329.html

（5）路由

1） 关于页面之间的跳转，我们必须明白Angular2的路由是怎么样的机制：

index.html（app-root）------->app.component.html-------->各种页面组件

2）具体实现

a.在app目录下新建一个app.routes.ts文件，

b.配置这个文件

其中，appRoutes是声明的一个常量，这个常量是Routes类型

c.建立联系：将app.component.html和app.routes.ts建立联系。在app.module.ts里面import这个文件。要想文件能被import首先文件本身要暴露一个接口：

app.module.ts暂时这么理解：所有的.ts文件和依赖都在这里引入（想不到更专业的解释了(๑•̀ㅂ•́)و✧）。

d.最后在页面中写入页面路径

<li [routerLink]="['/home']"></li>......路由中要注意各种语法写的对不对。。。

（6）路由参数

1）如何表示路由参数：path：“home/:person”

2）想要路由参数能起作用，必须还要引入一个路由参数模块：在需要传参的.ts文件里面引入

import {ActivatedRoute} from "@angular/router"。这个模块帮我们拿到ActivatedRoute这个类。这个类帮我们创建一个对象从而获得对应的路由参数。

3）.ts文件里的写法：路由参数是页面刷新就需要获取到的参数，所以得写在constructor里面

constructor(private route:ActivatedRoute)

{

route.snapshot.params[''person]

}

4）关于constructor和ngOnInit：

变量定义 变量声明 上来就需要请求数据的 可以在construtor里

其他的方法 在ngOninit中

（7）指令

1）组件指令：<app-list></app-list> || <router-outlet></router-outlet>

2）属性指令：ngClass = "类名" 改变dom样式

3）结构指令：*ngIf = "表达式" 改变dom结构

（8）结构样式

（9）pipe管道，相当于angular1中的过滤器

1）内置管道：uppercase ，lowercase，slice

2）自定义管道 name：something

cd src/app

ng g pipe my-filter //新建一个my-filter.pipe.ts的文件

比如：自定义一个搜索指令：

其中，people是我们需要搜索的列表，term是input框里的搜索参数

（10）服务Service

1）service的作用： 很多组件--->服务--->数据库

2）创建服务：ng g s my-logging

3）组件内部，import这个Service，并且需要在app.module.ts里面写上依赖providers

（11）Http

1）Http服务是用于从后台程序获取或者更新数据的一种机制

2）引入模块，创建对象（引入模块就是引入了这个类，使用这个类就需要创建对象），在app.module.ts里面引入HttpModule

3）http请求，最好放在一个service服务的文件夹里面

4）http请求下来的数据，不是标准的json 格式，这里需要我们借助第三方库将其转化为我们可以使用的json格式

import "rxjs/add/operator/map"

5）处理请求数据：subscribe（将请求到的数据运用箭头函数进行处理）

     Http请求完了，，，接下来就是个人造化了~~~~

     文章好长~~~~~~~~~~

       文章好长~~~~~~~~~~