一、集成开发环境@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. asp.net 可视化操作（二）——Sql数据库连接及简单查询功能的实现

    目录 连接数据库 利用repeater控件实现数据显示 查询功能 页面CSS美化 数据插入.更新-- 连接数据库 添加test.aspx 添加控件SqlDataSource,选择配置数据源 选择新建连 ...

  2. 复习——高级语法对象原型，es5新增语法

    今天的开始进入了js的高级语法 我马上也要复习完了,之前学到闭包递归,就回去复习去了,复都复习这么久而且,复习的过程真的比学知识的过程难熬的多,只不过终于要复习完了,再来点es6的新语法马上就要步入v ...

  3. H5的audio在ios系统的微信上不能自动播放的问题

    前几天有个需求,要在H5页面中添加背景音乐,本以为很easy,却也踩了一些坑,废话不多说,进入正题: 撸完代码测试的时候才发现在安卓手机上背景音乐可以正常播放,但在iphone里的微信和safari中 ...

  4. Linux 0.11源码阅读笔记-中断过程

    Linux 0.11源码阅读笔记-中断过程 是什么中断 中断发生时,计算机会停止当前运行的程序,转而执行中断处理程序,然后再返回原被中断的程序继续运行.中断包括硬件中断和软件中断,硬中断是由外设自动产 ...

  5. Paxos算法的一个简单小故事

    一.Paxos是什么? Paxos,它是一个基于消息传递的一致性算法,Leslie Lamport在1990年提出,近几年被广泛应用于分布式计算中,Google的Chubby,Apache的Zooke ...

  6. iframe引入微信公众号文章

    微信在文章页面设置了响应头""frame-ancestors 'self'"阻止了外部页面将其嵌套的行为,文章的图片也设置了防盗链的功能,这就导致了直接在iframe中引 ...

  7. JavaScript实现指定格式字符串表单校验

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  8. JS核心知识点梳理——闭包

    闭包 闭包这个东西咋说呢,不同的程序员,不同的资料都有不同的解释,你可以把它理解成一个函数,也可以把它理解函数+执行环境. 我们这里不纠结闭包的定义,而是关注闭包的现象,应用,再结合相关面试题去攻克它 ...

  9. C++STL 中的数值算法(iota、accumulate、adjacent_difference、inner_product、partial_sum）

    以下算法均包含在头文件 numeric 中 ##1.iota 该函数可以把一个范围内的序列从给定的初始值开始累加 先看用法. 例: 假设我需要一个长度为10,从5开始递增的序列 vector<i ...

  10. hashlib加密模块、logging日志模块

    hashlib模块 加密:将明文数据通过一系列算法变成密文数据 目的: 就是为了数据的安全 基本使用 基本使用 import hashlib # 1.先确定算法类型(md5普遍使用) md5 = ha ...