<!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)的更多相关文章

  1. 我的AngularJS 学习之旅

    我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就 ...

  2. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  3. AngularJS学习之旅

    开篇 最近由于项目上可能需要用到AngularJS,公司将技术学习.调研的任务安排了下来,因此开始了我的AngularJS学习之路. 在这之前没写过技术博客,主要是由于太懒,另外自愧文笔不好,因此一直 ...

  4. 我的AngularJS 学习之旅(二)

    记得某位大神说过,"时间就像海绵里的水,挤挤总是有的.".大多时候,与其说我是很忙而没时间去做自己想做的事, 倒不如说是懒得去做罢了. 废话不多说,接前一篇继续吧 3.3 指令(D ...

  5. AngularJS学习之旅—AngularJS 表单(十六)

    一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...

  6. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  7. AngularJS学习之旅—AngularJS HTML DOM(十三)

    1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...

  8. AngularJS学习之旅—AngularJS Table(十一)

    1.AngularJS 表格 1. ng-repeat 指令可以完美的显示表格 AngularJS 实例 <!DOCTYPE html> <html> <head> ...

  9. AngularJS学习之旅—AngularJS Select(十)

    1.AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. ng-option:创建一个下拉列表,列表项通过对象和数组循环输出 eg: <div ...

随机推荐

  1. 新冲刺Sprint3(第一天)

    一.Sprint介绍 sprint2已经结束了,现在准备进行新一轮的冲刺--sprint3.现在简单说下sprint3的情况,正在进行的有更新商品图片和浏览商家相关信息,还有就是APP测滑栏的完善.准 ...

  2. 百度翻译&&金山词霸API

    #/usr/bin/env python3 #coding=utf8 """百度翻译api功能实现函数,本模块基于Python3.x实现,getTransResult(q ...

  3. POJ 1990 MooFest(树状数组)

                                                                        MooFest Time Limit: 1000MS   Mem ...

  4. VISIBLE、INVISIBLE、GONE的区别

    VISIBLE:设置控件可见 INVISIBLE:设置控件不可见 GONE:设置控件隐藏 而INVISIBLE和GONE的主要区别是:当控件visibility属性为INVISIBLE时,界面保留了v ...

  5. 解决android 启动白屏问题

    Android 启动APP时黑屏白屏的三个解决方案 http://www.cnblogs.com/liqw/p/4263418.html android:windowSoftInputMode属性使用 ...

  6. 论文笔记之: Person Re-Identification by Multi-Channel Parts-Based CNN with Improved Triplet Loss Function

    Person Re-Identification by Multi-Channel Parts-Based CNN with Improved Triplet Loss Function CVPR 2 ...

  7. Python(文件、文件夹压缩处理模块,shelve持久化模块,xml处理模块、ConfigParser文档配置模块、hashlib加密模块,subprocess系统交互模块 log模块)

    OS模块 提供对操作系统进行调用的接口 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname")  改变当前脚本工作目 ...

  8. HTTP响应状态码记录

    HTTP 是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和 扩展.目前在WWW中使用的是HTTP/1.0 ...

  9. WebService---Android中访问WebService接口的方法

     最近公司有个项目需要从Android平台访问WebService接口,实现向发布的函数传递对象.在网上找了一些资料,发现使用ksoap2可以调用WebService传递对象.   需要引入ksoap ...

  10. Java 应用性能调优实践

    Java 应用性能优化是一个老生常谈的话题,笔者根据个人经验,将 Java 性能优化分为 4 个层级:应用层.数据库层.框架层.JVM 层.通过介绍 Java 性能诊断工具和思路,给出搜狗商业平台的性 ...