AugularJS基础概念

目录：建议在根目录中只放置index.html一个文件，然后根据需要创建scripts、styles、views等目录，在scripts目录下，首先会存放app.js文件，然后在之下又可以创建多个子目录，如：controllers、directives、filters、services、vendor等，在其中分门别类地存放不同的内容。并且，随着你为应用创建更多内容，也许会增加更多子目录来存放各种文件。

文件：每个文件中应该只有一件事物，这件事物可能会是控件、指令、过滤器或者服务等等。这会生成比较小但更专注的文件。也有利于更好地进行测试。

模块：首先在app.js中定义和配置所有模块，如：

angular.module('yourAppName', ['yourAppDep']);
angular.module('yourAppDep');

然后在模块中定义控件、服务等，如：

angular.module('yourAppDep').controller('MyCtrl', function () {
      // ...
});

依赖关系：一般来说，服务、控件、指令等应该拥有尽可能少的依赖关系，这是非常好的软件开发实践，会有助于测试。API应该分层。控件尤其不能综合多种不同级别的抽象。

指令：对指令使用app专用的前缀，这有助于避免与第三方的组件重名。例如下面的代码中就用“btla”作为前缀：

angular.module('yourAppDep').directive('btlaControlPanel', function () {
     // ...
});

服务：你可以使用下面的方式声明服务：

angular.module('yourAppDep').service('MyCtrl', function () {
     // ...
});

模型：AngularJS作为JavaScript框架，其独到之处就在于让你可以完全掌控模型层。这是AngularJS的强大之处，因为应用程序的核心是你的数据，而各种应用之间的数据又有很大区别。所以Brian Ford强烈建议要仔细考虑使用和中数据，以及将会如何存储数据。

控制器：建议控制器以“Ctrl”开头，如：

angular.module('yourAppDep').controller('MyCtrl', function () {
     // ...
});

Model模型:

• 业务数据.通过$scope显露给视图View

View视图:

• 用户界面层
• 数据绑定模型
  
• 调用控制器的功能。
• 使用声明指令directives以便重用代码

Controller控制器

• 将视图和模型胶合一起
  
• 提供功能方法
  
• 使用服务，可重复使用的逻辑

除了上面MVC模型以外，还提供以下组件(有些类似安卓)：

服务组件

• 服务是可重用的业务逻辑组件
  
• 可测试性
  
• 能作为单身对象创建
  
• 使用AngularJS依赖注入的注射依赖组件
  
• 创建服的务作为一个模块的一部分
  
• 一个模块可以依赖于另一个模块
  

AngularJS提供的标准服务有以下：

• $http：用于处理 XMLHttpRequest 
  
• $location：提供当前URL的信息
  
• $q： 异步请求使用，promise/deferred模块
  
• $routeProvider：配置路由
  
• $log：日志服务
  

 

directives标签指令：

类似JSP中的标签JSTL等或Struts的标签。能够增强Html的行为能力。指令directive有四种：

• E - Element元素名称: <my-directive></my-directive>
  
• A - Attribute属性: <div my-directive="exp"> </div>
  
• C - Class: <div class="my-directive: exp;"></div>
  
• M - Comment注解: <!-- directive: my-directive exp -->

内建标准的指令有：

• ng-app (A) 用来启动AngularJS
• ng-controller (A, C) 绑定控制器
  
• ng-model (A, C) 绑定模型
  
• ng-change (E, A)
  
• ng-click (A, C)
  
• ng-repeat (A, C)