资讯专栏INFORMATION COLUMN

前端知识点总结——Angular

BaronZhang / 2761人阅读

摘要:前端知识点总结一概述基于命令行的开发方式编译工作集成了打包工具。。。。在浏览器中接管展现应用的内容,并根据我们提供的操作指令响应用户的交互。在开发时,八大组成部分模块组件模板自带的标签指令绑定相关的的语法元数据告诉如何处理一个类。

前端知识点总结——Angular

一、Angular概述

基于命令行的开发方式?

</>复制代码

  1. ①hot reload
  2. ②编译工作
  3. ③集成了webpack打包工具
  4. 。。。。

angular.cn 中文
angular.io 正式官网
angular.cn/guide/styleguide 风格指南

1、what?

</>复制代码

  1. angular是一个Google推出的js框架,是以模块为基本单位,模块又可以包含组件、指令、过滤器。。
  2. 1.1 版本问题
  3. angular angular2.0以后所有的版本统称为angular
  4. (当前学习ng4.0)
  5. angular.js angular1.* 统称为angular.js
  6. (http://www.runoob.com/angularjs/angularjs-tutorial.html)
  7. 1.2 版本之间的区别
  8. ①新版本是有组件的概念的
  9. ②老版本是$scope和controller为主
  10. ③angular引入了rxjs
  11. ④angular采用ts(typescript是es6的超集,是由微软和谷歌) ts是一种强类型检查机制的语言
  12. ⑤angular可读性、提高了代码的复用率、维护成本变低。。。

2、where

</>复制代码

  1. 可以使用支持angular的Ionic框架来实现移动端的开发,直接使用angular来实现pc端的开发
  2. 实现操作比较频繁的SPA

3、why

</>复制代码

  1. ①遵循w3c所推出的webComponent标准(组件化)
  2. ②代码具有更好的可读性和可维护性、
  3. ③引入了更多的高效率的工具 ,比如rxjsimmutable.js。。。, 让代码的编译、部署更简单
  4. ④ts --》 健壮

4、how

</>复制代码

  1. angular的开发整体框架,是有8大组成部分构成
  2. 搭建环境的方式:
  3. 方式1:
  4. ①下载quickstart-master.zip压缩包
  5. https://github.com/angular/quickstart download
  6. 或者 直接拷贝老师提供的压缩包
  7. ②解压缩 压缩包,进入对应的目录中
  8. 执行npm install 安装项目所需要用到的依赖
  9. npm start 启动开发服务器
  10. 方式2:
  11. Angular CLI是一个命令行界面工具,它可以创建项目、
  12. 添加文件以及执行一大堆开发任务,比如测试、打包和发布。
  13. //安装基于angular的命令工具
  14. npm install -g @angular/cli
  15. //创建一个有着ng模板的项目
  16. ng new my-app
  17. //进入当前目录下的my-app
  18. cd my-app
  19. //启动开发服务器
  20. ng serve --open
二、Angular模板项目的启动流程

</>复制代码

  1. index.html
  2. main.js (main.ts)-->启动一个模块 AppModule
  3. app/app.module.ts ---> 启动一个组件 app/app.component.ts
  4. Hello Angular
三、完成组件的创建和使用

</>复制代码

  1. 1、创建组件和使用组件
  2. ①创建文件 app/test/test.component.ts
  3. ②将类装饰成一个组件类
  4. import {Component} from "@angular/core"
  5. @Component({
  6. selector:"test",
  7. template:`

    it is a test

    `
  8. })
  9. export class Demo01Component{
  10. }
  11. ③使用组件
  12. ①到模块中声明
  13. app.module.ts中,
  14. import {TestComponent} from "./test/test.component"
  15. @NgModule({
  16. declarations:[TestComponent]
  17. })
  18. 练习:(16:50 - 17:00
  19. demo02/demo02.component.ts
  20. 组件中渲染一个无序列表(5个列表)
  21. 将组件渲染AppComponent
四、Angular中常见的指令

</>复制代码

  1. 1、循环指令
  2. Vue :
  3. Angular:
  4. 语法:
  5. 2、选择指令
  6. Vue:
  7. angular:
五、常见指令

指令和组件的关系:

</>复制代码

  1. 组件就是一个带有模板的指令!!!

1、多重分支判断

</>复制代码

  1. vue
  2. v-if
  3. v-else-if
  4. v-else

2、属性绑定

</>复制代码

  1. Vue:
  2. Angular:

3、事件绑定

</>复制代码

  1. Vue
  2. Angular
  3. 语法:
  4. 举例:

4、双向数据绑定

</>复制代码

  1. Vue:
  2. Angular:
  3. 依赖注入:
  4. 将依赖的东西注入到指定的地方,让依赖可被使用
  5. 举例:AppModule依赖于FormsModule,
  6. 只需要在AppModule的imports数组写上FormsModule名称
  7. 就可以使用FormsModule所提供的东西。
  8. 好处:解耦,降低了耦合度
  9. Angular中如果想要监听双向数据绑定数据的变化,提供一个事件 ngModelChange
  10. 注意事项:
  11. ①Angular中如果要想使用双向数据绑定,就必须指定模块依赖于FormsModule
  12. ②使用ngModelChange事件时,通过$event去传递用户当前所输入的信息
  13. (ngModelChange)="handleChange($event)"

内置的指令:

</>复制代码

  1. *ngFor
  2. *ngIf
  3. *ngSwitchCase
  4. *ngSwitchDefault
  5. ngSwitch
  6. []
  7. ()
  8. [(ngModel)]
  9. {{}}

5、自定义指令

</>复制代码

  1. Vue中自定义指令:
  2. Vue.directive("change",{
  3. bind:function(el,binding){},
  4. update:function(){},
  5. unbind:function(){}
  6. });
  7. v-change
  8. Angular中指令创建和使用
  9. 5.1 创建
  10. import {Directive} from "@angular/core"
  11. @Directive({
  12. selector:"[test]"
  13. })
  14. export class TestDirective{
  15. }
  16. 5.2 使用
  17. ①到模块中声明
  18. app.module.ts
  19. import {TestDirective} from "***"
  20. @NgModule({
  21. declarations:[TestDirective]
  22. })
  23. ②作为标签的属性
  24. 5.3 得到调用指令的元素
  25. import {ElementRef} from "@angular/core"
  26. ②实例化
  27. constructor(private el:ElementRef){}
  28. ③读取元素
  29. this.el.nativeElement
  30. 5.4 指令调用时传参??
  31. ②在指令类的内部
  32. import {Input} from "@angular/core"
  33. @Input() test="";
  34. this.test
  35. 补充:使用生命周期的处理函数?
  36. ①引入
  37. import {OnDestroy} from "@angular/core"
  38. ②在定义类的时候 实现接口类
  39. export class Test implements OnDestroy{
  40. ngOnDestroy(){}
  41. }
六、组件之间通信

</>复制代码

  1. Vue中组件通信的方式?
  2. ①props down
  3. 步骤1:发送
  4. 步骤2:接收
  5. Vue.component("son",{
  6. props:["myName"]
  7. })
  8. ②events up(子-》父)
  9. 步骤1: 事件的绑定
  10. methods:{
  11. rcvMsg:function(msg){}
  12. }
  13. 步骤2:事件的触发(儿子)
  14. this.$emit("customEvent",123);
  15. $refs $parent
  16. ④bus
  17. Angular中组件通信?
  18. 1、props down
  19. 步骤1:发送
  20. 步骤2:接收
  21. import {Input} from "@angular/core"
  22. @Input() uName="";
  23. this.uName
  24. 2、events up
  25. 步骤1:事件和处理函数的绑定
  26. 定义一个方法
  27. rcvMsg(msg){}
  28. 步骤2:触发事件
  29. 子组件触发
  30. import {Output,EventEmitter} from "@angular/core"
  31. @Output() toFatherEvent = new EventEmiiter();
  32. this.toFatherEvent.emit("123");

我们是这样写 Angular 应用的:

</>复制代码

  1. 用 Angular 扩展语法编写 HTML 模板,
  2. 用组件类管理这些模板,
  3. 用服务添加应用逻辑,
  4. 用模块打包发布组件与服务。
七、管道(pipe)

</>复制代码

  1. 管道是用来对数据进行筛选、过滤、格式化
  2. Vue中过滤器:
  3. {{expression | filter(1,2) | filter2 }}
  4. Vue.filter("changeSex",function(arg,arg1,arg2){
  5. return 处理后的结果
  6. })
  7. angular中管道:
  8. 过滤器的本质就是一个有参数有返回值的方法
  9. 语法:
  10. {{expression | pipe1:"12":34 | pipe2}}
  11. 1、内置管道
  12. 常见内置管道:
  13. uppercase/lowercase/date/number/slice
  14. 2、自定义管道
  15. 创建一个自定义管道:
  16. import {Pipe,PipeTransform} from "@angular/core"
  17. @Pipe({
  18. name:"testNG"
  19. })
  20. export class TestPipe implements PipeTransform {
  21. //value是竖杠前表达式执行的结果
  22. //args通过调用管道时,冒号后边跟的参数
  23. transfrom(value:any,...args:[]):any{
  24. return ‘处理后的结果’
  25. }
  26. }
  27. 调用:
  28. ①声明
  29. 到模块中先引入再声明
  30. ②调用
  31. 和内置管道的用法是一样的,同样支持传参、多重过滤
八、服务 (依赖注入)

</>复制代码

  1. 服务 service:服务的本质是一个类,在服务类中封装的是经常用到的数据和方法。
  2. 常见的服务:日志类服务、心跳服务、网络请求服务。。。
  3. 1、服务的创建和使用
  4. 创建:
  5. import {Injectable} from "@angular/core"
  6. @Injectable()
  7. export class UserService {
  8. constructor(){}
  9. checkUserLogin(){return true}
  10. }
  11. 使用:
  12. ①需要给服务指定provider
  13. 在组件中或者模块中指定providers:[UserService]
  14. ②调用
  15. import {UserService} from "./***"
  16. constructor(private myService:UserService){}
  17. this.myService.checkUserLogin()
  18. 2、如何封装一个网络请求的服务
  19. ①创建服务的文件
  20. ②在服务中封装一个方法
  21. sendRequest(myUrl:string){
  22. return this.http.get(myUrl).map((response)=>
  23. response.json()
  24. )
  25. }
  26. ③调用之前 首先指定providers
  27. ④到组件中,先引入,再实例化,再调用
  28. this.myHS.sendRequest().subscribe((result)=>{
  29. //result就是服务器端返回的结果!
  30. })
  31. 与服务器端通信如果涉及的session,angular需要这么处理:
  32. 客户端
  33. ①发起请求 withCredentials:true
  34. this.http.get(
  35. myUrl,
  36. {withCredentials:true}
  37. )
  38. 服务器端:
  39. ①跨域header("Access-Control-Allow-Origin:http://localhost:3000");
  40. ②服务器允许接收凭证
  41. header("Access-Control-Allow-Credentials:true");
  42. 服务创建和使用:
  43. 1、创建一个文件 test.service.ts
  44. 2、在文件中编写代码,装饰一个服务
  45. @Injectable()
  46. export class TestService{
  47. showAlert(msg){
  48. alert(msg);
  49. }
  50. }
  51. 3、 给模块或者组件,在providers属性对应的数组中 [TestService]
  52. 4、组件中要想使用服务中的方法
  53. import {TestService} from "***"
  54. constructor(private myService:TestService){}
  55. this.myService.showAlert()

Angular中开发模式:

</>复制代码

  1. 我们是这样写 Angular 应用的:
  2. 用 Angular 扩展语法编写 HTML 模板,
  3. 用组件类管理这些模板,
  4. 用服务添加应用逻辑,
  5. 用模块打包发布组件与服务。
  6. 然后,我们通过引导根模块来启动该应用。
  7. Angular 在浏览器中接管、展现应用的内容,并根据我们提供的操作指令响应用户的交互。

在Angular开发时,八大组成部分:

</>复制代码

  1. 1、模块
  2. 2、组件
  3. 3、模板 自带的html标签+指令、绑定相关的ng的语法
  4. 4、元数据 告诉 Angular 如何处理一个类。
  5. 5、数据绑定
  6. {{}} () [] [(ngModel)]
  7. 6、指令
  8. 三大类:组件、结构型、属性型
  9. 7、服务
  10. 封装一些数据和方法
  11. 8、依赖注入
  12. 就是将依赖的服务、模块注入到指定组件、模块中取使用,提供了一种新的实例化的方式(解耦)
九、路由模块

路由模块:建立起url和页面之间的映射关系
1、实现SPA的基本步骤

</>复制代码

  1. Vue:
  2. 实现一个SPA基本思路:
  3. ①指定一个容器
  4. ②创建代码片段
  5. 创建组件
  6. var Login = Vue.component("login-component",{
  7. template:`

    登录页面

    `
  8. })
  9. ③配置路由词典
  10. new Vue({
  11. router:new VueRouter({
  12. routes:[
  13. {path:"/myLogin",component:Login}
  14. ]
  15. })
  16. })
  17. ④测试
  18. 测试路由词典中 路由地址能否按照需求 正确加载所需要用到的页面
  19. Angular:
  20. ①指定容器
  21. ②创建组件 (声明)
  22. @Component({}) export class **
  23. ③配置路由词典
  24. //a-module-routing
  25. import {Routes,RouterModule} from "@angular/router"
  26. import {LoginComponent} from "./demo15_spa/login.component"
  27. const routes:Routes = [
  28. {path:"",component:LoginComponent}
  29. .....
  30. ]
  31. @NgModule({
  32. import:[RouterModule.forRoot(routes)],
  33. exports:[RouterModule]
  34. })
  35. export class AppRoutingModule{}
  36. 找到跟模块:
  37. import {AppRoutingModule} from "./app.router"
  38. @NgModule({
  39. imports:[AppRoutingModule]
  40. })
  41. ④测试

2、在Angular实现组件间的导航的方式

</>复制代码

  1. Vue写法:
  2. ①可以直接修改地址栏(内部测试)
  3. ②可以通过js
  4. this.$router.push("目的地的路由地址")
  5. ③routerLink
  6. Angular:
  7. ①直接修改地址栏
  8. ②js
  9. import {Router} from "@angular/router"
  10. constructor(private myRouter:Router){}
  11. this.myRouter.navigateByUrl("url");
  12. 补充:实现前进和后退
  13. import {Location} from "@angular/common"
  14. constructor(private myLocation:Location){}
  15. this.myLocation.back(); this.myLocation.forward();

3、参数的传递

</>复制代码

  1. Angular:
  2. 3.1 发送
  3. this.myRouter.navigateByUrl("myOC/123");
  4. 3.2 接收
  5. ① 配置接收方的路由地址
  6. {path:"myOC"} ==> {path:"myOC/:price"}
  7. ② 接收参数
  8. import {ActivatedRoute} from "@angular/router"
  9. constructor(private myAR:ActivatedRoute){}
  10. this.myAR.params.subscribe((result)=>{
  11. //result.price
  12. })
  13. 在Angular中 实现数据传输的方式:
  14. ①组件间通信
  15. ②跳转时指定参数
  16. ③与远程服务器端通信

4、路由嵌套

</>复制代码

  1. 可以在SPA中某个组件中,根据url嵌套其它的组件
  2. Vue中实现方式:
  3. ①在准备嵌套其它组件的,指定一个容器
  4. ②配置路由词典
  5. {
  6. path:"",
  7. component:MailComponent,
  8. children:[
  9. {path:"inbox",component:***}
  10. ]
  11. }
  12. Angular中实现方式:
  13. ①指定容器
  14. router-outlet
  15. ②配置子路由
  16. {
  17. path:"mail",
  18. children:[
  19. ...
  20. ]
  21. }
  22. 总结:在Angular中实现一个支持路由嵌套的SPA,
  23. 导航到对应的子路由对应的页面时,必须在携带父组件的地址
  24. localhost:3000/mail/outbox
  25. localhost:3000/mail/inbox
  26. demo18_embed
  27. mylogin.component.ts MyLoginComponent
  28. mail.component.ts MailComponent
  29. inbox.component.ts InboxComponent
  30. outbox.component.ts OutboxComponent
  31. ①完成组件的创建和声明
  32. ②路由模块

5、路由守卫

</>复制代码

  1. 路由守卫 RouteGuard,控制是否能够访问某一个url中所对应的组件!
  2. 鉴权的组件
  3. 用户登录的页面
  4. 。。。
  5. 如何使用路由守卫:
  6. ①创建一个服务
  7. import {Injecatable} from "@angular/core"
  8. import {CanActivate} from "@angular/router"
  9. @Injectable()
  10. export class MailGuard implments CanActivate{
  11. canActivate(){
  12. return true/false
  13. }
  14. }
  15. ②给服务指定提供商
  16. providers:[MailGuard]
  17. ③给路由词典中想要保护的路由指定canActivate
  18. {
  19. path:"mail",
  20. canActivate:[MailGuard]
  21. }
  22. Vue中如果也想实现路由守卫:
  23. const router = new VueRouter({ ... })
  24. router.beforeEach((to, from, next) => {
  25. // ...
  26. })
  27. https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93972.html

相关文章

  • 前端每周清单半年盘点之 Angular

    摘要:延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID:frontshow),及时获取前端每周清单;本文则是对于半年来发布的前端每周清单...

    LeviDing 评论0 收藏0
  • 前端周报:前端面试题及答案总结;JavaScript参数传递的深入理解

    摘要:前端面试题及答案总结掘金技术征文金三银四,金九银十,用来形容求职最好的几个月。因为的存在,至少在被标准化的那一刻起,就支持异步编程了。然而异步编程真正发展壮大,的流行功不可没。 showImg(https://segmentfault.com/img/bVVQOH?w=640&h=319); 1、2017前端面试题及答案总结 |掘金技术征文 金三银四,金九银十,用来形容求职最好的几个月...

    ermaoL 评论0 收藏0
  • 2017个人总结

    摘要:特此写个流水账总结,供自己以后羞耻的回顾。正逢月计划辞职回家玩游戏过个暑假,结果在如今部门老大的忽悠下加入到了新东家。和组长两人继续没昼夜的忙活,最终也按时交差,上了线。卷土重来,回报过去的一份念旧,期待的美好,个人选型入坑。 前言 2017年发生了太多的事情,结了婚,住进了新家,成功的播了种,当上了准爸爸。公司也蒸蒸日上搬进了高大上的写字楼。前端的坑越来越大,都来不及填。特此写个流水...

    Jason 评论0 收藏0
  • 前端每周清单年度总结与盘点

    摘要:前端每周清单年度总结与盘点在过去的八个月中,我几乎只做了两件事,工作与整理前端每周清单。本文末尾我会附上清单线索来源与目前共期清单的地址,感谢每一位阅读鼓励过的朋友,希望你们能够继续支持未来的每周清单。 showImg(https://segmentfault.com/img/remote/1460000010890043); 前端每周清单年度总结与盘点 在过去的八个月中,我几乎只做了...

    jackwang 评论0 收藏0
  • 前端每周清单第 40 期: JS 的 Core 与 Cost,Node 内存溢出调试,Softwar

    摘要:已被所有主流浏览器支持在过去几周苹果的浏览器与微软的浏览器分别发布新版本,支持了,再加上早已支持的和,已得到所有主流浏览器支持。 showImg(https://segmentfault.com/img/remote/1460000012086220?w=1240&h=823); 前端每周清单第 40 期: JS 的 Core 与 Cost,Node 内存溢出调试,Software 2...

    番茄西红柿 评论0 收藏0

发表评论

0条评论

BaronZhang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<