<!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. dataWithContentsOfURL报错问题

    NSError *error = nil; NSData* videoData = [NSData dataWithContentsOfURL:[NSURL URLWithString:self.re ...

  2. Alpha版本项目展示

    成员简介 谷大鑫: 热爱编程,技术狂魔,可以对感兴趣的技术钻研到茶饭不思,队伍的技术中坚.标签:整个队伍里最靠谱的人. 个人博客:http://www.cnblogs.com/nrm1/ 杨金键: 未 ...

  3. android之ViewPager

    在android中ViewPager是非常常用的控件.它在android.support.v4.view.ViewPager下.你们自己可以进http://developer.android.com/ ...

  4. phpwind之关闭账号通

    phpwind的账号通功能早就失效了,但是首页的链接一直存在,造成了很不好的影响 但是后台打开账号通功能又打不开,所以想到了在前端的模板中通过屏蔽这部分代码的方法隐藏掉这个功能在首页的显示 1.打开/ ...

  5. Java 报表之JFreeChart(第一讲)

    1.利用 JFreeChart 创建垂直柱状报表 package com.wcy.chart.bar; import javax.servlet.http.HttpSession; import or ...

  6. Waves：类Material Design 的圆形波浪（涟漪）点击特效插件

    Waves:类Material Design 的圆形波浪(涟漪)点击特效插件 2014/08/06 分类:前端开发, 素材分享 浏览:6,734次  来源:原创 1个评论       6,734   ...

  7. sublime test 3 使用及常用插件

    1.家里不能安装问题 公司可以安装,但回到家里安装不上 package control,看了是网络方面原因,具体就没去了解... 所有建议: 安装后在sublime text目录下 新建 Date目录 ...

  8. [转]SQLServer2008日志文件无法收缩处理方法

    问题描述     发现有的数据库日志文件太大,无论如何收缩执行几次SQL语句都不行.事务日志达30+G,而且使用常规的截断.收缩方法均无法减小日志物理文件的尺寸,经过一番寻找,终于找到了解决方法. 查 ...

  9. pt-online-schema-change 实例

    pt-pmp (http://www.cnblogs.com/ivictor/p/6012183.html) pt-online-schema-change (http://blog.csdn.net ...

  10. 获取父iframe的高宽

    var p_window = window.top;        //alert($(p_window).height());        var p_demo = window.top.docu ...