Angular Webapp常见的结构图

今天我们主要介绍一下Angular WebApp常见的结构图

---

---

AngularJS首先它会有一个根模块(root module)，它会直接绑定在我们的HTML文档上面。

然后这个模块也会引用一些第三方的其他模块，每个模块都会和这个根模块差不多，都分为几类web组件，这些组件在AngularJS文档上面被统称为web components，也就是所谓的Web组件。

它们的职能是不一样的，我们介绍的是四种重要的组件。服务service、指令directive、过滤器filter和控制器controller。

一个完整的Webapp中有个非常重要的模块，叫做路由模块(router module)，专门为了处理路由而设计的，路由模块就是监听浏览器的哈希值变化，然后加载不同HTML代码，这种HTML代码就被称之为视图。

当然光有页面肯定不行，我们还需要对应的处理逻辑，那么这个页面对应的逻辑放到控制器controller里面，控制器controller和视图view有个特殊的机制，叫做MVVM，称为双向数据绑定。

也就是说视图和控制器中模型是可以随时互相影响的。视图中一些数据发生变化的时候，会影响到控制器；
控制器数据发生变化的时候也会影响到视图；而这个绑定的东西就是$scope对象。

controller大部分情况下是和视图进行绑定的；directive也在一部分情况下和视图进行绑定，当然它的绑定也是通过$scope对象。