什么是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. 关于oracle数据库(9)

    内连接:从多张表中获取综合数据 inner join on select 表1.字段,表2.字段 from 表1 inner join 表2 on 关系; select 表1.*,表2.* from ...

  2. 配置mac自带的Apache服务器

    第一步: 484  cd /etc/apache2 备份httpd.conf文件,以防万一 486  sudo cp httpd.conf httpd.conf.bak 如果操作错误,可以通过 491 ...

  3. Linux相关

    可以用secureCRT远程连接Linux系统,进入tomcat,并且启动tomcat:bin/startup.sh 查看实时日志状态:tail -f logs/catalina.out

  4. c语言_头文件_stdlib

    简介 stdlib 头文件即standard library标准库头文件 stdlib 头文件里包含了C.C++语言的最常用的系统函数 该文件包含了C语言标准库函数的定义 stdlib.h里面定义了五 ...

  5. leetcode415---字符串大数相加

    Given two non-negative numbers num1 and num2 represented as string, return the sum of num1 and num2. ...

  6. Chapter 1 First Sight——33

    At that moment, the bell rang loudly, making me jump, and Edward Cullen was out of his seat. 在这个时候,铃 ...

  7. C陷阱与缺陷 第二章

    有关运算符优先级   1. "<<" 和 "+" data8 = data4H << 4 +data4L; 这里本意是让高四位的数据,左 ...

  8. C陷阱与缺陷 第一章

    1. 使用 e1=e2的赋值方式 作为 条件语句内部的判断,请使用显示的判断 不使用: if( x =y ) foo(); 而使用: ) foo(); 2. 注意编码规范,一定要在赋值号 “=”两边, ...

  9. docker镜像与容器概念

    本文用图文并茂的方式介绍了容器.镜像的区别和Docker每个命令后面的技术细节,能够很好的帮助读者深入理解Docker. 这篇文章希望能够帮助读者深入理解Docker的命令,还有容器(containe ...

  10. C++设计模式-Singleton单例模式

    template <typename T> class Singleton { public: template <typename... Args> static T* In ...