AngularJS 是一个Javascript框架。它可通过 <script> 标签添加到 HTML 页面。AngularJS 通过 指令 扩展了 HTML，且通过 表达式绑定数据到 HTML。是一个以 JavaScript 编写的库，是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> 

AngularJS 通过ng-directives扩展了 HTML;

ng-app指令定义一个 AngularJS 应用程序;

ng-model指令把元素值（比如输入域的值）绑定到应用程序;

ng-bind指令把应用程序数据绑定到 HTML 视图。

<1>实例一:

<body>

    <div ng-app="">

        <p>请输入您的姓名：</p>

        <p>姓名：<input  type="text"  ng-model="name"/></p>

        <p ng-bind="name"></p>

    </div>

    <script src="Scripts/angular.min.js"></script>

</body>

aaarticlea/png;base64,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" alt="" />

当网页加载完毕，AngularJS 自动开启。ng-app指令告诉 AngularJS，<div> 元素是 AngularJS应用程序的"所有者"；ng-model指令把输入域的值绑定到应用程序变量name；ng-bind指令把应用程序变量name绑定到某个段落的innerHTML。

可能有时间也是比较好奇的，AngularJS究竟是什么？其实我也不得不说，我之前也在好奇，但是看过后我就了解了一些。其实AngularJS 把应用程序数据绑定到HTML元素，可以克隆、重复、隐藏和显示HTML元素等，这样说来就是对html的操作的啦。而变一种方式，AngularJS指令是以ng作为前缀的HTML属性，这样说起来或许你就认为简单了吧。

<2>实例二

<body>

    <script src="Scripts/angular.min.js"></script>

    <div data-ng-app="" ng-init="firstName='啦啦'">

        <p>姓名为：<span ng-bind="firstName"></span></p>

    </div>

</body>

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAAAZCAIAAABmeT2OAAAB90lEQVRoge2YUXLEIAiGvZEn4kDexsN4n/bBqCAImmXaTsf/aSdhQb4gmISvK1eF317Af9MF6qwL1FkcaEkxxFS4aUkxQNacZQjyXxU3GYLh9RPRZEqKRrBTey4RKIXSUjaAlhQ3cDLLnwRqRzu15+JAM1AXnaMGtKQYFHHOLcqbIlCUocfs7knwaROd2tvCQJH3wWGJalCoJiIVs2yXDeadMvRFy4A+tLc1V+gowxoLlaVYoRVmTIVVtsTZKGT5eQkBlzljQIDqIwLMkSG/sD8H2rFUfLiHCEDR7VIySrUW+8YaxC2lda59oH+iQp8A7VfCmdlTHlXg5qrEBD7Iag0Ir37ehvv2tijQMeEHWZKn5ra14IMR86x/Olg4A32e7yh75P/U3tYENENs3qoLNqh4T9lojAvGY7/neSs4AG09ER3QerDp2ra9LeFNacwZfp2SqbTp6BLdrU8A9LH0ffj2JKX1xHYRL+jU3tYSKGeqOH4DlI+jZyB+cjRVh0x9UGQ9p/a2GNDukuXlCVSb1fqON6c8aTPcF71yam+LDSX9wOIDNIMyu9Sbm8cmYs22AX1TOrK3hYGumqQ9aay5NH0MmYFNf3d8c3pSkvLQPgBt23P5fL7brVCj+lyV4QjEsf1C93uosy5QZ12gzrpAnXWBOusCddY3koBI+Vt+dSkAAAAASUVORK5CYII=" alt="" />

如上所示，ng-init指令初始化 AngularJS 应用程序变量

<3>实例三

<body>

    <script src="Scripts/angular.min.js"></script>

    <div ng-app="">

        <p>我的第一个表达式： {{  +  }}</p>

    </div>

</body>

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL4AAAAjCAIAAACl7idXAAACb0lEQVR4nO2aW5qDIAxG2VFWlAWxmyyG/XQeqMolIGSorX7/eZsRBMlpCLXuBYAJ9+0JgLsCdYARqAOMQB1gBOoAI1AHGIE6wAjUAUagDjAyoY6wIx8aF4MnltlO6m1ie2Gn3a++3eQAYBktdYTdIDFwQZi0GBrVCUE8uaqrsCuN6g1w9hCq7P+kMZ90Kp8Y9gusyjqvJGPMdOoNEjzlfePF4GnA5Xf7ZpyCp7UxPKalLcI+kaB9JG7JQnWUWDc6nQW/oYJ6r9/IOpuImhjBUzZU+fddaaozGN55L/r6dRKFfulMHXPWMaUHpVNtSpqEbszSrLOgUzOi0cj3pXY6qWNkzTqr1BFWZbr/nrVGnT1GZTBaJjRSE4taMB0jHOoojarBLq119rueqqP964bo6kwVI9siKMHIUoVOaYEa7uDJMfNs1rkeqFMRPDlirqrgsk0eOWHn2PerwlIdNRsIs6RSnWUdk/orwIaVc5R1Wci0k0Ma9GPv6a1VZUFzlxFD1snmdMG3h0Nl8kOOWGfqxCDlvhDRHqYQ9mXK1Sk+bE17qni2qp2ZrKN0eenCLXZJe8zyQPUQc3rqbJUpj1Qjr3q/0EpmbS/KvuZjyd1JdJjPOrGZMeusOmEVy/EUcVrqZGt+rPjx2ML1J/Yd5d7a5MFLBGiWB0mP2awT28e4be/FPqWOWlyVSVffU2/LQK0j7IiZdFf2jWtfm5GVKdJBxRZvSTWMKgy8XCMfiv2y3+kpsbyYc3W0BKO1GT/bDIVqu9HYG6l6Pvc/wfw6+L0OMAJ1gBGoA4xAHWAE6gAjUAcYgTrACNQBRqAOMAJ1gJE/RPFQEYpENW4AAAAASUVORK5CYII=" alt="" />

表达式写在双大括号内{{}},在表达式书写的位置"输出"数据，和JavaScript 表达式：它们可以包含文字、运算符和变量。

<4>.实例四

<body>

    <script src="Scripts/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">

    名:<input type="text" ng-model="firstName" />

    姓：<input type="text" ng-model="lastName"  />

    <br />

    姓名:{{firstName+""+lastName}}

</div>

</body>

</html>

<script>

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

    app.controller("myController", function ($scope) {

        $scope.firstName = "果果";

        $scope.lastName = "啦啦";

    })

</script>

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXkAAAA8CAIAAAAMg10BAAAE5ElEQVR4nO3dzW6bQBSGYe5ormguiGupKiF1GWWTa2DXRapEqpQqUrOwlCVd8DfA/DMcTPM+8iKxj21axh8DOJyqA4DjVWcvAIAvgawBIIGsASCBrAEggawBIOGQrHn+9fLw+PTt+w9u93x7eHx6/vVyxABgbFz9dsTYOCRrXl7/vL1/HPHKKOjt/ePn82/hN2VsXMIRY+OorDniZVHcKVkj/I7IQ9agJLIGLudlTaOrStVtVC3j6Srs46mtlX1dt7WqdLPrHRkbV3FS1rS1ik8axtN1OLNmubIbXVW6IWu+lDOypq1V5WGJIHM8eZ9tPDe2DiXZx1Ojl4kyRcxxWWO8pfdNYuuwm3jW9BFgXaXuyc4qa+Ya9y/RdShpPZ4abUl552Yg55M+jY3prVTdruJtscZj61CYaNb0Y0zV7WZDZ42gRo8DgnnNVdjG0zxfaHSl6taYP8RNJbx73GbW6KZra6W0Hle9Umqz2mPrUJhg1oz76F3XtW1jDJ9+Q7Mdcs6sYV5zt2zjadqw9MlijIODsmYzX7EsTrgOhZ14znueeAQ/+cxrrsIynvrJzPRTbURN0eM19gwxg65fjNg6FHZW1ow7zXEDjXnNVWzH0/y/PYeO+eBxWVNVlaqbZcQk1KEw6awJnINyxI/zvGZsbBAvQixZ0+h+D2iKms3xYt+qD3IfrzGjpWtrNbx6bB0Kk8uacQPS+rZljse25xo8hmPPUXUozDGe5rMC2/uP3Yca7jA2NrF1KOyEfag9WWNqdKW0Vkpr/5Yotg4FeLNmGzcCWdP/1OjpnWPrUNg9Z439PNT4wDjjnacxmxeNrUMx1vE0/YlCW6vlf3/h81BGni0Pu5i/xdahsItlTa2WYWH7ktawmxZTl/qPQ4j12LA73suf8x4NsxTLAaHYOhR2Utb4cGz4wtbjaRsm3kNpGZ/x7dgYBlhwhcfWoYx7ntfM+Pu6q+CaEnDh+jUoiayBC1mDksgauFwma7im7P3jesNwucz1hm+3z9e3v9zu/3a7fR4xABgb/8Gt+NigPxQACWQNAAlkDQAJZA0ACf6s2dG8I6XHizzzYnMxy5paD2AlmDVZzTsSe7xMTwkwXzG1fmmZHe5Mza0HsOLPmqzmHek9XsZnLR5aXRZu/XhSvbFI8/Wf1n/AvPzbz6R6ACGurMlt3pHV42V+Yvw8Jal+jMbFteYC87KUegAhoZ4tKc07snu8jBWHzmvG7Jg7f1RVpbUtU5PrAYT4siateceOHi/jK4pkDfMa4AyerNnZvCOhx8uyXHYfyoyo6efUegAh7qzZ1bwjrcfL+Iqy85p++Yy6OVBS6wGEeLImp3lHXo8Xq9RJg6/eevxlfejJcjgqth5ASFR/qJjmHXt6vMS0bDGzKrXef/xlvNMIq9R6ACGxvejim3dkZM1ao/szPkrrqOsOB+u92THsFZnRkVoPIMSbNVnNOzL6Lqwq+pLhsxz4im5cffC7eat7UusBhHiPDWc178jNmmknbP7d3KXZxFJK/WaZNkmxrEitBxDiypr85h3pPV7sB4U2+yhTz44msd4yKZq/nBixfBn1AFbKX1OiwPGaruvKnodaLUJKRqTWA7Di+jUAJJA1ACSQNQAkkDUAJJA1ACSQNQAkkDUAJJA1ACSQNQAkkDUAJJA1ACSQNQAk/AMw3SRzsu2cmgAAAABJRU5ErkJggg==" alt="" />

AngularJS模块（Module）定义了 AngularJS 应用，控制器（Controller）用于控制AngularJS应用，ng-app指令定义了应用, ng-controller定义了控制器。而变量app的定义就是AngularJS 模块定义应用，下面的即是控制器控制应用。好啦，就写到这里啦，嘿嘿。

AngularJS的初步学习（1）的更多相关文章

  1. 老周的ABP框架系列教程 -》　一、框架理论初步学习

    老周的ABP框架系列教程 -- 一.框架理论初步学习   1. ABP框架的来源与作用简介 1.1  简介 1.1.1       ABP框架全称为"ASP.NET Boilerplate ...

  2. json2.js的初步学习与了解

    json2.js的初步学习与了解,想要学习json的朋友可以参考下. json2.js的初步学习与了解 1.)该js的下载地址是:http://www.json.org/json2.js 2.)在页面 ...

  3. AngularJs中文社区学习资料

    AngularJs中文社区学习资料,供学习: http://angularjs.cn/tag/AngularJS

  4. 初步学习nodejs，业余用node写个一个自动创建目录和文件的小脚本，希望对需要的人有所帮助

    初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助,如果有bug或者更好的优化方案,也请批评与指正,谢谢,代码如下: var fs = require('f ...

  5. EF Codefirst 初步学习（二）—— 程序管理命令 更新数据库

    前提:搭建成功codefirst相关代码,参见EF Codefirst  初步学习(一)--设置codefirst开发模式 具体需要注意点如下: 1.确保实体类库程序生成成功 2.确保实体表类库不缺少 ...

  6. 初步学习python

    自计算机诞生以来,也伴随着计算机语言的诞生,现在,全世界的编程语言有600多种,但流行的编程语言也就20多种. Java和C一直占据着前两名.但是近年来伴随着人工智能的发展,Python发展迅猛,以其 ...

  7. Git的初步学习

    前言 感谢! 承蒙关照~ Git的初步学习 为什么要用Git和Github呢?它们的出现是为了用于提交项目和存储项目的,是一种很方便的项目管理软件和网址地址. 接下来看看,一家公司的基本流程图: 集中 ...

  8. 语法分析器初步学习——LISP语法分析

    语法分析器初步学习——LISP语法分析 本文参考自vczh的<如何手写语法分析器>. LISP的表达式是按照前缀的形式写的,比如(1+2)*(3+4)在LISP中会写成(*(+ 1 2)( ...

  9. 状态保持以及AJAX的初步学习

    嘿嘿,今天学习的有点迷茫哦,主要学习把验证码使用在登录页面时间的一些逻辑,学习这个时间并没有那么的迷惑哦,可是自己写程序时间倒是有点反应迟钝,不过还好总是在最后搞清楚啦,另外就是一步一步的学习是接近项 ...

随机推荐

  1. FPGA静态时序分析——IO口时序（Input Delay /output Delay）（转载）

    转载地址:http://www.cnblogs.com/linjie-swust/archive/2012/03/01/FPGA.html 1.1  概述 在高速系统中FPGA时序约束不止包括内部时钟 ...

  2. BIO、NIO、AIO系列二：Netty

    一.概述 Netty是一个Java的开源框架.提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. Netty是一个NIO客户端,服务端框架.允许快速简 ...

  3. e778. 在JList中加入和删除项

    The default model for a list does not allow the addition and removal of items. The list must be crea ...

  4. 详解SQLServer如何链接远程MySQL数据库

    最近遇到“SQL如何链接远程MySQL”这个问题,现在问题终于解决,特把方法贴出来:(我所用的操作系统是Win7,数据库是SQL2005.) 1.在SQL SERVER服务器上安装MYSQL ODBC ...

  5. C# 随机获取国内IP

    调用getRandomIp()方法即可Framework3.5 +使用LINQ public string getRandomIp() { /* int[][] 这个叫交错数组,白话文就是数组的数组. ...

  6. 一款CSS3仿Google Play的垂直菜单

    之前分享过一款非常酷的CSS3垂直下拉动画菜单,是多级菜单.今天我们来看一款也是用CSS3制作的垂直菜单,是仿Google Play的菜单,菜单项都带有可爱的小图标,可以先来看看效果图: 当然你可以在 ...

  7. @Mock与@InjectMocks的区别

    @Mock: 创建一个Mock. @InjectMocks: 创建一个实例,简单的说是这个Mock可以调用真实代码的方法,其余用@Mock(或@Spy)注解创建的mock将被注入到用该实例中. 注意: ...

  8. Sql Server Snapshot和mysql MVCC

    mysql 在一个事务A中插入一条数据 在B事务中查询到的还是以前的数据,可以select *from table,不被锁住   Sql Server 默认级别 读已提交 所以A事务在 X表插入数据, ...

  9. Alcatraz插件管理器

    下载地址:https://github.com/supermarin/Alcatraz 虽然能用Alcatraz插件管理器进行管理,但它有时有些插件并不是最新版本,特别是在Xcode更新版本时.这里有 ...

  10. 基于maven使用IDEA创建多模块项目

    原文地址:http://blog.csdn.net/williamhappy/article/details/54376855 鉴于最近学习一个分布式项目的开发,讲一下关于使用IntelliJ IDE ...