学习angular

学习angular

组件

1. 组件是angular的基本构建快，可以理解为一个带有html,css,类（js）的一段代码块。
2. 指令是容许向html添加自定义行为，可以理解为用户操作。
3. 组件可以调用服务。
4. 组件，服务，指令是用来完成功能的 模块是用来打包和分发的。

5. 组件的三个必备的要素,更多如图

    1.装饰器@component
    2.template 模板
    3.controller 控制器 （页面逻辑，普通的ts类，包含组件的模板和方法）
   

   

   6.结构
   

---

angular 命令行

1. ng-v 查看版本
2. ng new app 新创建一个项目
3. 下载的module是第三方安装包
4. ng g component navbar 生成组件

开发前的准备

1. 在项目目录下安装需要的库，如jquery,bootstrap
2. 在.angular-cli.json文件里面引用库的路径

3. 需要注意的是，由于typescript不支持直接书写javascript，需要先转译，故要先安装下面的插件

   cnpm install @types/bootstrap –save-dev

   cnpm install @types/jquery –save-dev

4. 步骤如图
   

启动步骤

1. 主启动文件在Index.html，这里的app-root选择器会寻找启动模块的主组件对应的模板选择器
2. 主启动脚本在main.ts
3. 具体如图
   
   

数据绑定的三种方法

1. 插值绑定 如 {{title}}
2. 属性绑定 如

路由

1. Routes 路由配置，保存着这个URL对应展示那个组件，以及在那个RouterOutlet中展示组件(可以理解为一个数组)
2. RouterOutlet 在HTML(模板)中标记路由呈现位置的占位符
3. Router 负责在运行时执行路由的对象，可以调用其Navigate()和navigateByUrl()方法来导航一个指定的路由,保存在控制器里面
4. RouterLink 在HTML(模板)中声明路由导航用的指令
5. ActuvatedRoute 当前激活的路由对象，保存着当前路由的信息，如路由地址，参数等
6. 路由存在在module中，且至少有2个属性，path/user component A 路径和组件

在路由中传递数据

1. 在查询数据中传递数据 如

   /product?id=1&name=2     =>ActiveRoute.queryParams[id]

   1. 在路由路径中传递数据 如

      /product/:id=1     =>ActiveRoute.queryParams[id]

   2. 在路由配置中拿到数据 如

      path:/produce,component:ProductComponent,data:[{isprod:true}]}    =>ActivatedRoute.data[0][isProd]

重定向路由

1.在用户访问特定的地址时候，将其重定向到另一个地址 如

www.aaa.com/x    =>www.aaa.com/y

3.所有路由都是配置在根模块里面的，组件并不知道路由

2.用法如下,
!这里写图片描述

辅助路由 和 子路由

1.辅助路由是在同一个页面间进行跳转，可以复用在主路由上面，也就是说主路由上面的任何一个路由都可以访问

2.子路由是在主路由下的某一个路由上面跳转 如

主路由 www.baidu.com/tupian

子路由 www.baidu.com/tupian/cat

书写 {path:"tupian",component:HomeComponent,children[
{ path: 'cat',component: CatComponent}
]}

路由守卫

1.只有当用户满足某些条件时候才能进行下一步 如一下情况

• 只有当用户已经登录并且拥有某些权限时才能进入某些路由
• 一个由多个表单组件组成，例如注册流程，用户只有在当前路由的组件中填写满足了要求的信息才能导航到下一个路由
• 当用户未执行保存操作而试图离开当前导航

管道

1.angular的对象 number date 等等
2.
I

组件间通讯

1.ng-content 投影，把父组件的代码片段转给子组件，

<div class="header"></div> => <ng-content select="header"></ng-content>

表单

都需要引入FormModule,

模板表单

1. NgForm 隐身的创建一个FormGroup 实例,如果不想用NgForm,则需要声明NgNoForm，它会自动找到标有NgModule的子元素，注意表单的提交会导致表单的刷新，单页应用是不刷新，Angular会自动的阻止，并用NgSubmit替换
2. NgModel 会隐形创建FormControl,会存储当前字段的值
   3.ngModelGroup 一般用于2个相同Input作用

响应试表单

1. FormGroup=> formGroup=>formGroupName
2. FormContorl=> formControl=>formControlName
3. FormArray=>formArrayName
4. 响应试表单 只能在代码中操作，模板表单只能在指令中操作