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的初步学习
嘿嘿,今天学习的有点迷茫哦,主要学习把验证码使用在登录页面时间的一些逻辑,学习这个时间并没有那么的迷惑哦,可是自己写程序时间倒是有点反应迟钝,不过还好总是在最后搞清楚啦,另外就是一步一步的学习是接近项 ...
随机推荐
- (笔记)linux 进程和线程的区别
进程:进程是程序执行时的一个实例,即它是程序已经执行到课中程度的数据结构的汇集.从内核的观点看,进程的目的就是担当分配系统资源(CPU时间.内存等)的基本单位. 线程:线程是进程的一个执行流,是CPU ...
- 关于阅读JDK源码的准备
说明:本篇是给自己看的. 笑 最近突然有冲动 想研究下JDK的源码,搜索了一番,基本上推荐从集合开始,精华部分包括:集合.IO.多线程.网络编程. 虚拟机部分先放一放吧,感觉现在不适合我这种半路出家的 ...
- maven中json-lib库无法引入
今天在maven中引入json-lib库,intellij中的pom文件没有报错,但是在类中就是无法使用. pom依赖配置: <dependency> <groupId>net ...
- 编译libjpeg
本来以为编译libjpeg很容易,结果弄了半天. 先百度了下看下教程,一般是设置path,这里我也做了 我的电脑 -> 属性 -> 高级 -> 环境变量 ,添加环境变量PAT ...
- 软件设计模式之单例模式(JAVA)
什么是单例模式? 单例模式是一种常用的软件设计模式.在它的核心结构中只包含一个被称为单例类的特殊类.通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系 ...
- 【CTR】各公司方法
LR + 海量高纬离散特征 GBDT + 少量低纬连续特征 (Yahoo & Bing) GBDT + LR (FaceBook) FM + DNN (百度凤巢) MLR (阿里妈妈) FTR ...
- Android四大组件之——ContentProvider（一）
Android四大组件之--ContentProvider(一) 本人邮箱:JohnTsai.Work@gmail.com,欢迎交流讨论. 欢迎转载,转载请注明网址:http://www.cnblog ...
- 常用Dos（转）
先介绍一下通配符的概念. 通配符*和? *表示一个字符串 ?只代表一个字符 注意通配符只能通配文件名或扩展名,不能全都表示.例如我们要查找以字母y开头的所有文件,可以输入以下命令:dir y*.*:如 ...
- ubuntu-16.04.1-desktop-amd64.iso：ubuntu-16.04.1-desktop-amd64：安装Oracle11gR2
特点: 使用ubuntu-16.04.1-desktop-amd64.iso liveCD模式 + Casper-rw 本地文件 不降级默认的gcc版本,(liveCD 自带默认为 gcc 5.4): ...
- session没保存，登录失败
今天发现做的项目,登录不上 查了下原因,原来是session没保存上 查看php.ini文件,session.save_path="D:\php\tmp\tmp" 查看了下对应的目 ...