<!doctype html>

<html ng-app="myapp">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="js/Angular.js"></script>

 <script>

  //控制器注册

   var myapp=angular.module("myapp", []).controller("HelloController", function($scope) {

            $scope.helloTo = {};

            $scope.helloTo.title = "AngularJS";

    });

</script>

</head>

<body >

学习地址<br/>

http://www.yiibai.com/angularjs/angularjs_environment.html<br/>

http://docs.angularjs.cn/api/ng/filter/filter <span>指令集合</span> ng-app：设定作用域<br/>

ng-model：设定模型变量<br/>

ng-controller:设置某个控制器的作用域<br/>

ng-bind：绑定模型<br/>

ng-init：该指令初始化应用程序数据。<br/>

ng-repeat：该指令将重复集合中的每个项目的HTML元素。用于迭代<br/>

<p style="color:red;">注意点：angular.module("myapp", [])这样的注册只能有一次，其他地方使用会报错</p>

ng-disabled:禁用一个给定的控制<br/>

ng-show:显示一个给定的控制<br/>

ng-hide:隐藏在给定的控制<br/>

ng-click:表示AngularJS click事件<br/>

<br/>

<span>作用域对象</span> $scope：标示控制器的作用域 <br/>

<span>模型一</span><br/> Hello {{'World'}} {{123}}! <br/>

<br/>

<span>模型二</span><br/> Your name:

<input type="text" ng-model="yourname" placeholder="World">

Hello {{yourname || 'World'}}! <br/>

<br/>

<span>模型三</span><br/>

<table>

  <tr>

    <th>row number</th>

  </tr>

  <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">

    <td>{{i}}</td>

  </tr>

</table>

<table>

  <tr>

    <th>row number</th>

  </tr>

  <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">

    <td>{{i+1}}</td>

  </tr>

</table>

<br/>

<br/>

<span>模型四</span><br/>

<div ng-controller="HelloController" >

  <h2>Welcome {{helloTo.title}} to the world of Yiibai!</h2>

  <br/>

  <br/>

</div>

<span>模型五</span><br/>

  <p>我的名字:

    <input type="text" ng-model="name">

  </p>

  <p>Hello, <span ng-bind="name"></span>!</p>

<br/>

<br/>

<span>模型六</span><br/>

<div ng-app="myapp01" ng-init="countries=[{locale:'en-US',name:'United States'},{locale:'en-GB',name:'United Kingdom'},{locale:'en-FR',name:'France'}]">

{{countries}} <br/>

  {{countries[0].name}}

  </div>

<br/>

<br/>

<span>模型七</span><br/>

<script>

//自定义注册过滤器

myapp.filter('kavlezFilter',function(){

    return function(input){

        if(input){

            return '1111:\"'+input+'"';

        }

    }

});

</script>

<input type="text" ng-model="student.firstName"><br/>

大写过滤: {{student.firstName | uppercase}}<br/>

小写过滤: {{student.firstName | lowercase}}<br/>

货币过滤: {{student.firstName | currency}}<br/>

自定义过滤: {{student.firstName | kavlezFilter}}<br/>

排序过滤:<br/>

<ul ng-repeat="i in [{name:'b'}, {name:'ab'}, {name:'a'}, {name:'bs'}]|orderBy:'name'">

  <li>{{i.name}}</li>

</ul>

<br/>

<br/>

<span>模型八</span><br/>

<input type="checkbox" ng-model="enableDisableButton">Disable Button

<input type="radio" ng-model="enableDisableButton">Disable Button

<button ng-disabled="enableDisableButton">Click Me!</button>

<br/>

<input type="checkbox" ng-model="showHide1">Show Button

<button ng-show="showHide1">Click Me!</button>

<br/>

<input type="checkbox" ng-model="showHide2">Hide Button

<button ng-hide="showHide2">Click Me!</button>

<br/>

<div ng-controller="TestController">

<p>Total click: {{ clickCounter }}</p></td>

<button ng-click="clickCounter = clickCounter + 1">Click Me!</button>

<button ng-click="clickTest()">Click Me!</button>

</div>

<script>

myapp.controller("TestController", function($scope) {

            $scope.clickTest = function(){

                $scope.clickCounter = $scope.clickCounter + 1;

            };

    });

</script>

支持事件<br/>

ng-click<br/>

ng-dbl-click<br/>

ng-mousedown<br/>

ng-mouseup<br/>

ng-mouseenter<br/>

ng-mouseleave<br/>

ng-mousemove<br/>

ng-mouseover<br/>

ng-keydown<br/>

ng-keyup<br/>

ng-keypress<br/>

ng-change<br/>

</body>

</html>

AngularJs记录学习01的更多相关文章

  1. AngularJs记录学习03

    AngularJs的路由是一个组件,需要自己额外添加,在目录/src/ngRoute中 三个文件route.js,routeParams.js,ngView.js <html> <h ...

  2. AngularJs记录学习04

    <html> <head> <title>Angular JS Views</title> <script src="js/Angula ...

  3. AngularJs记录学习02

    <!doctype html> <html ng-app="myapp"> <head> <meta http-equiv="C ...

  4. 【iScroll源码学习01】准备阶段 - 叶小钗

    [iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3 ...

  5. 天脉2（ACoreOS653）操作系统学习01

    天脉2(ACoreOS653)操作系统学习01 由于我的毕业设计涉及相关嵌入式操作系统,故最近学了学天脉2操作系统. 一.ARINC653标准 1.ARINC653标准是什么? ARINC 653 : ...

  6. Python学习--01入门

    Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...

  7. 从0开始学angularjs－笔记01

    一.angularjs简介 AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利 ...

  8. Java虚拟机JVM学习01 流程概述

    Java虚拟机JVM学习01 流程概述 Java虚拟机与程序的生命周期 一个运行时的Java虚拟机(JVM)负责运行一个Java程序. 当启动一个Java程序时,一个虚拟机实例诞生:当程序关闭退出,这 ...

  9. Android Testing学习01 介绍 测试测什么 测试的类型

    Android Testing学习01 介绍 测试测什么 测试的类型 Android 测试 测什么 1.Activity的生命周期事件 应该测试Activity的生命周期事件处理. 如果你的Activ ...

随机推荐

  1. 一个JS定时器类

    学习js,因为函数和定时器直接的关系是非绑定的.我不能说我开启一个定时,然后拿一个变量去记录这个setInterval的返回值,这样很麻烦. 本着面向对象的思想,利用业余时间(周末在家里)写了一个类, ...

  2. IOS开发-phonegap上的数据库

    phonegap提供的本地数据库功能不可用,最终请教高手后使用SQLitePlugin插件来实现.网上很多都是介绍IOS插件如何编程,少有介绍如何使用插件: 一.插件安装: 1.下载,解压,复制以下文 ...

  3. ANR

    /data/anr/traces.txt MySQL: select version();

  4. Jmeter命令行方式启动

    在性能测试过程中,我们常常遇到这样的问题,使用Jmeter的GUI界面进行大并发量的性能测试时,界面容易卡死,无法继续进行性能测试.通过使用命令行方式启动jmeter是一个不错的方式.下面就简单介绍一 ...

  5. unity两点之间抛物线，完美金手指

    学校享受的日子一去不复还了,呜呜.话说面试了几个公司,真心没准备好就上了,结果当然是小悲催.还好有容身之处,就算是搬砖,也有可能为自己盖楼,吼吼. 好,下面我来分享一道有意思的面试题,说他有意思,是因 ...

  6. mysql中字符集和校对规则

    首先,明确一下字符集和校对规则的概念:    字符集(charset):是一套符号和编码    校对规则(collation):是在字符集内用于比较字符的一套规则,比如有的规则区分大小写,有的则无视 ...

  7. ICDM 2007

    Language-Independent Set Expansion of Named Entities Using the Web. Chao Wang, Venu Satuluri, Sriniv ...

  8. 【MySQL】MySQL回滚工具

    1.mysqlbinlog把事务从binlog中导出 2.从导出的binlog中找到要回滚的事务,去掉第一个DML语句前和最后一个DML语句后与DML无关的binlog信息 3.在目录中新建一个tab ...

  9. Oracle笔记 五、创建表、约束、视图、索引、序列、同义词、表空间

    alter table userInfo add(msn varchar2(20)); 1.建表 create table userInfo ( id number(6), name varchar2 ...

  10. yii 事物

    $transaction = Yii::app()->db->beginTransaction(); //创建事务 $transaction->commit(); //提交事务 $t ...