什么是AngularJS?

AngularJS是一个把HTML(视图)绑定到JavaScript对象(模型)上的框架。当模型改变时,页面也能自动随之更新,反之亦然。当某个域的内容发生变化时,与之关联的模型也能更新。正因为Angular处理了所有的中间代码,所以你不用像jQuery那样,手动更新HTML或者事件监听。事实上,这里没有任何一个例子使用到了jQuery!

几大特性(可以像android一样理解为四大组件的这种特性):

特性一:双向的数据绑定

个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM,传统来说,当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面,model变化驱动了DOM中元素变化,另一方面,DOM元素的变化也会影响到Model。这个在用户互动中更加复杂,因为开发人员需要处理和解析这些互动,然后融合到一个model中,并且更新View;angularJS实现的双向数据绑定能够同步DOM和Model

特性二:模板

官方文档的上的解释是:A module is a collection of services, directives, controllers, filters, and configuration information;看到了吧,是个集合;这个模板其实就是个扩充了的html,只是这里面有很多对html的处理操作,包含了很多帮助你映射model到view的内容。引用模板是通过ng-app指令来实现的,把当前网页声明为angularJS应用,然后进行后面的操作!

特性三:MVC

Model

model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes,使用 proxy对象封装或者使用特别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特 性,这种方法使得我们更少使用应用的原型。

ViewModel

viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。

viewmodel是$scope的对象,只存在于AnguarJS的应用中。$scope只是一个简单的js对象,这个对象使用简单的API来侦测和广播状态变化。

Controller

controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。

特性四:服务和依赖注入

特性五:指令(Directives)

指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。看个例子:

myModule.directive('myComponent', function(mySharedService) {

    return {

        restrict: 'E',

        controller: function($scope, $attrs, mySharedService) {

            $scope.$on('handleBroadcast', function() {

                $scope.message = 'Directive: ' + mySharedService.message;

            });

        },

        replace: true,

        template: '<input>'

    };

});

然后,你可以使用这个自定义的directive来使用:

<my-component ng-model="message"></my-component>

控制器controllers

尽管控制器看起来并没有起到什么控制的作用,但是它在这里起到了至关重要的作用。通过给定我们数据模型的语境,控制器允许我们建立模型和视图之间的数据绑定。我们是这样把表现层,数据和逻辑部件联系在一起的:

function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S."},
{"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet."},
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet."}
];
}

待续

AngularJS 从零开始学习(一)的更多相关文章

  1. ASP.NET从零开始学习EF的增删改查

           ASP.NET从零开始学习EF的增删改查           最近辞职了,但是离真正的离职还有一段时间,趁着这段空档期,总想着写些东西,想来想去,也不是很明确到底想写个啥,但是闲着也是够 ...

  2. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  3. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  4. 从零开始学习jQuery (三) 管理jQuery包装集

    本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...

  5. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  6. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  7. 从零开始学习jQuery(转)

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

  8. 从零开始学习Hadoop--前言

    Hadoop是最著名使用最广泛的分布式大数据处理框架,它是用Java开发的. 这本书有一个明确的目标:只要有一台能上网的计算机,就可以让读者在最短的时间内,学会Hadoop的初级开发.所以,这本书只讲 ...

  9. 从零开始学习jQuery (一) 开天辟地入门篇

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuer ...

随机推荐

  1. Java I/O 操作的一些基本知识

    1.文件类:File ,也是唯一的单独的文件类.可以对文件进行操作.其方法有:exists(),delete(),isDirectory(),createNewFile(),getName(),get ...

  2. 【卷一】正则四 |> 练习

    参考:<Python核心编程(3rd)>—P39 1-1  识别后续的字符串: "bat", "bit", "but" &quo ...

  3. id和instancetype的异同

    相同点: 都可以作为方法返回值类型 在initWithName:方法中是一样的,例如: - (id)initWithName:(NSString *)name; - (instancetype)ini ...

  4. swift中JSon数据的处理

    import UIKit class MainTabBarViewController: UITabBarController { override func viewDidLoad() { supe ...

  5. 3. 编写Java应用程序,定义Animal类,此类中有动物的属性:名称 name,腿的数量legs,统计动物的数量 count;方法:设置动物腿数量的方法 void setLegs(),获得腿数量的方法 getLegs(),设置动物名称的方法 setKind(),获得动物名称的方法 getKind(),获得动物数量的方法 getCount()。定义Fish类,是Animal类的子类,统计鱼的数量

    //Animal 类 package d922B; public class Animal { private String kind; private int legs,count; public ...

  6. GetWindowRect和GetClientRect的异同

    由于项目需要,需要学习CGridCtrl控件的使用,测试控件时发现了一个问题,我无法将控件放在对话框的制定位置. 该问题的原因很容易发现,其实就是GetWindowRec()函数和GetClientR ...

  7. 一般css样式开头公共部分

    @charset "utf-8"; /* CSS Document -- skyren */ body { font-family: "微软雅黑", Arial ...

  8. 部署php项目

    1.不写端口号,即127.0.0.1,其隐含一个默认端口号80 2.查看当前占用的端口号 3.nginx修改工作路径,nginx修改端口号 4.查看端口号是否可访问telnet命令 在dos界面输入命 ...

  9. selenium 百度登陆

    using System;using OpenQA.Selenium;using OpenQA.Selenium.Firefox;//引用命名空间using System.IO; using Syst ...

  10. cmstop框架中的js设计content.js

    控制cmstop框架中action的js 内容模块 找出当前页面的js的思路01先找显示页面的当前文件.在页面文件中-->找(编辑,删除)按钮-->找获取这个按钮的js选择器 02看加载的 ...