什么是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. 分形之二叉树（Binary Tree）

    上一篇文章讲的是分形之树(Tree),这一篇中将其简化一下,来展示二叉分形树的生长过程. 核心代码: static void FractalBinaryTree(const Vector3& ...

  2. Convolution Neural Network (CNN) 原理与实现

    本文结合Deep learning的一个应用,Convolution Neural Network 进行一些基本应用,参考Lecun的Document 0.1进行部分拓展,与结果展示(in pytho ...

  3. MGW PCI Framework Architecture

    MGW执行SWBT/FT cases是主要是利用Ant项目. Ant的概念 可能有些读者并不连接什么是Ant以及入可使用它,但只要使用通过Linux系统得读者,应该知道make这个命令.当编译Linu ...

  4. C# .NET 根据Url链接保存Image图片到本地磁盘

    根据一个Image的Url链接可以在浏览器中显示一个图片,如果要通过代码将图片保存在本地磁盘可以通过以下方式: 1.首先获取图片的二进制数组. static public byte[] GetByte ...

  5. .net core 分布式配置中心

    github地址 https://github.com/wangchengqun/ratel 配置文件 数据同步端口 Server: ip: 127.0.0.1 port: 7890 浏览器访问 ht ...

  6. .net图表之ECharts随笔01-最简单的使用步骤

    找了几种绘制图表的办法,后面选定了ECharts.下载链接如下,好像不同的ECharts有不同的用法,要下对. https://gitee.com/Tuky/SomeWebFrame/tree/mas ...

  7. .NetCore WebApi + Vue +MySql搭建博客

    因为我是一直写C#的,所以最近闲暇时间一直在学习.NET Core,该博客的后端使用的就是.NET Core WebApi然后加前端Vue. 首先后端.NET Core搭的框架是一个仓储层+服务层+A ...

  8. 【UOJ244】 【UER #7】短路（贪心）

    传送门 uoj Solution 简单题? 考虑一条路径长什么样子,一定是经过某一个字母环的左上角,那么答案就很简单了. 我们记一个前缀最小值,这样子让他一路走下去一定是最优! 然后扫一遍就好了. 代 ...

  9. springBoot2 基础语法

    请求响应 request对象 request 对象其实是HttpServletRequest 类型, 通过它可以获取请求相关的一切信息, 包含请求信息 . 以及请求参数 ,甚至可以当成往里面存储数据[ ...

  10. python解析json数据

    现在的API接口多为xml或json,json解析更简洁相对xml来说 以豆瓣的API接口为例,解析返回的json数据: https://api.douban.com/v2/book/1220562 ...