紧接着第一部分:

推荐阅读: 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. R语言学习笔记(二十一):字符串处理中的元字符(代码展示)

    元字符有自己的特殊含义 [ ]内的任意字符将被匹配 grep(pattern = "[wW]", x = states, value = T) grep(pattern = &qu ...

  2. [转]使用CallerMemberName简化InotifyPropertyChanged的实现

    原文:https://www.cnblogs.com/TianFang/p/3381484.html 在WPF中,当我们要使用MVVM的方式绑定一个普通对象的属性时,界面上往往需要获取到属性变更的通知 ...

  3. Java面向对象六大原则

    引用自百度知道: ——根据首字母快速记忆SOLID(固体,坚固的),具体请参考这里 1) Open-Close Principle(OCP),开-闭原则, 讲的是设计要对扩展有好的支持,而对修改要严格 ...

  4. css文字环绕

    html: <div class="wrap-div-topSpacer"></div> <div class="wrap-div" ...

  5. CF 348 D. Turtles

    D. Turtles 链接 题意: 给定一个N*M的棋盘,有些格子不能走,问有多少种从(1,1)到(N,M)的两条不相交路径. 分析: lGV定理. 定理:点集A={a1,a2,…an}A={a1,a ...

  6. JAVAWEB 遍历mysql结果集时 字段为0、false、null的问题

    foreach遍历查询mysql中的tinyint字段时一直查都是各种0,false,null 发现原来是实体类中的变量名和mysql中的列名不一样出的bug 所以说列名和实体类中的相关变量名是要保持 ...

  7. springmvc pager-taglib 分页,bootstrap样式

    注意: 嵌入到项目中时必须以带参形式访问: http://localhost:8081/DETECT-X/showConnLogsByPager.action?pageSize=5&pager ...

  8. Flutter - 下载别人的Flutter项目,本地编译不过

    如果直接下载了别人的Flutter项目,点击运行基本会不通过的,这是gradle版本差异造成的. 你需要修改android/gradle/wrapper/gradle-wrapper.properti ...

  9. EF6.0 code first感触

    随着EF技术的更新现在已经到了EF7.0时代,追随着技术的大潮去不断更新迭代自己,让自己知道自己还没有被技术抛弃. 今天看了下EF 6.0 codefist技术,简单,对于传统的DAL层省去了大量的人 ...

  10. linux增加硬盘 磁盘分区格式化及挂载

    nux磁盘分区格式化及挂载 意义: 给linux 系统服务器扩容, 加一块硬盘 实验环境: virtualBox虚拟软件  + centos6.5 第一步: 添加硬件 硬盘 (我这里用virtualB ...