1.  
  1. <!doctype html>
  2. <html ng-app="">          <!-- ng-app指令标记了AngularJS脚本的作用域 -->
  3. <head>
  4.     <meta charset='utf-8'>
  5.     <title>angular js</title>
  6.     <script type="text/javascript" src='http://www.runoob.com/try/angularjs/1.2.5/angular.min.js'></script>
  7. </head>
  8. <body>
  9.  
  10.     <div>
  11.         your name : <input type='text' ng-model="yourname" ng-init="yourname=''word">
  12.         <br/>
  13.         <!-- ng-model 指令把元素值（比如输入域的值）绑定到应用程序 -->
  14.         <!-- ng-init 初始化变量值 -->
  15.  
  16.         hello {{yourname}} !  <!-- {{}} 绑定表达式 -->
  17.         <br/>
  18.         helllo <span ng-bind="yourname"></span> <br>    <!-- ng-bind绑定表达式，类似于{{}}-->
  19.  
  20.         <!-- 添加过滤器 -->
  21.         hello {{yourname|uppercase}} <br>   <!-- 大写 -->
  22.         hello {{yourname|lowercase}}   <br> <!-- 小写 -->
  23.         hello {{yourname|currency}}   <br> <!-- 转化为货币形式 -->
  24.         <!-- orderBy 见下 -->
  25.         <!-- filter:name见下 -->
  26.         <p>1+2={{1+2}}</p>
  27.     </div>
  28.  
  29.     <div ng-controller="PhoneListCtrl">        <!-- 定义控制器 -->
  30.         <input ng-model='name'>
  31.           <ul>
  32.             <li ng-repeat="phone in phones |orderBy:'snippet'|filter:name">   <!-- ng-repeat遍历数组 -->
  33.              {{phone.name}}
  34.             <p>{{phone.snippet}}</p>
  35.             </li>
  36.           </ul>
  37.     </div>
  38.  
  39.     <div ng-controller='personcontroller'>
  40.         firstname: <input tyep='text' ng-model="person.firstname"><br>
  41.         lastname:  <input type='text' ng-model="person.lastname"><br>
  42.         myname is {{person.firstname+" "+person.lastname}}
  43.     </div>
  44.  
  45.     <!-- http -->
  46.  
  47.     <div ng-controller='customerController'>
  48.         <ul>
  49.             <li ng-repeat="x in names">
  50.                 {{x.Name+","+x.Country}}
  51.             </li>
  52.         </ul>
  53.     </div>
  54.  
  55.     <input type='checkbox' ng-model='mySwitch'>buttton
  56.     <button ng-disabled='mySwitch'>TOUCH ME!</button>
  57.  
  58.     <p>
  59.         <p ng-show='true'>我是可见的</p>
  60.         <p ng-show='false'>我是不可见的</p>
  61.     </p>
  62.     <p>
  63.         <p ng-hide='true'>我是不可见的</p>
  64.         <p ng-hide='false'>我是可见的</p>
  65.     </p>
  66.  
  67.     <!-- 事件 -->
  68.     <div ng-controller="clickController">
  69.         <button ng-click="count=count+1">touch me</button>
  70.         <p>{{ count }}</p>
  71.     </div>
  72.  
  73.     <script type="text/javascript">
  74.         function PhoneListCtrl($scope){     // $scope为控制器对象，phones为控制器对象属性
  75.             $scope.phones=[
  76.                 {"name":"nexus s",
  77.                 "snippet": "Fast just got faster with Nexus S."},
  78.                 {"name":"vivo x3",
  79.                 "snippet":"keep moving"},
  80.                 {"name":"iphone6",
  81.                 "snippet":"make anything impossiable"}
  82.             ];
  83.         }
  84.  
  85.         function personcontroller($scope){
  86.             $scope.person = {
  87.                 firstname:"JACK",
  88.                 lastname:"Rose"
  89.             }
  90.         }
  91.  
  92.         function customerController($scope,$http){
  93.             $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")  //数据库文件地址
  94.             .success(function(response){
  95.                 $scope.names=response;
  96.             })
  97.         }
  98.  
  99.         function clickController($scope){
  100.             $scope.count=0;
  101.         }
  102.  
  103.     </script>
  104. </body>
  105.  
  106. </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. POJ 2853 Sequence Sum Possibilities

    Sequence Sum Possibilities Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5537   Accep ...

  2. POJ 3519 Minimal Backgammon

    Minimal Backgammon Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 1195   Accepted: 700 ...

  3. windows7 中开启无线热点

    我用的是移动的 CMCC-EDU 上网,但是这个只能在一个设备上登陆,那么问题就来了,当我电脑需要用网,手机也想要用网(不用 2/3/4G)该怎么办? 电脑操作系统:windows7 接下来是开启 w ...

  4. Cobbler批量安装Ubuntu/CentOS系统

    2013-07-25    一.安装和修改cobbler配置 1. Cobbler不在CentOS的基本源中,需要导入EPEL源升级软件包, 确保epel-release包的版本为最新,当前最新版本为 ...

  5. netty ByteToMessageDecoder 分析

    ByteToMessageDecoder 1.socket 移除时触发,最后次读数据处理 @Override public final void handlerRemoved(ChannelHandl ...

  6. MyBatis知多少（9）不同类型的数据库

    并非所有的数据库都如此复杂,需要使用昂贵的数据库管理系统以及企业级的硬件.一些数 据库其实非常小,足以运行在一台老式的PC机上.所有的数据库都是不一样的.它们有各自不 同的需求和不同的挑战.iBATI ...

  7. windows下远程连接ubantu

    要实现windows下连接ubantu需要安装以下软件: 1. windows下安装winSCP 2. Ubantu下安装OpenSSH Server 可以使用命令行安装openSSH Server: ...

  8. [IR] Link Analysis

    网络信息的特点在于: Query: "IBM" --> "Computer" --> documentIDs. In degree i 正比于 1/ ...

  9. sql order by 排序多个字段

    order by 多个字段,每个字段后面都有排序方式,默认ASC 例如:select table a order by a.time1 ,a.time2 desc,a.time3 asc

  10. Supervisor – 用于 Unix 系统的进程监控工具

    Supervisor 是一个客户端/服务端模式的系统,使用户能够监视和控制 UNIX 操作系统的进程.Supervisor 为你提供一个地方来启动,停止和监视进程.进程可以单独或成组的形式控制.您还可 ...