用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已经定义成了一个服务






发布了69 篇原创文章 · 获赞 45 · 访问量 13万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览