什么是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. Windows 7/Vista下安装Oracle Developer Suit遇到的几个问题

    http://blog.csdn.net/pan_tian/article/details/8016318 Oracle Developer Suite (ODS) 10g是在Windows 7/Vi ...

  2. EntityFramework Core 学习扫盲

    0. 写在前面 1. 建立运行环境 2. 添加实体和映射数据库 1. 准备工作 2. Data Annotations 3. Fluent Api 3. 包含和排除实体类型 1. Data Annot ...

  3. Python 读取文件中unicode编码转成中文显示问题

    Python读取文件中的字符串已经是unicode编码,如:\u53eb\u6211,需要转换成中文时有两种方式 1.使用eval: eval("u"+"\'" ...

  4. [vuejs] 终端npm run dev 不能自动打开浏览器运行项目解决办法

    终端执行: npm run dev 出现: I Your application is running here: http://localhost:8080 但并没有打开浏览器运行项目 解决办法: ...

  5. Swift5 语言参考(五) 语句

    在Swift中,有三种语句:简单语句,编译器控制语句和控制流语句.简单语句是最常见的,由表达式或声明组成.编译器控制语句允许程序更改编译器行为的各个方面,并包括条件编译块和行控制语句. 控制流语句用于 ...

  6. POJ 2575

    #include<iostream> #include<set> #include<stdio.h> using namespace std; int my_abs ...

  7. android屏幕密度规律及dp px转换

    px和dp(sp) 之间转化公式: 1  乘以(dp转px)或者除以(px转dp) scal缩放因子,在上浮0.5f /** * 密度转换像素 * */ public static int dip2p ...

  8. 常见排序算法总结（java版）

    一.冒泡排序 1.原理:相邻元素两两比较,大的往后放.第一次完毕,最大值在最大索引处. 即使用相邻的两个元素一次比价,依次将最大的数放到最后. 2.代码: public static void bub ...

  9. shell 数组使用简介

    数组简介 bash 只提供一维数组,并且没有限定数组的大小.类似与C语言,数组元素的下标由0开始编号.获取数组中的元素要利用下标.下标可以是整数或算术表达式,其值应大于或等于 0.用户可以使用赋值语句 ...

  10. qtcreator_process_stub中文输出乱码

    使用qt运行程序输出中文,全都变成了□,让人很头疼,百度了很久,找了一些解决方案都是: 用vim打开x11-common,在控制台输入 vim /etc/X11/Xresources/x11-comm ...