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

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

【这个程序】

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;
};
}]);

[AngularJS]Chapter 4 AngularJS程序案例分析的更多相关文章

  1. 基于AngularJs的单页面程序

    基于AngularJs的单页面程序 在Abpzero的后台管理系统是一个AngularJs的单页面程序.当你登陆后,系统会跳转到"ApplicationController",然后 ...

  2. Salesforce学习之路-developer篇(五)一文读懂Aura原理及实战案例分析

    1. 什么是Lightning Component框架? Lightning Component框架是一个UI框架,用于为移动和台式设备开发Web应用程序.这是一个单页面Web应用框架,用于为Ligh ...

  3. SQL性能优化案例分析

    这段时间做一个SQL性能优化的案例分析, 整理了一下过往的案例,发现一个比较有意思的,拿出来给大家分享. 这个项目是我在项目开展2期的时候才加入的, 之前一期是个金融内部信息门户, 里面有个功能是收集 ...

  4. 个人作业-Week2:案例分析

    截止时间:2016年9月25日24:00. 很多同学有误解,软件工程课是否就是理论课?或者是几个牛人拼命写代码,其他人打酱油的课?要不然就是学习一个程序语言,搞一个职业培训的课? 都不对, 软件工程有 ...

  5. 利用windbg查找dictionary导致IIS占CPU100%案例分析(一)

    一.背景 先说下windbg使用场景.各位coder在工作中或多或少都会遇到下面四种情况 1.本地代码好好的,放服务器上运行一段时间后,IIS服务突然占用 w3wp.exe CPU突然100% ,不得 ...

  6. 161220、使用Spring AOP实现MySQL数据库读写分离案例分析

    一.前言 分布式环境下数据库的读写分离策略是解决数据库读写性能瓶颈的一个关键解决方案,更是最大限度了提高了应用中读取 (Read)数据的速度和并发量. 在进行数据库读写分离的时候,我们首先要进行数据库 ...

  7. Java虚拟机类加载机制——案例分析

    转载: Java虚拟机类加载机制--案例分析   在<Java虚拟机类加载机制>一文中详细阐述了类加载的过程,并举了几个例子进行了简要分析,在文章的最后留了一个悬念给各位,这里来揭开这个悬 ...

  8. WebLogic集群案例分析

    WebLogic集群案例分析 2012年8月,某证券交易系统(采用Weblogic中间件),由于基金业务火爆,使系统压力太大,后台服务器频繁死机时,这时工程师们紧急调试系统及恢复操作,等完成这些操作花 ...

  9. mysql转ElasticSearch的案例分析

    前言 最近工作中在进行一些技术优化,为了减少对数据库的压力,对于只读操作,在程序与db之间加了一层-ElasticSearch.具体实现是db与es通过bin-log进行同步,保证数据一致性,代码调用 ...

随机推荐

  1. Ubuntu16.04安装Caffe

    一.安装ccmake ccmake和cmake的功能是一样的,但它很方便设置编译前的一些参数,安装只需从官网下载压缩包,解压,最后将解压得到的文件夹中的bin文件夹的路径加入PATH环境变量中即可. ...

  2. redis代码解析-事务

    redis 的事务相关的几个命令分别为 watch multi exec. watch 可以监控一个变量在事务开始执行之前是否有被修改.使用方式为: WATCH key [key ...] 在redi ...

  3. 韩国IT业是怎么走向国际我们须要学习什么

    无论从国土面积仍是从人口数量上来衡量.韩国都不能算是一个大国,而且自然资本十分缺乏,即是在这种情况下,韩国经过几十年的尽力开展变成技能大国,格外是在IT这种新经济范畴更是引人注目.并诞生了三星等国际级 ...

  4. 开源APM应用性能管理工具调研

    近期在设计一个DevOps平台.希望整合一个APM工具进来,由于APM既可用于性能測试也可用于运维性能监控,是典型的Dev+Ops产品. 商业的APM工具国内外已经有不少成熟产品了,而开源的好像不多见 ...

  5. MongoDB 2.6安装

    Workaround to install as a service You can manually install 2.6.0 as a service on Windows from an Ad ...

  6. angularjs1--动画

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  7. ROS-Solidworks转URDF

    前言:URDF建模很粗糙,而ros提供了支持sw转urdf的插件,可以使建模更精细化. 一.安装sw_urdf_exporter插件 sw_urdf_exporter插件网址:http://wiki. ...

  8. P1903 【模板】分块/带修改莫队(数颜色)

    题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2 ...

  9. android webview一些注意事项(持续更新)

    1.loadUrl() 的参数必须“http://”开头: 2.如果用到内部类获取页面内容,此类不能混淆: 3.2中情况保持不混淆需要将webview所在的包都保持不混淆,常规的保持类不混淆不生效: ...

  10. hdu 5375 Gray code 【 dp 】

    dp[i][j]表示第i位取j的时候取得的最大的分数 然后分s[i]是不是问号,s[i-1]是不是问号这大的四种情况讨论 #include<cstdio> #include<cstr ...