[AngularJS]Chapter 4 AngularJS程序案例分析
2024-08-24 11:32:25
前边讲的都是基础。本章看看他们怎么合作的。
我们要建一个程序。一次一步。章末结束
【这个程序】
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;
};
}]);
最新文章
- SharePoint 2010 数据库xxx的事务日志已满
- 安卓开发_浅谈Service
- PG sys function
- uri中为什么本地文件file后面跟三个斜杠, http等协议跟两个斜杠?
- Have Fun with Numbers (大数)
- hdoj 1495 非常可乐【bfs隐式图】
- Linux下开启MySQL的远程连接
- jQuery的选择器中的通配符[id^='code']或[name^='code']
- ASP.NET MVC 阻止当前请求的视图页面缓存OutputCache
- 今天开始上Linux运维课。
- Spting +Spring MVC+spring date jsp +hibernate+jq
- 使用Spring Boot Actuator将指标导出到InfluxDB和Prometheus
- Individual P1: Summary
- LeetCode 169. Majority Element解题方法
- Maven —— scope 元素的值及其含义
- 在 Confluence 6 中连 Jira 的问题解决
- C# 其他的Url 文件的路径转化为二进制流
- ELK系统搭建流程
- Spring链接汇总
- 图形管线之旅 Part 1
热门文章
- 洛谷—— P3353 在你窗外闪耀的星星
- 《编程导论(Java)&;#183;7.4.4 String对象问题》
- Linux系统编程——多线程实现多任务
- android帧动画,移动位置,缩放,改变透明度等动画解说
- 大型Web 站点 Asp.net Session过期你怎么办
- UITableView属性 自己定义UITableViewCell
- 上机题目(中级)- 用小数形式输出指定符号出现的频率 (Java)
- 内存问题检测神器:Valgrind
- Statspack的使用
- ubuntu16.04 安装 docker