<!doctype html>
<html ng-app=""> <!-- ng-app指令标记了AngularJS脚本的作用域 -->
<head>
<meta charset='utf-8'>
<title>angular js</title>
<script type="text/javascript" src='http://www.runoob.com/try/angularjs/1.2.5/angular.min.js'></script>
</head>
<body> <div>
your name : <input type='text' ng-model="yourname" ng-init="yourname=''word">
<br/>
<!-- ng-model 指令把元素值(比如输入域的值)绑定到应用程序 -->
<!-- ng-init 初始化变量值 --> hello {{yourname}} ! <!-- {{}} 绑定表达式 -->
<br/>
helllo <span ng-bind="yourname"></span> <br> <!-- ng-bind绑定表达式,类似于{{}}--> <!-- 添加过滤器 -->
hello {{yourname|uppercase}} <br> <!-- 大写 -->
hello {{yourname|lowercase}} <br> <!-- 小写 -->
hello {{yourname|currency}} <br> <!-- 转化为货币形式 -->
<!-- orderBy 见下 -->
<!-- filter:name见下 -->
<p>1+2={{1+2}}</p>
</div> <div ng-controller="PhoneListCtrl"> <!-- 定义控制器 -->
<input ng-model='name'>
<ul>
<li ng-repeat="phone in phones |orderBy:'snippet'|filter:name"> <!-- ng-repeat遍历数组 -->
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div> <div ng-controller='personcontroller'>
firstname: <input tyep='text' ng-model="person.firstname"><br>
lastname: <input type='text' ng-model="person.lastname"><br>
myname is {{person.firstname+" "+person.lastname}}
</div> <!-- http --> <div ng-controller='customerController'>
<ul>
<li ng-repeat="x in names">
{{x.Name+","+x.Country}}
</li>
</ul>
</div> <input type='checkbox' ng-model='mySwitch'>buttton
<button ng-disabled='mySwitch'>TOUCH ME!</button> <p>
<p ng-show='true'>我是可见的</p>
<p ng-show='false'>我是不可见的</p>
</p>
<p>
<p ng-hide='true'>我是不可见的</p>
<p ng-hide='false'>我是可见的</p>
</p> <!-- 事件 -->
<div ng-controller="clickController">
<button ng-click="count=count+1">touch me</button>
<p>{{ count }}</p>
</div> <script type="text/javascript">
function PhoneListCtrl($scope){ // $scope为控制器对象,phones为控制器对象属性
$scope.phones=[
{"name":"nexus s",
"snippet": "Fast just got faster with Nexus S."},
{"name":"vivo x3",
"snippet":"keep moving"},
{"name":"iphone6",
"snippet":"make anything impossiable"}
];
} function personcontroller($scope){
$scope.person = {
firstname:"JACK",
lastname:"Rose"
}
} function customerController($scope,$http){
$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php") //数据库文件地址
.success(function(response){
$scope.names=response;
})
} function clickController($scope){
$scope.count=0;
} </script>
</body> </html>

AngularJS(一)的更多相关文章

  1. 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  2. AngularJs之九(ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

  3. AngularJS过滤器filter-保留小数,小数点-$filter

    AngularJS      保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...

  4. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

  5. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

  6. 步入angularjs directive(指令)--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  7. 玩转spring boot——结合AngularJs和JDBC

    参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...

  8. 玩转spring boot——结合jQuery和AngularJs

    在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  9. 通过AngularJS实现前端与后台的数据对接(一)——预备工作篇

    最近,笔者在做一个项目:使用AngularJS,从而实现前端与后台的数据对接.笔者这是第一次做前端与后台的数据对接的工作,因此遇到了许多问题.笔者在这些问题中,总结了一些如何实现前端与后台的数据对接的 ...

  10. AngularJS 系列 学习笔记 目录篇

    目录: AngularJS 系列 01 - HelloWorld和数据绑定 AngularJS 系列 02 - 模块 (持续更新)

随机推荐

  1. managed_shared_memory.construct造成的性能损失

    boost中的IPC进程间通信非常好用,可以直接在共享内存上创建对象,相当于new分配器,实测发现它的分配算法还是有点耗时.第一个测试代码仅仅分配一次,然后频繁的复制,每秒钟可以复制4200次左右. ...

  2. 引入HBase依赖包带来的麻烦

    在一个项目里用到HBase做底层存储,使用maven来管理相关Jar包依赖,用maven来管理依赖包,特别不爽的就是他会将你引入Jar包自己的依赖都搞进来,经常会出现一些类和方法冲突找不到等状况.这次 ...

  3. 重构第3天:方法提公(Pull Up Method)

    理解:方法提公,或者说把方法提到基类中. 详解:如果大于一个继承类都要用到同一个方法,那么我们就可以把这个方法提出来放到基类中.这样不仅减少代码量,而且提高了代码的重用性. 看重构前的代码: usin ...

  4. [原]运行编译好的Android模拟器

    Android源码编译好了之后,我们就可以运行它了. 1.配置环境变量: /data/data/Android$ export PATH=$PATH:$(pwd)/out/host/linux-x86 ...

  5. 【网站开发】在新浪SAE上搭建一个博客

    概述 在新浪SAE上搭建一个博客 1.访问新浪SAE站点 http://sae.sina.com.cn/ 2.注册新浪SAE 3.选择应用仓库 4.选择WordPress 5.安装WordPress ...

  6. 使用的 SQL Server 版本不支持数据类型“datetime2”的错误解决方法

    THE VERSION OF SQL IN USE DOES NOT SUPPORT DATATYPE ‘DATETIME2′ 主要错误原因,在使用ado.net entity的时候,entity使用 ...

  7. 剑指架构师系列-Struts2的缓存

    Struts2的缓存中最重要的两个类就是ReferenceMap与ReferenceCache.下面来解释下ReferenceCache中的get()方法. public V get(final Ob ...

  8. 关于完整解答Leo C.W博客中名为“我们公司的ASP.NET 笔试题,你觉得难度如何”的所有题目

    关于完整解答Leo C.W博客中名为“我们公司的ASP.NET 笔试题,你觉得难度如何”的所有题目,请大家鉴定,不足之处,敬请指教! 第1到3题解答如下: public enum QuestionTy ...

  9. NVelocity的基本用法

    NVelocity常用语法指令 默认情况下,NVelocity解析是不分大小写的,当然可以通过设置runtime.strict.math=true,采用严格解析模式. 严格区分大小写有时候还是挺有用途 ...

  10. 【C#】线程协作式取消

    Microsoft .Net Framework 提供了一个标准的取消操作的模式.这个模式是协作式的,意味着你想取消的操作必须显示地支持取消. CLR为我们提供了两个类: System.Threadi ...