一、集成开发环境@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. 【转自百度fex】fex-team/interview-questions

    fex-team/interview-questions 注意 目前发现有其他人以 FEX 团队名义进行招聘,发出的邮箱皆为私人邮箱. 为防止在投递简历出现误会,在此提醒各位注意: FEX 团队没有以 ...

  2. React系列——websocket群聊系统在react的实现

    前奏 这篇文章仅对不熟悉在react中使用socket.io的人.以及websocket入门者有帮助. 下面这个动态图展示的聊天系统是用react+express+websocket搭建的,很模糊吧, ...

  3. ES6实战：新数字方法

    本文翻译自:https://www.sitepoint.com/es6... 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 本文介绍了ES6中全新的数字方 ...

  4. mysql数据乱码

    更改数据库安装时的字符编码.打开mysql安装目录,找到my.ini文件,通过使用记事本的方式打开,将这里面的default-character-set=latin1修改成gbk,注意这里面有两处需要 ...

  5. 关于Symbol.iterator 学习笔记

    1.可以部署在对象上的一个遍历器 2. 遍历器是一个函数,需要返回一个含有一个next 方法的对象 const likeArray = {0:'a', 1: 'b', 2: 'c',3: 'd'. l ...

  6. java生成多级菜单树

    使用java实现一个多级菜单树结构 先上数据库 ps_pid字段很重要,是父级菜单的id Menu类 Menu类要新增一个字段,用来存放子菜单 /** * 子菜单列表 */ private List& ...

  7. 基于Apache Hudi和Debezium构建CDC入湖管道

    从 Hudi v0.10.0 开始,我们很高兴地宣布推出适用于 Deltastreamer 的 Debezium 源,它提供从 Postgres 和 MySQL 数据库到数据湖的变更捕获数据 (CDC ...

  8. 控制反转 IOC 理论推导

    控制反转 IOC 理论推导 按照我们传统的开发,我们会先去 dao 层创建一个接口,在接口中定义方法. public interface UserDao { void getUser(); } 然后再 ...

  9. php进制转换

    前端html页面代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  10. 如何为我的VUE项目编写高效的单元测试--Jest

    Unit Testing(单元测试)--Jest 一个完整的测试程序通常由几种不同的测试组合而成,比如end to end(E2E)测试,有时还包括整体测试.简要测试和单元测试.这里要介绍的是Vue中 ...