angularJS学习之旅（1）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<title></title>
</head>
<body>
<div ng-app="">
<p>姓名：<input type="text" ng-model="name"></p>
<h1>hello {{name}}</h1>
</div> </body>
</html>
AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<title>AngularJS 表达式</title>
</head>
<body>
<div ng-app="">
<p>我的第一个表达式：{{5+5}}</p>
</div> </body>
</html>
AngularJs应用
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<title>AngularJS 应用</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
名:<input type="text" ng-model="firstname"><br>
姓:<input type="text" ng-model="lastname"><br> </div>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.firstname="John";
$scope.lastname="Doe";
});
</script> </body>
</html>
angularJS学习之旅（1）的更多相关文章
- 我的AngularJS 学习之旅
我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例 很早之前就 ...
- AngularJS学习之旅—AngularJS 模块(十五)
一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...
- AngularJS学习之旅
开篇 最近由于项目上可能需要用到AngularJS,公司将技术学习.调研的任务安排了下来,因此开始了我的AngularJS学习之路. 在这之前没写过技术博客,主要是由于太懒,另外自愧文笔不好,因此一直 ...
- 我的AngularJS 学习之旅(二)
记得某位大神说过,"时间就像海绵里的水,挤挤总是有的.".大多时候,与其说我是很忙而没时间去做自己想做的事, 倒不如说是懒得去做罢了. 废话不多说,接前一篇继续吧 3.3 指令(D ...
- AngularJS学习之旅—AngularJS 表单(十六)
一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...
- AngularJS学习之旅—AngularJS 事件(十四)
1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...
- AngularJS学习之旅—AngularJS HTML DOM(十三)
1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...
- AngularJS学习之旅—AngularJS Table(十一)
1.AngularJS 表格 1. ng-repeat 指令可以完美的显示表格 AngularJS 实例 <!DOCTYPE html> <html> <head> ...
- AngularJS学习之旅—AngularJS Select(十)
1.AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. ng-option:创建一个下拉列表,列表项通过对象和数组循环输出 eg: <div ...
随机推荐
- linux平台编译安装Poco C++
1.到官网下载poco-1.4.6p4-all.tar.gz,地址为http://pocoproject.org/download/index.html 2.同时下载说明文档 3.根据说明文档执行安装 ...
- yii框架便利类CVarDumper使用
1.类文件位置:path/to/yiiframework/utils/CVarDumper.php 2.作用:CVarDumper is intended to replace the buggy P ...
- java.lang.ClassNotFoundException: com.mysql.jdbc.Driver
因为同样的方法在java中没有问题,放到web工程中就出现了问题.网上查到的资料,说只要把mysql-connector-java-5.1.7-bin.jar放入tomcat中的lib文件夹就可以.很 ...
- 关于清除丢失贴图与IES文件
fn YY_clrmessingmaps = ( YY_messingmap = #() allBitmaps = getClassInstances BitmapTexture -- 所有材质 to ...
- python Data type conversation
>>> repr(111.5) '111.5' >>> repr(10) ' >>> int(") 11 >>> lo ...
- kafka2.9.2的伪分布式集群安装和demo(java api)测试
目录: 一.什么是kafka? 二.kafka的官方网站在哪里? 三.在哪里下载?需要哪些组件的支持? 四.如何安装? 五.FAQ 六.扩展阅读 一.什么是kafka? kafka是LinkedI ...
- MyEclipse Spring 学习总结三 SpringMVC 表单处理
SpringMVC 表单处理的项目结构如下图所示: Student.java 文件 public class Student { private Integer age; private String ...
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效
/** * 全选 */ function checkAll() { $("input[name=ids]").attr("checked", true); } ...
- js滚动效果-(up,left)
// JavaScript Document //图片横向滚动// 2012-1-12 zhx 改版 改为调用方法 调用参数为元素名称 //name 控件名称 //direction 滚动方向 暂时支 ...
- Zookeeper全解析——Paxos作为灵魂(转)
原计划在介绍完ZK Client之后就着手ZK Server的介绍,但是发现ZK Server所包含的内容实在太多,并不是简简单单一篇Blog就能搞定的.于是决定从基础搞起比较好. 那么ZK Serv ...