紧接着第一部分:

推荐阅读: 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 学习 (二)的更多相关文章

  1. angularJS学习资源最全汇总

    基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...

  2. [整理]AngularJS学习资源

    https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...

  3. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  4. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  5. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  6. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  7. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  8. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  9. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  10. AngularJs学习笔记--Creating Services

    原版地址:http://docs.angularjs.org/guide/dev_guide.services.creating_services 虽然angular提供许多有用的service,在一 ...

随机推荐

  1. windows从0开始学golang--0--安装golang+git+自己写包

    windows下 1.安装golang 2.安装git(主要是go get 引用git上的包) 3.  使用默认安装生成的目录 pkg:包含包对象,编译好的库文件 src:包含 Go 源文件,注意:你 ...

  2. 数据结构与算法之链表(LinkedList)——简单实现

    这一定要mark一下.虽然链表的实现很简单,且本次只实现了一个方法.但关键的是例子:单向链表的反转.这是当年我去H公司面试时,面试官出的的题目,而当时竟然卡壳了.现在回想起来,还是自己的基本功不扎实, ...

  3. 20155211 课下测试ch12补做

    20155211 课下测试ch12补做 有关线程图,下面说法正确的是() A.图的原点表示没有任何线程完成一条指令的初始状态 B.向右向上是合法的转换 C.向左向下是合法的转换 D.对角线是合法的转换 ...

  4. 20155338《网络对抗技术》 Exp1 PC平台逆向破解

    20155338<网络对抗技术> Exp1 PC平台逆向破解 实践目标 1.实践的对象是一个名为pwn1的linux可执行文件. 2.该程序正常执行流程是:main调用foo函数,foo函 ...

  5. 【转】枚举enum学习小记

    原帖: http://hi.baidu.com/yuleishou/item/caacae872190031ec216272f 表示在vs2008下实验了一下,有些东西和原帖的还是不一样的,都贴在这里 ...

  6. python爬虫之Scrapy框架(CrawlSpider)

    提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬去进行实现的(Request模块回调) 方法二:基于CrawlSpi ...

  7. CSS中的height与line-height的区别

    <p class='text'>高与行高的区别</p> 那么我要想让这些字上下居中那么可以用宽度和行高控制 .text{ height:25px; line-height:25 ...

  8. css布局笔记(二)Flex

    flex Flex是"Flexible Box"的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可指定为Flex布局. .box{di ...

  9. 二级域名 cookie session 共享

    setcookie('login','12345',0,'/','.abc.com'); session_set_cookie_params(0,'/','.abc.com');session_sta ...

  10. vue 动画

    Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下几种常见的方式: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate ...