一、集成开发环境@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. stm32CubeMX+keil5好用还是stm32CubeID好用

    cubemx是图形配置软件, 可以节省往常配置IO口的时间, cubemx主推hal库, 它是生成keil工程的工具 cubemx生成的工程可以用keilv5编程软件来编辑... 用Cube mx定义 ...

  2. Numpy中重要的广播概念

    Numpy中重要的广播概念 广播:简单理解为用于不同大小数组的二元通用函数(加.减.乘等)的一组规则 广播的规则: 如果两个数组的维度数dim不相同,那么小维度数组的形状将会在左边补1 如果shape ...

  3. 顺利通过EMC实验（18）

  4. PWA 时代的移动端图片优化新思路

    图片通常是移动端网页中最占流量的资源.在很多类型的网站中(比如电商.社区),图片占据了网页的大部分空间.优化图片的质量和加载速度成为提高用户体验的重要途径. 传统方案的弊端 目前有一些被广泛应用的方案 ...

  5. 全面系统讲解CSS工作应用+面试一步搞定

    [TOC] 一.课程介绍 二.HTML基础强化 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下元素) * meta * title * style * link * ...

  6. Android中的Preference结构的设计与实现

    本文主要通过分析源代码来分享Preference的设计和实现方式,让开发者们在今后更加顺手地使用和扩展Preference类,或者在设计其他类似的界面和功能时可以提供参考帮助. Preference概 ...

  7. PL/SQL中的 not

    ELECT * FROM table_name WHERE column_name not like'%山%' 這時出現了column_name中為null值的情況也被剔掉了. 原因是:在SQL的表達 ...

  8. jQuery实现数字时钟

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

  9. Virtual Function（虚函数）in c++

    Virtual Function(虚函数)in c++ 用法: virtual void log() { std::cout << "hello world!" < ...

  10. 通过uniCloud白捡一个在线图库管理工具，可支持图床外链

    喜欢写文章的技术大佬们,应该都有一个自己的在线图片管理工具吧. 尤其是在写markdown时,为了让我们的文章"图文并茂",显得不那么枯燥,就经常需要在合适的地方插入一些关联性的图 ...