什么是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简单入门的更多相关文章

  1. AngularJs 简单入门

    1.AngularJs 是什么以及应用程序组成的三部分 AngularJS是一个开发动态Web应用的框架.它让你可以使用HTML作为模板语言并且可以通过扩展的HTML语法来使应用组件更加清晰和简洁.它 ...

  2. AngularJS快速入门指南19：示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  3. 用IntelliJ IDEA创建Gradle项目简单入门

    Gradle和Maven一样,是Java用得最多的构建工具之一,在Maven之前,解决jar包引用的问题真是令人抓狂,有了Maven后日子就好过起来了,而现在又有了Gradle,Maven有的功能它都 ...

  4. [原创]MYSQL的简单入门

    MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...

  5. AngularJS快速入门指南20：快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  6. AngularJS快速入门指南18：Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  7. AngularJS快速入门指南17：Includes

    使用AngularJS,你可以在HTML中包含其它的HTML文件. 在HTML中包含其它HTML文件? 当前的HTML文档还不支持该功能.不过W3C建议在后续的HTML版本中增加HTML import ...

  8. AngularJS快速入门指南16：Bootstrap

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  9. AngularJS快速入门指南15：API

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

随机推荐

  1. Python+selenium+webdriver 安装与环境配置

    1.python安装:访问python.org/download,下载最新版本,安装过程与其他windows软件类似.记得下载后设置path环境变量,然后Windows命令行就可以调用: 2.Sele ...

  2. 两台Mysql数据库数据同步实现

    两台Mysql数据库数据同步实现 做开发的时候要做Mysql的数据库同步,两台安装一样的系统,都是FreeBSD5.4,安装了Apache 2.0.55和PHP 4.4.0,Mysql的版本是4.1. ...

  3. Spring Security 之 Remember-Me （记住我）

    效果:在用户的session(会话)过期或者浏览器关闭后,应用程序仍能记住它.用户可选择是否被记住.(在登录界面选择)   “记住”是什么意思?     就是下次你再访问的时候,直接进入系统,而不需要 ...

  4. 各大APP注册时发送短信验证码是怎么实现的？

    第一步:获得验证码:1.找到相关的表.2.用什么发送,post,get ,ajax,当然ajax首选3.post之前要js先判断是手机号码11位,并且全部都是数字,或者用正则也行.4.用ajax发送数 ...

  5. 自我总结（四） ---java web项目完结，j2ee的开始

    自我完善的过程就是在不断的自我总结不断的改进. 前半个月刚好把项目做完了,项目也答辩了.总的来说吧,我觉得自己在java web这块知识上不算是彻彻底底把他弄懂了,就是说到的知识点都能够回答的上来一些 ...

  6. 简单实现Spring框架--注解版

    自己写的Spring框架——简单实现IoC容器功能 前几天在网上看了篇帖子,是用xml的方式实现spring的ioc容器,觉得挺有意思的,这边自己试着用注解的形式造了一套轮子. 工程结构 codein ...

  7. winform程序内存不足或假死的问题

    最近一直在写一个winform程序,对各类文档文件,以及压缩包的内容进行关键字检测. 模型出来之后,执行了一下,发现连续测试后,会有内存不足的问题,导致程序面假死.脑袋懵逼了两天. 回头看我的变量容器 ...

  8. 乐字节-Java8新特性之Stream流（上）

    上一篇文章,小乐给大家介绍了<Java8新特性之方法引用>,下面接下来小乐将会给大家介绍Java8新特性之Stream,称之为流,本篇文章为上半部分. 1.什么是流? Java Se中对于 ...

  9. Java多线程--锁的优化

    Java多线程--锁的优化 提高锁的性能 减少锁的持有时间 一个线程如果持有锁太长时间,其他线程就必须等待相应的时间,如果有多个线程都在等待该资源,整体性能必然下降.所有有必要减少单个线程持有锁的时间 ...

  10. JAVA通过XPath解析XML性能比较

    转自[http://www.cnblogs.com/mouse-coder/p/3451243.html] 最近在做一个小项目,使用到XML文件解析技术,通过对该技术的了解和使用,总结了以下内容. 1 ...