Angular核心概念
一、集成开发环境@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
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
参考
Angular核心概念的更多相关文章
- Angular核心概念之五---过滤器
Filter:过滤器,用于在view中呈现数据时显示为另一种格式:过滤器的本质是一个函数,接收原始数据转换为新的格式进行输出: function(oldVal){ ... return newVal ...
- Angular 核心概念
module(模块) 作用 通过模块对页面进行业务上的划分,根据不同的功能划分不同的模块. 将重复使用的指令或者过滤器之类的代码做成模块,方便复用 注意必须指定第二个参数,否则变成找到已经定义的模块 ...
- Angular 核心概念2
自定义指令 指令增强了 HTML,提供额外的功能 内置的指令基本上已经可以满足我们的绝大多数需要了 少数情况下我们有一些特殊的需要,可以通过自定义指令的方式实现 普通指令 语法 <div hel ...
- 2 Angular 2 的核心概念
一.组件(Components): 组件是构成 Angular 应用的基础和核心,它是一个模板的控制类,用于处理应用和逻辑页面的视图部分.组件知道如何渲染自己及配置依赖注入,并通过一些由属性和方法组成 ...
- Angularjs -- 核心概念
angularjs旨在减轻使用AJAX开发应用程序的复杂度,使得程序的创建.測试.扩展和维护变得easy.以下是angularjs中的一些核心概念. 1. client模板 多页面的应用通 ...
- 第214天:Angular 基础概念
一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...
- 领域驱动设计(DDD)部分核心概念的个人理解
领域驱动设计(DDD)是一种基于模型驱动的软件设计方式.它以领域为核心,分析领域中的问题,通过建立一个领域模型来有效的解决领域中的核心的复杂问题.Eric Ivans为领域驱动设计提出了大量的最佳实践 ...
- Javascript本质第一篇:核心概念
很多人在使用Javascript之前都至少使用过C++.C#或Java,面向对象的编程思想已经根深蒂固,恰好Javascript在语法上借鉴了Java,虽然方便了Javascript的入门,但要深入理 ...
- [程序设计语言]-[核心概念]-02:名字、作用域和约束(Bindings)
本系列导航 本系列其他文章目录请戳这里. 1.名字.约束时间(Binding Time) 在本篇博文开始前先介绍两个约定:第一个是“对象”,除非在介绍面向对象语言时,本系列中出现的对象均是指任何可以有 ...
随机推荐
- stm32CubeMX+keil5好用还是stm32CubeID好用
cubemx是图形配置软件, 可以节省往常配置IO口的时间, cubemx主推hal库, 它是生成keil工程的工具 cubemx生成的工程可以用keilv5编程软件来编辑... 用Cube mx定义 ...
- Numpy中重要的广播概念
Numpy中重要的广播概念 广播:简单理解为用于不同大小数组的二元通用函数(加.减.乘等)的一组规则 广播的规则: 如果两个数组的维度数dim不相同,那么小维度数组的形状将会在左边补1 如果shape ...
- 顺利通过EMC实验(18)
- PWA 时代的移动端图片优化新思路
图片通常是移动端网页中最占流量的资源.在很多类型的网站中(比如电商.社区),图片占据了网页的大部分空间.优化图片的质量和加载速度成为提高用户体验的重要途径. 传统方案的弊端 目前有一些被广泛应用的方案 ...
- 全面系统讲解CSS工作应用+面试一步搞定
[TOC] 一.课程介绍 二.HTML基础强化 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下元素) * meta * title * style * link * ...
- Android中的Preference结构的设计与实现
本文主要通过分析源代码来分享Preference的设计和实现方式,让开发者们在今后更加顺手地使用和扩展Preference类,或者在设计其他类似的界面和功能时可以提供参考帮助. Preference概 ...
- PL/SQL中的 not
ELECT * FROM table_name WHERE column_name not like'%山%' 這時出現了column_name中為null值的情況也被剔掉了. 原因是:在SQL的表達 ...
- jQuery实现数字时钟
运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...
- Virtual Function(虚函数)in c++
Virtual Function(虚函数)in c++ 用法: virtual void log() { std::cout << "hello world!" < ...
- 通过uniCloud白捡一个在线图库管理工具,可支持图床外链
喜欢写文章的技术大佬们,应该都有一个自己的在线图片管理工具吧. 尤其是在写markdown时,为了让我们的文章"图文并茂",显得不那么枯燥,就经常需要在合适的地方插入一些关联性的图 ...