前边讲的都是基础。本章看看他们怎么合作的。

我们要建一个程序。一次一步。章末结束

【这个程序】

GutHub是一个简单的菜谱管理程序。功能是存好吃的的菜谱并提供步骤。这个程序包含:

  两列布局

  左边是导航

  允许你创建一个新的菜谱

  能浏览已经存在的菜谱

主页面在右半部分。如下图

【模型控制器和页面模板的关系】

页面模板作用:

  过滤数据

  定义样式

  定义用户交互

  展示模型数据

视图是模板和模型的组合

【模型】

一个recipe包含如下属性

  ID、名字、简短描述、做法指南、是不是特色菜、原料

如:

 {
"id": "1",
"title": "Cookies",
"description": "Delicious, crisp on the outside, chewy" +
" on the outside, oozing with chocolatey goodness " +
"cookies. The best kind",
"ingredients": [
The Model | 79
{
"amount": "1",
"amountUnits": "packet",
"ingredientName": "Chips Ahoy"
}
],
"instructions": "1. Go buy a packet of Chips Ahoy\n" +
"2. Heat it up in an oven\n" +
"3. Enjoy warm cookies\n" +
"4. Learn how to bake cookies from somewhere else"
}

【控制器、指令和服务】
服务

 // This file is app/scripts/services/services.js
var services = angular.module('guthub.services', ['ngResource']);
services.factory('Recipe', ['$resource',
function($resource) {
return $resource('/recipes/:id', {id: '@id'});
}]);
services.factory('MultiRecipeLoader', ['Recipe', '$q',
function(Recipe, $q) {
return function() {
var delay = $q.defer();
Recipe.query(function(recipes) {
delay.resolve(recipes);
}, function() {
delay.reject('Unable to fetch recipes');
});
return delay.promise;
};
}]);
services.factory('RecipeLoader', ['Recipe', '$route', '$q',
function(Recipe, $route, $q) {
return function() {
var delay = $q.defer();
Recipe.get({id: $route.current.params.recipeId}, function(recipe) {
delay.resolve(recipe);
}, function() {
delay.reject('Unable to fetch recipe ' + $route.current.params.recipeId);
});
return delay.promise;
};
}]);

最新文章

  1. SharePoint 2010 数据库xxx的事务日志已满
  2. 安卓开发_浅谈Service
  3. PG sys function
  4. uri中为什么本地文件file后面跟三个斜杠, http等协议跟两个斜杠?
  5. Have Fun with Numbers (大数)
  6. hdoj 1495 非常可乐【bfs隐式图】
  7. Linux下开启MySQL的远程连接
  8. jQuery的选择器中的通配符[id^='code']或[name^='code']
  9. ASP.NET MVC 阻止当前请求的视图页面缓存OutputCache
  10. 今天开始上Linux运维课。
  11. Spting +Spring MVC+spring date jsp +hibernate+jq
  12. 使用Spring Boot Actuator将指标导出到InfluxDB和Prometheus
  13. Individual P1: Summary
  14. LeetCode 169. Majority Element解题方法
  15. Maven —— scope 元素的值及其含义
  16. 在 Confluence 6 中连 Jira 的问题解决
  17. C# 其他的Url 文件的路径转化为二进制流
  18. ELK系统搭建流程
  19. Spring链接汇总
  20. 图形管线之旅 Part 1

热门文章

  1. 洛谷—— P3353 在你窗外闪耀的星星
  2. 《编程导论(Java)·7.4.4 String对象问题》
  3. Linux系统编程——多线程实现多任务
  4. android帧动画,移动位置,缩放,改变透明度等动画解说
  5. 大型Web 站点 Asp.net Session过期你怎么办
  6. UITableView属性 自己定义UITableViewCell
  7. 上机题目(中级)- 用小数形式输出指定符号出现的频率 (Java)
  8. 内存问题检测神器:Valgrind
  9. Statspack的使用
  10. ubuntu16.04 安装 docker