AngularJs学习
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
input.ng-invalid { background-color: lightblue; }
</style>
</head> <body ng-app="myApp">
<div>
<!--ng-app指令告诉Angular应该管理页面中的哪一块,在整个页面中只能有一个
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind指令把应用程序数据绑定到 HTML 视图。-->
<p>名字：</p><input type="text" ng-model="name" />
<p ng-bind="name"></p><!--当angular未加载完时不会显示-->
<p>{{name}}</p><!--当angular未加载完时会显示-->
<p>p>{{1+1}}</</p> <!--在{{}}里面计算-->
<!--ng-init指令初始化AngularJs应用程序变量,多个变量以“;”隔开-->
<p ng-init="firstName='Jack';lastName='han'">
姓名:{{firstName}} {{lastName}}
</p> <!--HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。-->
<p data-ng-init="firstName='Jack'">
姓名:<span data-ng-bind="firstName"></span>
</p>
</div> <div>
<!--AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。-->
<div ng-controller="myController">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div> <!--AngularJS 对象就像 JavaScript 对象-->
<div ng-init="person={firstName:'Jack',lastName:'han'}">
<p>姓名:{{person.firstName}} {{person.lastName}}</p>
</div>
</div> <div>
<!--ng-repeat 指令会重复一个 HTML 元素：-->
<div ng-init="names=['Jack','Peter','Lily']">
<ul>
<li ng-repeat="name in names">
{{name}}
</li>
</ul>
</div>
<!--ng-repeat 指令用在一个对象数组上：-->
<div ng-init="persons=[{name:'Jack',age:18},{name:'Peter',age:19},{name:'Lily',age:15}]">
<ul>
<li ng-repeat="person in persons">
{{person.name+","+person.age}}
</li>
</ul>
</div> <!-- 指令: my-directive --> <!--创建自定义的指令-->
<!--你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTMl 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， myDirective, 但在使用它时需要以 - 分割, my-directive: 你可以通过以下方式来调用指令：-->
<!--元素名-->
<my-directive></my-directive>
<!--属性-->
<div my-directive></div> <!--推荐使用-->
<!--类名-->
<div class="my-directive"></div>
<!--注意： 你必须设置 restrict 的值为 "C" 才能通过类名来调用指令。
注释
注意： 我们需要在该实例添加 replace 属性， 否则评论是不可见的。
注意： 你必须设置 restrict 的值为 "M" 才能通过注释来调用指令。-->
</div>
<div>
<!--验证用户输入-->
<form name="myForm" ng-init="myText='aa@qq.com'">
Email:
<input type="email" name="myEmail" ng-model="text" />
<span ng-show="myForm.myEmail.$error.email">不是一个合法的邮箱地址</span>
<!--应用状态-->
<!--ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):-->
<input type="email" name="myEmail1" ng-model="myText" required />
<h1>状态</h1>
{{myForm.myEmail1.$valid}}(如果输入的值是合法的则为 true)
{{myForm.myEmail1.$dirty}}(如果值改变则为 true)。
{{myForm.myEmail1.$touched}}(如果通过触屏点击则为 true) <!--ng-model 指令基于它们的状态为 HTML 元素提供了 CSS样式：
input.ng-invalid {
background-color: lightblue;
} ng-model 指令根据表单域的状态添加/移除以下 CSS样式：
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine 根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。-->
<span>{{rootName}}</span>
</form>
</div> <div>
AngularJS 过滤器
AngularJS 过滤器可用于转换数据：
过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。orderBy:'age' 升序 orderBy:'-age' 降序
uppercase 格式化字符串为大写。
<div ng-init="lastName='abcd';firstName='ABCD';price=9.99;persons=[{name:'Jack',age:18},{name:'Peter',age:19},{name:'Lily',age:15}];">
{{lastName | uppercase}}
{{firstName | lowercase}}
{{price | currency}}
<ul>
<li ng-repeat="person in persons | orderBy:'-age'">
{{person.name+","+person.age}}
</li> </ul>
<p>
<input type="text" ng-model="search" />
</p>
<ul>
<li ng-repeat="person in persons | filter:search | orderBy:'-age'">
{{person.name+","+person.age}}
</li>
</ul>
</div>
</div> <div>
AngularJS $http
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。
<div ng-controller="myHttpController">
<ul>
<li ng-repeat="person in persons">
序号：{{$index+1}} {{person.name+","+person.sex}}
<span ng-if="$odd">偶数</span>
<span ng-if="$even">奇数</span> </li>
</ul>
</div>
</div>
<div>
<div ng-init="enable=true;">
<input type="button" value="点击" ng-disabled="!enable"/>
<input type="checkbox" ng-model="enable"/>启用
</div>
<div>
<p ng-show="true">我是可见的。</p>
<p ng-show="false">我是不可见的。</p>
<p ng-hide="true">我是不可见的。</p>
<p ng-hide="false">我是可见的。</p>
</div>
</div> <div>
<div ng-controller="myFormController">
<form novalidate="" name="myValidForm">
FirstName:<input type="text" ng-model="user.firstName" /> <br/>
LastName:<input type="text" ng-model="user.lastName"/><br/>
Email:<input type="email" ng-model="user.email"/><br/>
<input type="button" ng-click="submit()" value="提交"/>
</form>
<p>form = {{user}}</p>
<p>master ={{master}}</p>
</div>
</div> <script src="../Scripts/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myController", function ($scope, $rootScope) {
$scope.firstName = "peter";
$scope.lastName = "han";
$rootScope.rootName = "rootName";
});
app.directive("myDirective", function () {
return {
restrict: "AECM", //你可以限制你的指令只能通过特定的方式来调用。
template: "<h1>我自定义的指令</h1>",
replace: true
};
}); //通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:
//restrict 值可以是以下几种:
//E 只限元素名使用
//A 只限属性使用
//C 只限类名使用
//M 只限注释使用
//restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。 app.controller("myHttpController", function($scope, $http) {
$http.jsonp("http://w3.open.yunshouyi.net/test/index?callback=JSON_CALLBACK").success(function(data) {
$scope.persons = data.result; //{result:[{"name":"chopper","sex":"man"},{"name":"jack","sex":"man"}]}
console.log($scope.persons);
});
}); app.controller("myFormController", function($scope) {
$scope.master = { firstName: "John", lastName: "Doe",email:"aa@qq.com" };
$scope.submit = function() {
$scope.user = angular.copy($scope.master);
};
$scope.submit();
});
</script>
</body>
</html>
AngularJs学习的更多相关文章
- Angularjs学习---官方phonecat实例学习angularjs step0 step1
接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...
- angularJS学习资源最全汇总
基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 https://github ...
- 我的AngularJS 学习之旅
我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例 很早之前就 ...
- 推荐10个很棒的AngularJS学习指南
AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...
- Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结
karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然后才可以安装karma.nodejs,npm的安装过程可以参考文章:Angularjs学习- ...
- AngularJs学习总结－了解基本特性（－）
现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...
- [整理]AngularJS学习资源
https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJs学习笔记--expression
原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
随机推荐
- 使用vlc播放器播放rtsp流视频
可参考: 使用vlc播放器做rtsp服务器 web网页中使用vlc插件播放相机rtsp流视频 使用vlc进行二次开发做自己的播放器 首先需要安装vlc播放器,下载及安装步骤略 使用vlc播放器播放rt ...
- 使用ab对nginx进行压力测试
nginx以高并发,省内存著称. 相信大多数安装nginx的同学都想知道自己的nginx性能如何. 我想跟大家分享下我使用ab工具的压力测试方法和结果, ab是针对apache的性能测试工具,可以只安 ...
- 报错：init: Could not find wglGetExtensionsStringARB!
如下操作即可恢复:
- JavaScript停止冒泡和阻止浏览器默认行为
JS停止冒泡 function myfn(e){ window.event? window.event.cancelBubble = true : e.stopPropagation(); } js阻 ...
- Thread 学习记录 <1> -- volatile和synchronized
恐怕比较一下volatile和synchronized的不同是最容易解释清楚的.volatile是变量修饰符,而synchronized则作用于一段代码或方法:看如下三句get代码: int i1; ...
- Bubble Cup 8 finals C. Party (575C)
题意: 给定n个人,分两天晚上去夜总会开派对,要求每天恰好有n/2个人去,且每人去的夜总会各不相同. 每个人对不同的晚上不同的夜总会有不同的满意度,求一个方案使得所有人的满意度之和最大. 夜总会数量= ...
- js自动轮播图片的两种循环方法（原创）
用5个div,布局从左到右5张图片,从左到右5个div分别指定ID为img1,img2,img3,img4,img5.(背景是relative,5个div是相对于背景absolute定位) 显示如下: ...
- 2. web前端开发分享-css,js进阶篇
一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...
- 现代软件工程作业 第二章 Github的使用
Github的使用 创建团队 Github首页点击Create Orginazation,出现如下界面: 填写相关信息,邀请团队成员: 点击确认,创建团队完成,界面如下: 创建新的版本库 点击Crea ...
- 前端应当了解的Web缓存知识
缓存优点 通常所说的Web缓存指的是可以自动保存常见http请求副本的http设备.对于前端开发者来说,浏览器充当了重要角色.除此外常见的还有各种各样的代理服务器也可以做缓存.当Web请求到达缓存时, ...