Angular入门系列（一） Angular的简介与开发模式总览

Angular简介

Angular 是一个 JavaScript 框架。适合用于快速开发基于web的单页面应用。和传统开发不同的是，angualr采用类似于模板引擎的开发方式

 

你需要会什么技术

1. html css网页布局
2. js es6，es6 学习请参照http://es6.ruanyifeng.com/，这是个很好的学习网站
3. typescript，这个是很多望而却步的东西，然后事实上它是基于es6的，多了一些东西。比如es本身对类这种东西支持的不好，而typescript弥补了这一不足，并且很多h5的游戏引擎都采用typescript开发，它的作用已经越来越重要，推荐个学习网站https://www.tslang.cn/docs/handbook/basic-types.html

 

Angular能干什么

1. 快速开发单页面应用（无刷新网页应用）
2. 大量避免重复性代码
3. 丰富的组件库提高开发效率

 

传统开发模式

传统采用js + html + css + jquery技术开发常规应用。

html：决定了页面的内容

css：决定的页面的样式

js+jquery：决定了页面的行为，比如点击会发生什么

 

举例

 通常采用dom操作函数，变更页面上的内容

（1）给文本框赋值

$(".txt").val("新值");

  (2) 绑定事件

$("#btn").click(function(){
    alert("333");
});

 

Angular 的开发模式

angular 的开发思想如下图所示

 

angular  类似于模板引擎，将数据（Model）和视图（View）按照一定的规则合并，渲染成最终能看到的页面。

和jsp做类比：这里的html定义相当于jsp，这里的js变量相当相当于request中的bean对象

angular主张自动渲染，更换页面显示内容无需编写dom操作代码，只需要变量赋值就行了

 

所以开发思路上有一些变化：

（1）暂时忘记jquery

（2）变更页面内容，不使用dom函数，而是通过变量赋值进行

 

为什么叫html 模板，而不是html呢，这是因为html模板= html + angualr语法

 

下一章讲解如何利用angualr 创建简单的工程，并通过示例讲解怎么通过变更变量刷新页面内容