一、集成开发环境@angular/cli

  • IE8之后才有debugger工具
  • 2009，nodejs发布，前端Big Bang

1.1 基于NodeJS的工具链

打包工具

  • grunt 对js代码做合并、压缩、混淆
  • gulp grunt的改进版
  • webpck 打包工具，静态模块打包器，一个标准

自动化测试工具

  • karma
  • jasmine

CSS预编译

  • Material Design 中文 质感设计

    • 每一段时间，都有一种风格
    • 苹果 倡导 扁平化，极简化
    • Google 倡导 Material Design
  • less/sass 做css预编译

1.2 NodeJS问题 npm

  • 墙，有些模块装不上
  • 对package管理不好，目录嵌套太深

1.3 开发Angular需要的开发工具

依次是：

  • webpack
  • TypeScript编译器
  • karma/jasmine 自动化单元测试
  • Protractor 为Angular应用量身订制的集成测试工具

1.4 Angular CLI

官网：https://cli.angular.io/

npm install -g @gngular/cli

ng --version

ng help

ng new my-dream-app

cd my-dream-app

ng serve

# 国内推荐使用cnpm

二、三大核心概念

  • Angular1.x没有灵魂
  • Angular核心概念是“组件化”
    • 分治，分而治之
    • 可复用
  • 组件分到每个模块里去，用路由来控制这些模块的加载和初始化

2.1 Component

组件树

单向数据流

刷新策略

组件树生成器

https://github.com/compodoc/ngd

2.2 NgModule

https://angular.io/guide/ngmodule-faq

什么是模块?

NgModule作用

  • 帮助组织业务模块
  • 是Angular/CLI工具的打包依据，保证js是异步加载
  • 是异步加载的最小单位

切分模块

  • 浏览器对http请求有并发数限制

    • IE9 2个
    • Firefox/Chrome 4个

切分

切分原则

2.3 Route

前端为什么需要Router?

如果没有路由

  • 浏览器的前进后退按钮没法用
  • 无法把URL拷贝并分享给你的朋友

路由是什么？

  • 从本质上讲，表示的是页面上的一个状态
  • 从数据结构讲，是一个tree型结构

静态路由

  • 自动把这些组件打包到一个trunk里去

异步路由

路由守护

三、架构特色

依赖注入、数据绑定

3.1 依赖注入

只有一种注入方法：构造器注入

注射器本身也会构成一个tree型结构

查看注射器里面有什么属性和方法：chrome debugger

  • 每个HTML标签上面都会有一个注射器实例
  • 注射是通过constructor进行的
  • @Injectable是@Component的子类

DI与DataBinding相关文章

https://vsavkin.com/dependency-injection-in-angular-1-and-angular-2-d69589979c18

http://web.jobbole.com/88605/ 中文翻译

https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

https://pascalprecht.github.io/slides/angular-2-change-detection-explained/#/

3.2 数据绑定

  • Angular是第一个将双向数据绑定概念引用到前端开发来的
  • 新版本的Angular已经彻底重写了脏检查机制
  • 在JS里面，有3个异步调用可能造成数据模型的修改
    • 事件回调
    • Timer的回调
    • Ajax回调

四、UI库

  • PrimeNG ：到目前为止最完善的开源免费UI组件库
  • NG-Zorro：来自阿里云的开源组件库
  • Jigsaw：来自ZTE中兴通讯的开源组件库
  • Clarity：来自Vmware的组件库
  • Angular-Material：Angular官方提供的组件库
  • Ionic ：专门为Angular设计的移动端组件库

五、参考资源推荐

  • ng2-admin
  • JHipster-后端基于SpringMVC
  • NiceFish

参考

35分钟掌握Angular核心概念 - Youbute

35分钟掌握Angular核心概念 - Bilibili

PPT

Angular核心概念的更多相关文章

  1. Angular核心概念之五---过滤器

    Filter:过滤器,用于在view中呈现数据时显示为另一种格式:过滤器的本质是一个函数,接收原始数据转换为新的格式进行输出: function(oldVal){ ... return newVal ...

  2. Angular 核心概念

    module(模块) 作用 通过模块对页面进行业务上的划分,根据不同的功能划分不同的模块. 将重复使用的指令或者过滤器之类的代码做成模块,方便复用 注意必须指定第二个参数,否则变成找到已经定义的模块 ...

  3. Angular 核心概念2

    自定义指令 指令增强了 HTML,提供额外的功能 内置的指令基本上已经可以满足我们的绝大多数需要了 少数情况下我们有一些特殊的需要,可以通过自定义指令的方式实现 普通指令 语法 <div hel ...

  4. 2 Angular 2 的核心概念

    一.组件(Components): 组件是构成 Angular 应用的基础和核心,它是一个模板的控制类,用于处理应用和逻辑页面的视图部分.组件知道如何渲染自己及配置依赖注入,并通过一些由属性和方法组成 ...

  5. Angularjs -- 核心概念

     angularjs旨在减轻使用AJAX开发应用程序的复杂度,使得程序的创建.測试.扩展和维护变得easy.以下是angularjs中的一些核心概念. 1. client模板      多页面的应用通 ...

  6. 第214天:Angular 基础概念

    一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...

  7. 领域驱动设计（DDD）部分核心概念的个人理解

    领域驱动设计(DDD)是一种基于模型驱动的软件设计方式.它以领域为核心,分析领域中的问题,通过建立一个领域模型来有效的解决领域中的核心的复杂问题.Eric Ivans为领域驱动设计提出了大量的最佳实践 ...

  8. Javascript本质第一篇：核心概念

    很多人在使用Javascript之前都至少使用过C++.C#或Java,面向对象的编程思想已经根深蒂固,恰好Javascript在语法上借鉴了Java,虽然方便了Javascript的入门,但要深入理 ...

  9. [程序设计语言]-[核心概念]-02:名字、作用域和约束(Bindings)

    本系列导航 本系列其他文章目录请戳这里. 1.名字.约束时间(Binding Time) 在本篇博文开始前先介绍两个约定:第一个是“对象”,除非在介绍面向对象语言时,本系列中出现的对象均是指任何可以有 ...

随机推荐

  1. 以太网EMC(浪涌）中心抽头方案（节约空间）

  2. 安装ESLint

    安装ESLint ESLint是静态代码检查工具,配合TypeScript使用可以帮助检查TypeScript的语法和代码风格. 添加ESLint到当前工程,yarn add -D eslint. 使 ...

  3. 使用jenkins实现前端自动化打包部署（Linux版本）

    我们这边好多小组觉得每次测试人员叫我们开发打包部署到某某个测试环境人工操作比较麻烦,因为他们想做到只专注于开发,不管这些琐碎的事.于是有个组长问我前端能不能用Jenkins去执行这一个固定的流程,因为 ...

  4. CSS自定义属性 —— 别说你懂CSS相对单位

    前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...

  5. 顺序、随机IO和Java多种读写文件性能对比

    概述 对于磁盘的读写分为两种模式,顺序IO和随机IO. 随机IO存在一个寻址的过程,所以效率比较低.而顺序IO,相当于有一个物理索引,在读取的时候不需要寻找地址,效率很高. 基本流程 总体结构 我们编 ...

  6. 用反射实现JavaBean和Map之间的转换

    学习内容: 需求 由于JavaBean结构与Map类似,我们可以把JavaBean与Map进行转换 代码如下: package com.yy; import java.beans.BeanInfo; ...

  7. 关于表达式&& 和 || 有多项的时候的取值

    && 表达式只有两项的时候,如果表达式为false, 返回为false 的那一个 ,为true的时候    返回最后一个值 ||  只有两项的时候,返回为true 的那一个;都为fal ...

  8. uni-app中实现左侧导航栏效果

    HTML: 1 <view class="list"> 2 <!-- 一级 --> 3 <scroll-view class="list-l ...

  9. Python入门-迭代器和生成器

    迭代演示 # 传统数据生成缺陷演示,编号操作未全部使用,会占用内存 #合适的做法,是需要的时候再生产,而不是全部生成好了再用 def generator(maxnum): print("[代 ...

  10. Java实现单链表的逆序打印

    思路1:可以将链表进行反转,然后进行数据的输出即可,单链表反转地址如下https://blog.csdn.net/Kevinnsm/article/details/113763272 这个思路1肯定有 ...