<!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. Scalding初探之二:动手来做做小实验

    输入文件 Scalding既可以处理HDFS上的数据,也可以很方便地在本地运行处理一些test case便于debug,Source有好多种 1 TextLine(filename) TextLine ...

  2. HDU 2717 Catch That Cow (bfs)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2717 Catch That Cow Time Limit: 5000/2000 MS (Java/Ot ...

  3. dpkg ---- apt-get ------ aptitude 三种方式的区别 及命令格式

    转自:http://blog.csdn.net/xiaoyanghuaban/article/details/22946987 dpkg绕过apt包管理数据库对软件包进行操作,所以你用dpkg安装过的 ...

  4. spring mvc 请求转发和重定向

    spring mvc controller间跳转 重定向 传参 url:http://zghbwjl.blog.163.com/blog/static/12033667220137795252845/ ...

  5. Windows下启动,关闭Nginx命令

    启动 直接点击Nginx目录下的nginx.exe    或者    cmd运行start nginx 关闭 nginx -s stop    或者    nginx -s quit stop表示立即 ...

  6. 清华申请退学博士作品:完全用Linux工作

    http://www.cnblogs.com/cbscan/articles/3252872.html 下文地址 http://blog.oldboyedu.com/use-linux/ 按: 尽管我 ...

  7. HTTP Proxy Servlet 代理服务使用

    java servlet  代理服务器 1. 使用 maven  依赖 <dependency> <groupId>org.mitre.dsmiley.httpproxy< ...

  8. Ecs下的两台mysql做主从设置

    一.主库配置master 1.用户root账户进入到mysql mysql -uroot -p 2.创建用于主从同步的账户,并赋予权限,由于这个账户只是作为同步数据用,所以分配权限不要过大,我这里只赋 ...

  9. Kafka/Metaq设计思想学习笔记 转

    转载自: http://my.oschina.net/geecoodeer/blog/194829 本文没有特意区分它们之间的区别,仅仅是列出其中笔者认为好的设计思想,供后续设计参考. 目前笔者并没有 ...

  10. SwipeRefreshLayout和RecyclerView滑动冲突的解决

    做了个项目,用了support包里的SwipeRefreshLayout和RecyclerView.两者一起使用有一点点小问题,有时候拉着拉着,列表还没拉玩就出来刷新的图标了,在华为荣耀上尤为明显. ...