页面和路由定义优先设计

所有页面模板可以包含在一个文件中:

<script type="text/ng-template" id="index.html"></script>
<script type="text/ng-template" id="list.html"></script>
<script type="text/ng-template" id="content.html"></script>

使用路由系统需要导入ngRoute:

app.config(['$routeProvider', function($routeProvider){}]);

当你的操作想跳转到别的地址时,使用 $location.path=。

控制器和服务

理论上一个页面一个控制器。控制器里面定义模型数据值,可以直接渲染成页面结果,非常直接方便。

app.controller('index_controller', function($scope){
	$scope.some_model = value;
});

一般模型的数据来源都是服务器端,从服务器端请求数据的抽象包装成服务的样子。一些在多个控制器共享的全局数据也可以装进服务里。

app.factory('some_svr', function(){});

常用指令和服务

  1. ng-app
  2. ng-init 初始化一些模型值,调试或者配置的时候用;
  3. ng-repeat dom元素重复
  4. ng-show/ng-hide
  5. ng-class
  6. ng-click 控件点击行为
  7. ng-controller
  8. $location
  9. $http ajax接口
  10. $timeout 定时器
  11. $q 异步委托promise

单机测试

因为有promise,所以可以无服务器的时候用promise模拟服务器响应结果,做单机demo很方便。以后接入服务器只需要修改服务的内部代码,而不需要调整结构。

var df = $q.defer();
df.notify(value); //通知用户更新状态
df.resolve(value); //通知用户委托正常结束
df.reject(value); //通知用户委托异常结束

var p = df.promise;
p.then(fn1, fn2, fn3);

模拟的时候用$timeout延时后给调用者反馈结果。实际调用服务器接口的时候也可以通过promise将多个原子接口包装成为一个业务。