<!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. eclipse项目导入androidstudio

    1.添加build.gradle buildscript { repositories { jcenter() } dependencies { classpath 'com.android.tool ...

  2. 斐波那契堆(一)之 图文解析 和 C语言的实现

    概要 本章介绍斐波那契堆.和以往一样,本文会先对斐波那契堆的理论知识进行简单介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现:实现的语言虽不同,但是原理如出一辙,选择其中之一进行了 ...

  3. 【转载】如何使用 gnome-screenshot 截图命令

    转载自:http://www.linuxeden.com/html/softuse/20130726/141753.html 日常工作中,我们经常需要截取屏幕状态来给其他人看.一般情况下,我们能最直接 ...

  4. iOS-UITextField-通知

    二.处理文本框与键盘之间的关系(当键盘弹出遮挡到文本框的时候进行调整) 原理: 首先要明白: 1,键盘隐藏的时候,键盘上边界紧贴屏幕最低端,键盘在屏幕正下方. 2:键盘弹起的时候,键盘下边界跟屏幕下边 ...

  5. Cocos2d-x数据存储

    分别是使用UserDefault,内置文件管理和sqlite3数据库的一般方式: 主要代码: bool DataScene::init(){ if (!Layer::init()){ return f ...

  6. springMVC基础

    controllers包写控制器: @Controller @RequestMapping(value="/utils") public class UploadControlle ...

  7. Week3 博客阅读感想和代码复审

    一.关于博客阅读感想 阅读了十多篇老程序员(大多在计算机相关行业工作超过10年)关于自身经历的博客,很有感触.这里一方面总结一下看博客的收获,另一方面写点自己的感受. 首先,这些博客不少涉及到了两大类 ...

  8. Scrum 项目1.0 2.0 3.0 4.0 5.0 6.0 7.0

    1.确定选题. 应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 截止日期:2016.5.6日晚10点 阅读教材第8章,8 ...

  9. 使用saripaar对android输入控件进行快速验证

    saripaar是个android的第三方快速校验,使用注解快速添加验证规则. public class LoginActivity extends Activity implements Valid ...

  10. 环信SDK与Apple Watch的结合（2）

    这一篇主要是介绍怎么拖apple watch上的相关页面,附源码EMWatchOCDemo. 需要在工程中的“EMWatchOCDemo WatchKit App”中进行操作,该文件夹的结构如图 Wa ...