如何深入理解Angular基础概念?
摘要:一、Angular概述 基于命令行的开发方式?	①hot reload	②编译工作	③集成了webpack打包工具	。。。。 angular.cn 中文angular.io 正
一、Angular概述
基于命令行的开发方式?
①hot reload
②编译工作
③集成了webpack打包工具
。。。。
angular.cn 中文
angular.io 正式官网
angular.cn/guide/styleguide 风格指南
1、what?
angular是一个Google推出的js框架,是以模块为基本单位,模块又可以包含组件、指令、过滤器。。
1.1 版本问题
angular angular2.0以后所有的版本统称为angular
(当前学习ng4.0)
angular.js angular1.* 统称为angular.js
(http://www.runoob.com/angularjs/angularjs-tutorial.html)
1.2 版本之间的区别
①新版本是有组件的概念的
②老版本是$scope和controller为主
③angular引入了rxjs
④angular采用ts(typescript是es6的超集,是由微软和谷歌) ts是一种强类型检查机制的语言
⑤angular可读性、提高了代码的复用率、维护成本变低。。。
2、where
可以使用支持angular的Ionic框架来实现移动端的开发,直接使用angular来实现pc端的开发
实现操作比较频繁的SPA
3、why
①遵循w3c所推出的webComponent标准(组件化)
②代码具有更好的可读性和可维护性、
③引入了更多的高效率的工具 ,比如rxjs\immutable.js。。。, 让代码的编译、部署更简单
④ts --》 健壮
4、how
用 Angular 扩展语法编写 HTML 模板,
用组件类管理这些模板,
用服务添加应用逻辑,
用模块打包发布组件与服务。
angular的开发整体框架,是有8大组成部分构成:
①组件:定义视图
②服务:将经常用到的数据和方法封装在一个类中;这能让你的代码更加模块化、可复用,而且高效
③依赖注入(DI): 服务的元数据提供了一些信息,Angular 要用这些信息来让组件可以通过使用该服务
④装饰器:用来描述当前这个类是一个什么样的类 @Component @NgModule @Pipe @Directive @Injectable
⑤模板:普通的 HTML 和指令与绑定标记(markup)组合起来
⑥指令:模板中的指令会提供程序逻辑
循环、条件判断。。。
⑦数据绑定:绑定标记会把你应用中的数据和 DOM 连接在一起。
①事件绑定让你的应用可以通过更新应用的数据来响应目标环境下的用户输入。
②属性绑定让你将从应用数据中计算出来的值插入到 HTML 中。
③双向数据绑定
⑧管道:转换要显示的值以增强用户体验
搭建环境的方式:
方式1:
①下载quickstart-master.zip压缩包
https://github.com/angular/quickstart download
或者 直接拷贝老师提供的压缩包
②解压缩 压缩包,进入对应的目录中
执行npm install 安装项目所需要用到的依赖
③npm start 启动开发服务器
方式2:
Angular CLI是一个命令行界面工具,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。
