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. 关于Unity中水和雾的使用

    水 自己来做水和雾还是有点麻烦的,不过没关系,Unity帮我们做好了很多可以用的. 1.Unity自己实现了水的特效,帮助我们解决游戏中水的问题 2.Unity的水集成在了Environment的环境 ...

  2. 关于Unity中RectTransform和Transform

    以前一直以为在Inspector面板上的是Transform,后来才发现原来2D是RectTransform,3D是Transform 3D面板上显示的是位置坐标组件Transform,2D面板上显示 ...

  3. mvn archetype:generate 创建Maven项目

    mvn archetype:generate 创建Maven项目 mvn compile 编译源代码 mvn deploy 发布项目 mvn test-compile 编译测试源代码 mvn test ...

  4. unity-------------------Unity5.X 新版AssetBundle使用方案及策略

    Unity5.X 新版AssetBundle使用方案及策略   1.概览 Unity3D 5.0版本之后的AssetBundle机制和之前的4.x版本已经发生了很大的变化,一些曾经常用的流程已经不再使 ...

  5. MarkDown 使用说明示例

    一.标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 一级标题 这是 H2 这是 H3 一级和二级标题还有一种写法 就是下面加横杆,同时 超过2个的 = 和 - 都可以有效果. Thi ...

  6. C# IP地址与数字之间的互转

    using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Te ...

  7. [ROM]HTC ThunderBolt 4.0.4 刷机教程

    Z大原帖:http://www.in189.com/thread-754076-1-1.html 精简版:http://www.in189.com/thread-807796-1-1.html 下载地 ...

  8. 在Lua中计算含中文的字符串的长度

    --[[ @desc: 计算字符串字符个数 author:{author} time:-- :: --@inputstr: 源字符串 return 字符个数 ]] function getString ...

  9. 阿里云提出的漏洞（Phpcms V9某处逻辑问题导致getshell漏洞解决方法）的问题

    最近从阿里云云盾检测流出来的,相比使用阿里云服务器的朋友已经收到漏洞提醒:Phpcms V9某处逻辑问题导致getshell漏洞解决方法,这个漏洞怎么办呢?CMSYOU在这里找到针对性解决办法分享给大 ...

  10. mysql中查看某个日期是星期几?如何知道某个日期是星期几?某个日期是周几?

    需求描述: mysql中,如果要查看某个日期是星期几,可以用date_format函数实现,在此记录下. 操作过程: 1.通过date_format函数查看某个日期是星期几 mysql> sel ...