用AngularJS开发下一代应用(学习笔记)

核心特性:MVC, 模块化, 自动化双向绑定数据,语义化标签,依赖注入

MVC 1970年smalltalk

MVC核心理念:你应该把你管理数据的代码(model).应用逻辑代码(controller).向用户展示的代码(view)清晰的分离开

数据绑定:声明UI中某个部分需要映射到某个JS属性,然后让他们自己去同步

依赖注入:(自动解析依赖关系)只是简单的获取他们所需要的东西,而不需要创建那些它们所以来的东西,遵循了(Law of Demeter)也叫最少知识原则,意味着,我们不应该去操心任何其他东西,例如$scope是如何创建的,以及哪里能找到这个对象

ng-repeat的意思是,对于数组中每一个元素,都把<div>中的DOM结构复制一遍,包括DIV本身。

{{}}是单向的传递数据

<input ng-model=‘item.quantity‘>定义ng-model将会在输入框和item.quantity的值之间创建数据绑定关系,

推荐使用google的CDN这样,大家访问不同网站,只需要下载一遍

如果有现有的WEB使用其他的技术(java,rails)管理DOM,那么可以将ng-app放入DIV之类的元素中

非入侵式javascript---在HTML中使用click,mousedown以及其他内联的事件处理器是一种非常糟糕的处理方式

通常事件处理器引用全局命名空间中的函数

事件处理器会绑定数据结构和行为

使用$watch监控数据模型的变化

$watch(watchFn, watchAction, deepWatch)

watchFn带有angular表达式或者函数的字符串,它返回被监控的数据模型的当前值

watchAction,函数或者表达式,watchFn变化时被调用

deepWatch,如果你要监控数组

$watch函数返回一个函数,可以使用这个函数来注销监控器

Angular调试插件Batarang(chrome)

XHR的缺点:其他控制器也需要从服务器获取数据,那么只能再将这一段代码再重写一遍

$location用来和浏览器的地址栏进行交互

$route服务,用来根据URL地址的变化切换视图

还有$http服务,用来和服务器进行交互

Angular内置的服务以$符号打头,你可以给你的服务随意起名字,但是,最好不要以$打头,以免引起命名冲突

provider(name,Object OR constructor() )

1.如何传递了一个object作为参数,那么这个object对象必须带有一个名为$get的函数,这个函数需要返回服务的名称

2.传递构造函数,调用构造函数会返回服务的实例对象

factory( name, $get :Function() )

可以看做provider( name, { $get:Function() } )的形式

创建一个模型来支撑我们的购物视图

var shoppingModule = angular.module(‘ShoppingModule‘,[]);

设置好服务工厂,用来创建我们的ITEM接口,以便访问数据库

shoppongModule.factory(‘Items‘, function(){

var item = {};

items.query=function(){

//to do

return [

{title: ‘Paint pots‘, description: ‘Pots full of paint‘, price: 3.95},

{title: ‘Polka dots‘, description: ‘Dots with polka‘, price: 2.95},

{title: ‘Pebbles‘, description: ‘Just little rocks‘, price: 6.95}

};

return items;

});

Items已经定义成了一个服务

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-05 10:53:11

用AngularJS开发下一代应用(学习笔记)的相关文章

AngularJS开发下一代Web应用笔记(一)

一.写在最前 AngularJS是Google推出的一款Web应用开发框架.它提供了一系列兼容性良好并且可扩展的服务,包括数据绑定.DOM操作.MVC设计模式和模块加载等. 现在网上JS框架茫茫多,真不知道是到底要学习什么框架,学习了这个框架,说不定还没用在项目,又有更好的js框架出来了.前端就是不断折腾新东西,生命在于折腾~ 是的,这么多的前端框架,是不是真的都要学习??答案当然不是,看所要完成的项目.这是带我的前端前辈告诉我,具体使用什么框架还是不用框架, 看项目需求,一切都以按时按质完成作

[在读]用AngularJS开发下一代Web应用

内容简介 AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC.双向数据绑定.指令和语义化标签.模块化工具.依赖注入.HTML模板,以及对常用工具的封装,例如$http.$cookies.$location等.AngularJS框架的体积非常小,但是设计理念和功能却非常强大,值得前端开发者深入学习. <用AngularJS开发下一代Web应用>对AngularJS框架的核心特性做了全面的介绍,包括常用的开发工具和开发环境.<用AngularJS开发下一代Web应

ASP.Net开发基础温故知新学习笔记

申明:本文是学习2014版ASP.Net视频教程的学习笔记,仅供本人复习之用,也没有发布到博客园首页. 一.一般处理程序基础 (1)表单提交注意点: ①GET通过URL,POST通过报文体: ②需在HTML中为表单元素设置name: ③元素id是给Dom用的,name才是提交给服务器用的: (2)请求处理响应模型: ①浏览器发出访问请求→②服务器处理访问请求并返回HTML→③浏览器解析HTML并显示页面 (3)GET与POST的区别:(★★★→重点) ①GET通过URL传值,而POST通过HTT

用angularjs开发下一代web应用(二):angularjs应用骨架(一)

1.调用angularjs 1>加载angularjs库 可以从google的CDN(内容分发网络)中加载,获取快,并且可以在多个应用之间缓存脚本库(建议使用这种方式,但是中国的特殊国情,不能用这种方式): <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> 本地主机方式. 2>使用ng-app申明angular的边界

用angularjs开发下一代web应用(二):angularjs应用骨架(二)

1.浅谈非入侵式JavaScript <div ng-click="doSomething()">...</div>这些指令和原来的事件处理器有以下不同之处: 在所有浏览器中具有相同的行为.Angular将会帮你屏蔽差异性. 不会在全局命名空间中进行操作.你所指定的表达式只能访问元素控制器作用域范围内的函数和数据. 2.列表.表格以及其他迭代型元素         ng-repeat可能是最有用的Angular指令了,它可以根据集合中的项目一次创建一组元素的多份

《Spring3.X企业应用开发实战》学习笔记--DAO和事务

本篇是"<Spring3.X企业应用开发实战>,陈雄华 林开雄著,电子工业出版社,2012.2出版"的学习笔记的第二篇,关于DAO和事务. 本篇从DAO操作,以及事务处理的基本知识谈起,介绍事务本身,以及Spring如何通过注解实现事务. DAO 近几年持久化技术领域异常喧嚣,各种框架如雨后春笋般地冒出,Sun也连接不断的颁布了几个持久化规范. Spring对多个持久化技术提供了持久化支持,包括Hibernate,iBatis,JDO,JPA,TopLink,另外,还通过S

用angularjs开发下一代web应用(一):angularjs简介

1.客户端模板 与普通的web方式及ajax方式不同, 在angular中,模板和数据都会发送到浏览器中,然后在客户端进行装配.这样一来,服务器的角色就变成了仅仅为这些模板提供一些静态资源,然后为这些模板提供所需的正确数据.{{ }}:单向的数据绑定 2.MVC 在angular应用中,视图就是DOM({{ }}),控制器就是js类(ng-controller),而模型数据则被存储在对象的属性中($scope:将数据绑定到UI的元素上). 3.数据绑定 仅仅声明UI中的某部分需要映射到某个js属

用AngularJS开发下一代Web应用

原文:https://github.com/edagarli/AngularJSWeb 书中源代码:https://github.com/shyamseshadri/angularjs-book 用AngularJS开发下一代Web应用

蓝鸥Unity开发基础——类型转换学习笔记

蓝鸥Unity开发基础--类型转换学习笔记 类型转换包括:自动转换+强制转换 一.自动转换 自动转换:由系统自动完成,不会导致数据精度丢失,只能从低精度类型转换高精度类型. 二.强制转换 强制转换:从高精度转向低精度类型需要强制转换,会丢失精度,需要显式地进行转换. 源代码: using System; namespace Lesson07{    class MainClass    {        public static void Main (string[] args)       

《Spring3.X企业应用开发实战》学习笔记--SpringMVC

本篇是<Spring3.X企业应用开发实战>,陈雄华 林开雄著,电子工业出版社,2012.2出版"的学习笔记的第三篇,关于SpringMVC. Spring MVC 3.0和早期版本相比拥有了一个质的飞跃,全面支持REST风格的WEB编程.完全注解驱动.处理方法签名非常灵活.处理方法不依赖于Servlet API等. 由于Spring MVC框架在后头做了非常多的隐性工作,所以想深入掌握Spring MVC 3.0并非易事,本章我们在学习Spring MVC的各项功能时,还深入其内部