前言

学习和使用angular已经有一段时间了。这段时间利用angular做了一个系统,算是对angular有了一个全面的认识,趁着现在有一些时间,把angular的一些知识记录一下。

安装angular

安装angular首先要使用node,node的下载地址http://nodejs.cn/,我是用的是angular7最新的版本,node的版本应该在10以上。安装node会自动帮你安装好npm的包管理工具,然后 我们可以使用npm安装angular:

npm install -g @angular/cli

这样,我们就安装好了全局的angular,然后我们就可以使用ng xxx的命令来开发angular应用了。

使用angular所需要的知识

typescript

typescript是js的超集,为js装上了一个类型系统,使得很多关于类型的错误能够在编译器就被发现,大大的节省了开发时间,缺点就是你需要学习一门新的语言,但typescript和js在语法上面是非常类似的,相关的概念也一样,所以学习起来不会太费劲。

rxjs

angular里面的异步大多数是使用rxjs来表达的。rxjs简单的理解就是一个时间轴,在这个时间轴上面会不断的发送数据,rxjs有点儿和订阅模式一样的地方,在时间轴上面产生的数据会被消费者订阅和消费。

其他的核心知识

angular里面包含了很多概念,这些概念也是造成angular学习曲线比较陡峭的原因之一,但是一旦你学会了angular,就会给你创造巨大的价值。不同于其他框架,angular内部封装了一些无意义的东西比如webpack,webpack这坨baba虽然解决了很多问题,但这些问题不能创造任何价值,angular对webpack的封装让我们开发人员可以真正的将时间投入到业务的开发上面来。

组件

组件(Component)是构成angular应用的基础和核心。也是应用程序组件化和模块化的产物。它由html文件、css文件和ts文件构成,html用于表述组件的结构,cs所表述组件的样式,ts表述组件的逻辑和功能。

模板

模板是一种自定义的标准化页面,通过模板和模板中的数据结合,可以生成各种各样的页面。在angular中模板的默认语言是html。几乎所有的html在模板中都是适用的。但<scirpt>标签是禁止的,主要是防止脚本注入攻击(XSS)。

指令

指令是一个重要的概念,指令作用在特定的dom元素上,可以扩展这个元素的功能,为元素添加新的行为。组件(component)就是一种特殊的带有视图的指令,组件继承自指令。

服务和rxjs

在 Angular 中,服务用于帮助开发者书写可重用的公共功能( 如日志 处理、权限管理等) 和复杂的业务逻辑,对于应用程序的模块化有着很重要的意义。

rxjs继承了响应式编程范式,在angular中rxjs与http配合使用。rxjs的几个核心对象包括observable、observer、subscription、subscribe、subject等等。

依赖注入

依赖注入是一种编程思想,他是解决IOC(控制反转)的方法之一,当我们编写一个大型的项目时会创建很多组件和服务,这些组件和服务之间有着错综复杂的关系,管理好这些组件和服务之间的关系,就是要将这些组件和服务进行一定程度的解耦合,依赖注入为我们提供了强大的解耦合的能力。

路由

路由是一个单页应用(spa)的重要组成部分,路由所要解决的核心问题是通过将不同的URL和不同的组件建立对应的关系,使得不同的URL能够代表不同的组件。

测试

对于一个应用来说,只是完成了基本功能开发,还远远不够,如何在快速迭代中保持稳定的产品质量,测试的重要性不言而喻。

结束

这是一个angular复习的开篇,主要从angular组成的各个方面对angular进行了一个综述,接下来会对angular的每个部分做详细的解剖。

angular复习笔记1-开篇的更多相关文章

  1. Angular复习笔记7-路由(下)

    Angular复习笔记7-路由(下) 这是angular路由的第二篇,也是最后一篇.继续上一章的内容 路由跳转 Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另一个页面的行为.对于使 ...

  2. Angular复习笔记7-路由(上)

    Angular复习笔记7-路由(上) 关于Angular路由的部分将分为上下两篇来介绍.这是第一篇. 概述 路由所要解决的核心问题是通过建立URL和页面的对应关系,使得不同的页面可以用不同的URL来表 ...

  3. Angular复习笔记6-依赖注入

    Angular复习笔记6-依赖注入 依赖注入(DependencyInjection)是Angular实现重要功能的一种设计模式.一个大型应用的开发通常会涉及很多组件和服务,这些组件和服务之间有着错综 ...

  4. Angular复习笔记5-指令

    Angular复习笔记5-指令 在Angular中,指令是一个重要的概念,它作用在特定的DOM元素上,可以扩展这个元素的功能,为元素增加新的行为.本质上,组件可以被理解为一种带有视图的指令.组件继承自 ...

  5. angular复习笔记4-模板

    Angular复习笔记4-模板 简介 模板是一种自定义的标准化页面,通过模板和模板中的数据结合,可以生成各种各样的网页.在Angular中,模板的默认语言是HTML,几乎所有的HTML语法在模板中都是 ...

  6. angular复习笔记3-组件

    组件Component 组件是构成angular应用的核心,angular的有序运行依赖于组件的协同工作,组件之于angular应用就像是汽车和汽车零部件的意思. 概述 近几年的前端发展迅速,各种工程 ...

  7. angular复习笔记2-架构总览

    angular架构总览 一个完整的Angular应用主要由6个重要部分构成,分别是:组件.模板.指令.服务.依赖注入和路由.这些组成部分各司其职,而又紧密协作,它们的关系如图所示. 与用户直接交互的是 ...

  8. Java基础复习笔记系列 九 网络编程

    Java基础复习笔记系列之 网络编程 学习资料参考: 1.http://www.icoolxue.com/ 2. 1.网络编程的基础概念. TCP/IP协议:Socket编程:IP地址. 中国和美国之 ...

  9. Java基础复习笔记系列 八 多线程编程

    Java基础复习笔记系列之 多线程编程 参考地址: http://blog.csdn.net/xuweilinjijis/article/details/8878649 今天的故事,让我们从上面这个图 ...

随机推荐

  1. html 选择本地图片,显示选择的图片

    主要用的是html5的文件系统部分: <html> <head> <meta name="viewport" content="width= ...

  2. hotspot的Heap Memory和Native Memory

    JVM管理的内存可以总体划分为两部分:Heap Memory和Native Memory.前者供Java应用程序使用的:后者也称为C-Heap,是供JVM自身进程使用的.Native Memory没有 ...

  3. jenkins使用--安装文档

    添加Jenkins的源(repository): #sudo wget -O /etc/yum.repos.d/jenkins.repo http://jenkins-ci.org/redhat/je ...

  4. 第08组 Alpha冲刺(3/4)

    队名 八组评分了吗 组长博客 小李的博客 作业博客 作业链接 组员1李昕晖(组长) 过去两天完成了哪些任务 文字/口头描述 11月19日了解各个小组的进度与难以攻破的地方,晚上安排开会,安排新的冲刺任 ...

  5. 【FPGA】always (*) 后代码全部显示注释字体的颜色之解决方法

    2015年08月26日 09:44:05 风雨也无晴 阅读数:1289    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/scottly1/art ...

  6. java8在Stream的forEach操作时获取index

      import java.util.Objects; import java.util.function.BiConsumer; /** * * @author yangzhilong * @dat ...

  7. hive分区与实际分区文件不匹配导致spark读文件出错的问题解决

    先解释下,由于历史原因导致hive中的看到分区比hdfs中的文件夹不匹配,存在hive中分区数有,实际hdfs中无此文件夹. spark中通过sparkSQL读取hive中的该表时,将会出现异常. 解 ...

  8. 公司-IT-Yahoo:百科

    ylbtech-公司-IT-Yahoo:百科 雅虎(英文名称:Yahoo!,NASDAQ:YHOO)是美国著名的互联网门户网站,也是20世纪末互联网奇迹的创造者之一.其服务包括搜索引擎.电邮.新闻等, ...

  9. Java学习-054-Mybatis IN查询,通过 foreach 获取列表数据

    通过如下语句查询商品订单信息: ,,,) 在 Mapper.java 中定义如下接口: List<GoodsOrder> findGoodsOrderByIds(String ids); ...

  10. layui弹出层layer的area过大被遮挡

     layer弹出窗口在弹出时指定了area,弹出后,如果当前页面(iframe)大小比弹出的窗口小,那么就会出现无法操作弹出窗口的尴尬情况.如图: 弹出窗口比当前页面大,这时,唯有放大整个页面才能看到 ...