AngularJs 学习 (二)
紧接着第一部分:
推荐阅读: http://adrianmejia.com/blog/2014/10/03/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/
源项目: git clone https://github.com/amejiarosario/todoAPIjs.git
首先介绍下AngularJS是一个由模型(Model)、视图(View)、控制器(Controller)组成
Model: 用来处理数据,包括兑取和设置数据,一般是指操作数据库。Model定义了应用层数据,它是独立于用户界面的,在AngularJS中,Model的应用非常简单,
可以理解为一个Model就是一个对象。
View: 在Web应用中,视图就是HTML网页,是用来展示Model数据的。在AngularJs中,数据与模板引擎相结合,在加上AngularJs的指令(Directives),从而构建了一个
丰富的HTML页面。
Controller: 控制器是用来操作Model中的数据的,在AngularJS应用中,控制器是通过controller()方法来创建JavaScript函数的。一个模块里面可能用多个模型和视图,控制器
就起到了链接模型和视图的作用。
页面跳转: 页面跳转就需要设计控制器,模板(视图),路由(Router)
其中Router由AngularJS中的$routeProvider, 这是AngularJS中的一个服务
$index: 这个是Angular自带的索引值,一般配合ng-repeat 使用
$http: $http是AngularJS的内置服务,通过他可以直接与后台进行服务器通信。$http知识简单地封装了浏览器原生地XMLHttpRequest对象。
$http服务是只能接收一个参数的函数。这个参数就是一个对象,包含了用来生成HTTP请求的配置内容;详情展示
基于$resource的工厂方法:
$http是一种快捷的网络请求服务,除此之外,AngularJS还提供了另外一个服务----$rescouce. $resouce对$http做了一层封装。用它来处理
ResetfulAPI会更加快捷。
$resource 已经封装好的方法:
{ 'get': {method:'GET'}, // 读取一条记录
'save': {method:'POST'}, // create record
'query': {method:'GET', isArray:true}, // get list all records
'remove': {method:'DELETE'}, // remove record
'delete': {method:'DELETE'} }; // same, remove record
上面的还缺少了一种方法就是update, 这个方法可以再$resource中进行添加
$resource('', null , { 'update': {method: 'PUT'}
通常这里进场会犯一个这样的错
$resource默认接收一个object类型的返回数据。如果不添加isArray:true,而返回数据却是一个array类型,则会报错Error: [$resource:badcfg]
解决:
重构一下$resource
var Videos = $resource('/videos', {}, {
save: {method: 'POST', isArray: true}
});
小tips:
跳转页面 $location.url('/')
AngularJs 学习 (二)的更多相关文章
- angularJS学习资源最全汇总
基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...
- [整理]AngularJS学习资源
https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
- AngularJs学习笔记--bootstrap
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...
- AngularJs学习笔记--html compiler
原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...
- AngularJs学习笔记--concepts(概念)
原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--Creating Services
原版地址:http://docs.angularjs.org/guide/dev_guide.services.creating_services 虽然angular提供许多有用的service,在一 ...
随机推荐
- redis未授权访问批量验证脚本编写[python]
漏洞简介 简单来说,redis是一个数据库.在默认的配置下,redis绑定在0.0.0.0:6379,也就是说,如果服务器有公网ip,可以通过访问其公网ip的6379端口来操作redis.最为致命的是 ...
- Keil C51编译报错error C141: syntax error
错误代码: typedef unsigned char uchar uchar KeyRowColumnScan() { GPIO_KEY = 0x0f; uchar key_value = ; // ...
- 20155236范晨歌_MSF基础应用
20155236范晨歌_MSF基础应用 20155236范晨歌_MSF基础应用 目录 概述 MS08-067漏洞攻击 MS11-050漏洞攻击 MS10-087漏洞攻击 辅助模块 概述 MSF的六种模 ...
- c++ 创建二叉树
#include <stdio.h> #include <stdlib.h> #include <string.h> #include <ctype.h> ...
- 洛谷 P1939 【模板】矩阵加速(数列)
题目描述 a[1]=a[2]=a[3]=1 a[x]=a[x-3]+a[x-1] (x>3) 求a数列的第n项对1000000007(10^9+7)取余的值. 输入输出格式 输入格式: 第一行一 ...
- 4569: [Scoi2016]萌萌哒
4569: [Scoi2016]萌萌哒 链接 分析: 每次给出的两个区间长度是一样的,对应位置的数字也是一样的,那么可以将两两对应的数字用并查集合并,设最后有$cnt$个不同的集合,答案就是$9\ti ...
- 洛咕 P3645 [APIO2015]雅加达的摩天楼
暴力连边可以每个bi向i+kdi连边权是k的边. 考虑这样的优化: 然后发现显然是不行的,因为可能还没有走到一个dog的建筑物就走了这个dog的边. 然后就有一个很妙的方法--建一个新的图,和原图分开 ...
- noip2017 TG 游记
嗨小朋友们大家好,还记得我是谁吗?我就是为GG代言的蒟蒻--xzz 今天呐我特别的要向HN的dalao们ZJ的巨佬们还有全国的神犇们问声好 为什么呢因为我们在2017年11月份来到了吔屎的长沙理工大学 ...
- Spring学习----- Spring配置文件xml文档的schema约束
1.配置文件示例. <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...
- ffmpeg 踩坑实录 添加实时水印(二)
一.背景介绍 最近领导要求做一个视频录制的相关项目.其中,需要对视频文件进行添加 实时时间水印.于是,我想到了使用之前的ffmpeg来做. 二.ffmpeg实际操作 首先把需要添加水印的视频文件,上传 ...