AngularJS 简介
AngularJS 是一个 JavaScript 框架。
它可通过 <script> 标签添加到 HTML 页面。
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
AngularJS 通过 ng-directives 扩展了 HTML。
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</body>
</html>
解释：
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
- AngularJS 把应用程序数据绑定到 HTML 元素。
- AngularJS 可以克隆和重复 HTML 元素。
- AngularJS 可以隐藏和显示 HTML 元素。
- AngularJS 可以在 HTML 元素"背后"添加代码。
- AngularJS 支持输入验证。
AngularJS 指令
AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。
<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
<div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
AngularJS 应用
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
AngularJS 模块定义应用:
var app = angular.module('myApp', []);
AngularJS 控制器控制应用:
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
更多AngluarJS教程：http://www.runoob.com/angularjs/angularjs-tutorial.html
AngularJS 简介的更多相关文章
- Angularjs简介
很久没有系统学习一个新技术了,angularjs将会比较系统的讲解这个技术的语法.应用.次类型的博客将会持续更新,博主也是一个初学者,如果有问题欢迎留言讨论. angularjs简介. angular ...
- AngularJS学习之旅—AngularJS 简介(一)
一.AngularJS 简介 1.AngularJS 是一个 JavaScript 框架. AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.Angu ...
- 【03】AngularJS 简介
AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML ...
- AngularJS简介与四大特征
1.1 AngularJS简介 AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.A ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
- 01、AngularJs简介
AngularJs致力于减轻程序员在开发Ajax应用过程的痛苦.做前端的童鞋都知道,当在开发Ajax应用时,我们在与后台交互的同时,还在不断的手动操作Dom,诸如自己组装后台数据,渲染Html标签生成 ...
- AngularJS 简介、指令、表达式
AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...
- AngularJS开发指南1：AngularJS简介
什么是 AngularJS? AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于, ...
- 跨平台移动APP开发进阶(四)AngularJS简介
AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件. 它的创新点在于,利用 数据绑定 和 依赖注入 ...
随机推荐
- GitHub上下载源代码的方法
GitHub上找到自己要下载的项目以后,有3种方法可以下载源代码. 第一种是复制该项目的地址,然后用其他软件下载: 第二种是安装了官方客户端,可以直接点击"Clone in Desktop& ...
- 使用ActivityGroup类显示多个Activity
有些情况下需要把一个Activity分割成几部分,如上半部分绘制图形,下半部分显示图表,这时就需要用到ActivityGroup. 定义一个类继承自ActivityGroup,Java文件如下: pa ...
- Delphi Berlin 10.1 for 小米平板2 (Win 10) 电子罗盘测试
Windows 10 下没有 Sensor.HeadingXSensor.HeadingYSensor.HeadingZ 需改用 Sensor.CompMagHeading
- Appcelerator Titanium Studio: JNI_CreateJavaVM missing error
Mac升级到Yosemite后,Titanium Studio启动不了,报Appcelerator Studio: JNI_CreateJavaVM missing error 之类的错误,重装了Or ...
- 《Java4Android》视频学习笔记——抽象类和抽象函数
抽象函数的语法特征 1.类是抽象的,对象是具体的.面向对象里面有个非常重要的特征:先抽象,后具体. 2.只有函数的定义,而没有函数体的函数叫做抽象函数. abstract void fun(); ( ...
- 【Effective Java】12、避免过度同步
这里有一个辅助基础类 package cn.xf.cp.ch02.item16; import java.util.Collection; import java.util.Iterator; imp ...
- ErrorExecution failed for task 'apptransformClassesWithDexForDebug'
[原因]: 在工程中既有本地的lib.jar文件,又有compile链接.
- C#实现通过Gzip来对数据进行压缩和解压
C#实现通过Gzip来对数据进行压缩和解压 internal static byte[] Compress(byte[] data) { using (var compressedStream = n ...
- CSS中的浮动和定位
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...
- pagePiling.js - 创建漂亮的全屏滚动效果
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...