AngularJS的初步学习（1）
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）的更多相关文章
- 老周的ABP框架系列教程 -》 一、框架理论初步学习
老周的ABP框架系列教程 -- 一.框架理论初步学习 1. ABP框架的来源与作用简介 1.1 简介 1.1.1 ABP框架全称为"ASP.NET Boilerplate ...
- json2.js的初步学习与了解
json2.js的初步学习与了解,想要学习json的朋友可以参考下. json2.js的初步学习与了解 1.)该js的下载地址是:http://www.json.org/json2.js 2.)在页面 ...
- AngularJs中文社区学习资料
AngularJs中文社区学习资料,供学习: http://angularjs.cn/tag/AngularJS
- 初步学习nodejs，业余用node写个一个自动创建目录和文件的小脚本，希望对需要的人有所帮助
初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助,如果有bug或者更好的优化方案,也请批评与指正,谢谢,代码如下: var fs = require('f ...
- EF Codefirst 初步学习（二）—— 程序管理命令 更新数据库
前提:搭建成功codefirst相关代码,参见EF Codefirst 初步学习(一)--设置codefirst开发模式 具体需要注意点如下: 1.确保实体类库程序生成成功 2.确保实体表类库不缺少 ...
- 初步学习python
自计算机诞生以来,也伴随着计算机语言的诞生,现在,全世界的编程语言有600多种,但流行的编程语言也就20多种. Java和C一直占据着前两名.但是近年来伴随着人工智能的发展,Python发展迅猛,以其 ...
- Git的初步学习
前言 感谢! 承蒙关照~ Git的初步学习 为什么要用Git和Github呢?它们的出现是为了用于提交项目和存储项目的,是一种很方便的项目管理软件和网址地址. 接下来看看,一家公司的基本流程图: 集中 ...
- 语法分析器初步学习——LISP语法分析
语法分析器初步学习——LISP语法分析 本文参考自vczh的<如何手写语法分析器>. LISP的表达式是按照前缀的形式写的,比如(1+2)*(3+4)在LISP中会写成(*(+ 1 2)( ...
- 状态保持以及AJAX的初步学习
嘿嘿,今天学习的有点迷茫哦,主要学习把验证码使用在登录页面时间的一些逻辑,学习这个时间并没有那么的迷惑哦,可是自己写程序时间倒是有点反应迟钝,不过还好总是在最后搞清楚啦,另外就是一步一步的学习是接近项 ...
随机推荐
- Group Normalization
Group Normalization 2018年03月26日 18:40:43 阅读数:1351 FAIR 团队,吴育昕和恺明大大的新作Group Normalization. 主要的优势在于,BN ...
- Unity下Iso和Persp两种模式的区别
Iso模式 平行视野.在Iso模式下,不论物体距离摄像头远近都给人的感觉是一样大的. Persp模式 透视视野.在persp模式下,物体在scene界面上所呈现的画面是给人一种距离摄像头近的物体显示的 ...
- Linux 标准文件描述符
出于特殊目的,bash shell保留了最早的3个文件描述符0.1.2,如下所示: 1.STDIN标准输入 Shell从STDIN文件描述对应的键盘获得输入,在用户输入时处理每个字符. 范例1:cat ...
- js 事件调度
var EventTarget = function () { this._listener = {}; }; EventTarget.prototype = { constructor: this, ...
- 面试的角度诠释Java工程师（二）
续言: 相信每一位简书的作者,都会有我这样的思考:怎么写好一篇文章?或者怎么写好一篇技术类的文章?我就先说说我的感悟吧,写文章其实和写程序是一样的.为什么我会说它们是一样的?简单思考一下...... ...
- eclipse启动genymotion插件reg启动visual box 虚拟机
Exception (VBoxManage): java.io.IOException: Cannot run program "D:\SoftwareInstall\Genymotion\ ...
- c#实现word,excel转pdf代码及部分Office 2007文件格式转换为xps和pdf代码整理
转换功能是通过调用安装了转换XPS和PDF的AddIn的Office2007对象模型完成的. 代码支持Office 2007支持的一切文件格式: Office 2007组件 扩展名 Word DOC, ...
- EasyUI的功能树之扁平化
上篇博客主要介绍了异步加载树的方法,通过前台传给后台一个节点的id值,然后当单击节点加号时,查询并显示其子节点的数据.其实如果不是很大的数据,我们本可以次把树中所有节点都加载上来的.也就是说,我的Ac ...
- cordova ios and ios8
ios8发布后,一些用cordova编写的app会碰到问题,总的来说,cordova官方称是完全支持ios8的,而且由于ios8推出的WKWebView存在问题并没能很好的解决(看原文),仍旧用了UI ...
- 安装unity3d多个版本共存
转自:https://www.cnblogs.com/xsgame/p/3549486.html 用4.3打开两个低版本的unity工程,都报错.... 用低版本打开正常,希望Unity3D版本兼容性 ...