什么是AngularJS

AngularJS是一款优秀的前端JS框架，是Google多款产品之一，简称ng。

ng有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

它可以让前端开发人员将获取数据、数据模型和视图隔离进行开发。

Angular包括什么

ng包括指令、服务、筛选器和一些常用的类库，其中指令是最为让人炫目的功能，它为增强HTML标签的互动性提供了极大的便利。

ng有一些非常棒的特性，包括控制器、指令、服务、路由、筛选器。

五大核心

  • MVVM —— 吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。

  • 依赖注入 —— AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。

  • 双向数据绑定 —— 实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。

  • 模板 —— 在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。

  • 指令 —— 可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。

AngularJS的神奇

在ng中，双向绑定和指令是最为神奇的武器。

双向绑定让我们不用再考虑数据的同步问题，变量是否被同步，页面元素显示是否正确，这些由于双向绑定和指令的配合，已经确实从原来的Dom优先转向了数据优先。

而指令更是让html标签如虎添翼，极大的增强的html标签的交互能力，而自定义指令则给了我们造物主的能力，可以开发出更具语意的标签。

运行环境

每个例子均要通过手工编码，才能知道其中潜在的问题。

开发环境是：win7(64)、VS2013、ng1.3

运行环境是：win7(64)、360极速浏览器。

因本项目主要是学习前台框架，我将所有代码再jsrun.cn上已经备份一份，可以直接访问，查看效果。

来个例子吧

让我们从例子里来看下ng的应用，在逐步完善的过程中学习到新的东西。

<!DOCTYPE html>

<!--一个页面仅能有一个ng-app -->

<html ng-app="App">

<head>

    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>

    <script type="text/javascript">

        var App = angular.module("App", []);

        App.controller("ctrl", function ($scope) {

            //初始化为空

            $scope.name = '';

        });

    </script>

</head>

    <body >

        <!--一个页面可以有多个ng-controller-->

        <div ng-controller ="ctrl">

            <input type="text" ng-model="name" /><br />

            hello,{{name}}

        </div>

    </body>

</html>

运行结果：

这个功能如果放在以前的话，我们需要监听textbox的onchange事件，并及时更新dom元素，显示textbox输入的数据，现在，我们既没有引用JQuery，也没有编写几行js代码，这些都实现了。

你可以点击这里尝试运行。

我了解了什么

  1. 在html元素上标记了ng-app属性，一个页面只能有一个该属性
  2. 在div元素上标记了ng-controller属性，该属性的值需在js脚本中定义
  3. 数据双向绑定，我们改动textbox中值的时候，下面文字自然跟着变化
  4. 在脚本中初始化值，例如：$scope.name=’’

结束语

本文档是我学习过程中的笔记，仅是我本阶段的学习心得。

随着学习的深入，理解加深，我会重新完善该笔记，希望此笔记不要起到误导的作用。

最后，我附上在学习过程中参考的手册：《AngularJS 中文API参考手册》。

AngularJS学习笔记（一）走近AngularJS的更多相关文章

  1. AngularJs学习笔记-慕课网AngularJS实战

    第1章 快速上手 放弃了IE8以及以下,不支持. 4大核心特性: 1.MVC Model: 数据模型 View:视图 Controller:业务逻辑和控制逻辑 好处:职责清晰,模块化. 2.模块化 3 ...

  2. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  3. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  4. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  5. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  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学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

随机推荐

  1. 关于getProperties的一点记录

    写了一很简单的获取配置文件的代码,结果怎么都在报空指针,经过上网查,直到要这样写才不会报: InputStream is = getClass().getClassLoader().getResour ...

  2. 分形之康托(Cantor)三分集

    1883年,德国数学家康托(G.Cantor)提出了如今广为人知的三分康托集,或称康托尔集.三分康托集是很容易构造的,然而,它却显示出许多最典型的分形特征.它是从单位区间出发,再由这个区间不断地去掉部 ...

  3. 使用EF操作Oracle数据库小计

    1.建表 CREATE TABLE item.ORDERS( ORDERID ) CONSTRAINT PK_ORDERS PRIMARY KEY, ORDERNO ), STOREID ), STO ...

  4. WPF 打印界面(控件)到A4纸

    这次遇到一个需求,就是将整个界面打印在A4纸上. 需求清楚后,Bing一下关于打印,就找到一个类PrintDialog ,其中两个方法可能会用到: 特别是public void PrintVisual ...

  5. 背水一战 Windows 10 (42) - 控件（导航类）: Frame 动画

    [源码下载] 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) Frame 动画 示例An ...

  6. Linux系统CentOS 7配置Spring Boot运行环境

    从阿里云新买的一台Linux服务器,用来部署SpringBoot应用,由于之前一直使用Debian版本,环境配置有所不同,也较为繁琐,本文主要介绍CentOS下配置SpringBoot环境的过程 新建 ...

  7. python3之paramiko模块

    1.paramiko模块介绍 paramiko模块提供了基于ssh连接,进行远程登录服务器执行命令和上传下载文件的功能.这是一个第三方的软件包,使用之前需要安装. 2.paramiko的使用方法 (1 ...

  8. Java 泛型通配符

    package com.waston; import java.util.*; public class Main { public static void main(String[] args) { ...

  9. shopify网站转化率优化之结账页checkout优化

    昨天分享了“利用GOOGLE地图API实现shopify结账页checkout地址自动填写地址字段”是个非常屌的功能,但shopify默认的结账页checkout是这样的如图 [caption id= ...

  10. 生成代码的代码 之 POJO生成器 之二 模板实现

    在之前的一篇博客中,我们写了利用node.js来生成JAVA的POJO代码的方法.有评论说可以利用模板来做这件事.当时认为模板只能做简单的字符串替换,所以可能无法完成任务.但是,仔细的学习了一个模板 ...