一、集成开发环境@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. .map() vs .forEach() vs for() 如何选择？

    访问原文地址 .map() vs .forEach() vs for() 笔者说,自己基本没怎么用过for()来遍历,主要是用.forEach(). 但是总是会被很多朋友说,这些人认为for()的速度 ...

  2. python实战----Todo清单续写

    添加分页功能 第一步:是对视图函数的改写,通过查询数据库数据,进行分页显示 # 修改清单显示的视图函数 @app.route('/list/') @app.route('/list/<int:p ...

  3. HTML5 Canvas学习之路（六）

    一个炫酷的计时器 在慕课网看到一个canvas的课,感觉很炫酷,就把它看完了,然后记下来.http://www.imooc.com/learn/133 第一步:绘制要显示的时间 拿小球来绘制具体的数字 ...

  4. 数组 indexOf()

    众所周知,indexOf()这个方法经常出现在字符串的使用中,也许是用来寻找字符串中某一字符在字符串中的位置,或者也可以用来寻找字符串中重复出现的字符有哪些.对于刚接触 JS 的我们来说,在对数组的操 ...

  5. golang开发:go并发的建议

    这个是前段时间看到Go语言的贡献者与布道师 Dave Cheney对Go并发的建议或者叫使用的陷阱(不是我自己的建议),结合自己最近几年对gorotine的使用,再回头看这几条建议,真的会茅塞顿开,觉 ...

  6. 麒麟系统开发笔记（三）：从Qt源码编译安装之编译安装Qt5.12

    前言   上一篇,是使用Qt提供的安装包安装的,有些场景需要使用到从源码编译的Qt,所以本篇如何在银河麒麟系统V4上编译Qt5.12源码.   银河麒麟V4版本   系统版本:   Qt源码下载    ...

  7. jupyter notebook 调用.py文件

    方法1.利用 %run xx.py 直接运行得出结果. 方法2:利用 %load xx.py 载入代码再点击Run运行,这种方法的好处是可以方便修改代码. 说明: Jupyter Notebook中以 ...

  8. Spring配置文件-Bean生命周期配置（init-method方法，destory-method方法）

    1.UserDaoImpl类 public class UserDaoImpl implements UserDao { public UserDaoImpl(){ System.out.printl ...

  9. 帝国CMS如何互相转移分表之间的数据

    最近发现帝国CMS文章数据添加太多到某一张分表中了,如图 这是极其不合理的,需要优化下,所以这篇文章要告诉大家的也就是如何互相转移分表之间的数据. 我现在要将:phome_ecms_news_data ...

  10. 为什么说TCP协议是可靠的？

    TCP 实现可靠通信的两种方式 我们都知道 IP 协议是"不太靠谱".因为 IP 协议是不可靠的,所以 IP 数据包可能在传输过程中发生错误或者丢失.这就意味着,TCP 协议不得不 ...