AngularJs记录学习01

<!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>
时间: 2024-11-09 04:33:51

AngularJs记录学习01的相关文章

AngularJs记录学习04

<html> <head> <title>Angular JS Views</title> <script src="js/Angular.js"></script> <script type="text/javascript" src="js/route.js"></script> <script type="text/javascr

AngularJs记录学习03

AngularJs的路由是一个组件,需要自己额外添加,在目录/src/ngRoute中 三个文件route.js,routeParams.js,ngView.js <html> <head> <title>Angular JS Views</title> <script src="js/Angular.js"></script> <script type="text/javascript"

AngularJs记录学习02

<!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

《Pro AngularJS》学习小结-01

<Pro AngularJS>该书以一个SportsStore案例为主线铺开. 一.开发环境设置 该书中所用的server开发环境是Deployed,从来没听说过,而且作者也说该server没什么人用,我干脆弃用之.其他的环境包括 NodeJS--这个必须装 karma--测试环境,前期还没有用到,以后认真研究,毕竟AngularJS一大特点是Unit Test bootstrap--这个现在应该普遍使用了,O(∩_∩)O webstorm--现在唯一支持AngularJS插件的IDE 我基本

AngularJS交互学习教程推荐

0.目录 目录 预览 详述 1 Learn Angular 2 AngularJS入门教程 感悟 声明 1.预览 急着赶时间,没有时间听我废话的同学,直接看今天推荐的两个AngularJS交互学习教程. CodeCademy的LearnAngularJS Fenby的AngularJS入门教程 2.详述 许多研究表明,探究式学习.游戏式学习是较为高效的学习方式,编程语言学习更是如此.正如看电影和玩游戏的区别,你在看电影的时候,你完全处于被动的.接受内容状态,而玩游戏则全然不同,你会和计算机有交互

概率论快速学习01:计数

2014-05-15 22:02 by Jeff Li 前言 系列文章:[传送门] 马上快要期末考试了,为了学点什么.就准备这系列的博客,记录复习的成果. 正文-计数  概率 概率论研究随机事件.它源于赌徒的研究.即使是今天,概率论也常用于赌博.随机事件的结果是否只凭运气呢?高明的赌徒发现了赌博中的规律.尽管我无法预知事件的具体结果,但我可以了解每种结果出现的可能性.这是概率论的核心. "概率"到底是什么?这在数学上还有争议."频率派"认为概率是重复尝试多次,某种结

Angular系列----AngularJS入门教程01:AngularJS模板 (转载)

是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图

angularJs的学习笔记

angularJs的学习笔记,记录一下,额外学习,不用到项目中,怕以后忘了. 参考地址:http://www.ituring.com.cn/article/13473  改地址比较老了  建议多看看评论  英文好的可以看看这个 https://docs.angularjs.org/tutorial 1.搭建学习环境 本人用的Mac mini,根据参考地址学习angularJS,需要安装node和Testacular a.安装node 终端中: git clone git://github.com

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

[iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3496369.html 主题 iScroll HTML JavaScript ① viewport相关知识点(device-width等) ②  CSS3硬件加速 ③ 如何暂停CSS动画 ④ e.preventDefault导致文本不能获取焦点解决方案 ...... 当然,我们写的demo自然不能和