AngularJS Notes
ng-model The ng-model directive binds the value of the input field to the application variable name.
ng-bind The ng-bind directive binds application variable name to the innerHTML of a paragraph.
ng-init The ng-init directive initialize AngularJS application variables.
AngularJS expressions are written inside double braces: {{ expression }}. AngularJS expressions binds data to HTML the same way as the ng-bind directive.
ng-repeat The ng-repeat directive repeats an HTML element.
currency Format a number to a currency format.
filter Select a subset of items from an array.
lowercase Format a string to lower case.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.
$http.get(url) is the function to use for reading server data.
<script>
function customersController($scope,$http) {
$http.get("http://www.w3schools.com/website/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script>
<!DOCTYPE html>
<html>
<head>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head> <body> <div ng-app="" ng-controller="customersController"> <table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table> </div> <script>
function customersController($scope,$http) {
$http.get("http://www.w3schools.com/website/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </body>
</html>
<!DOCTYPE html>
<html>
<body> <div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Button
</p>
<p>
{{ mySwitch }}
</p>
</div> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </body>
</html>
PhoneDetailCtrl $scope.hello = function(name) {
alert('Hello ' + (name || 'world') + '!');
}
<button ng-click="hello('Elmo')">Hello</button>
phone-detail.html template.Example of AngularJS controller and directives:
<section>
<ul class="nav nav-pills">
<li ng-class="{ active:tab.isSet(1) }">
<a href ng-click="tab.setTab(1)">Description</a>
</li>
<li ng-class="{ active:tab.isSet(2) }">
<a href ng-click="tab.setTab(2)">Specs</a>
</li>
<li ng-class="{ active:tab.isSet(3) }">
<a href ng-click="tab.setTab(3)">Reviews</a>
</li>
</ul> <!-- Description Tab's Content -->
<product-description ng-show="tab.isSet(1)" ></product-description> <!-- Spec Tab's Content -->
<div product-specs ng-show="tab.isSet(2)"></div> <!-- Review Tab's Content -->
<product-reviews ng-show="tab.isSet(3)"></product-reviews> </section>
(function(){
var app = angular.module('store-directives', []);
app.directive("productDescription", function() {
return {
restrict: 'E',
templateUrl: "product-description.html"
};
});
app.directive("productReviews", function() {
return {
restrict: 'E',
templateUrl: "product-reviews.html"
};
});
app.directive("productSpecs", function() {
return {
restrict:"A",
templateUrl: "product-specs.html"
};
});
app.directive("productTabs", function() {
return {
restrict: "E",
templateUrl: "product-tabs.html",
controller: function() {
this.tab = 1;
this.isSet = function(checkTab) {
return this.tab === checkTab;
};
this.setTab = function(activeTab) {
this.tab = activeTab;
};
},
controllerAs: "tab"
};
});
app.directive("productGallery", function() {
return {
restrict: "E",
templateUrl: "product-gallery.html",
controller: function() {
this.current = 0;
this.setCurrent = function(imageNumber){
this.current = imageNumber || 0;
};
},
controllerAs: "gallery"
};
});
})();
<!-- Product Reviews List -->
<ul>
<h4>Reviews</h4>
<li ng-repeat="review in product.reviews">
<blockquote>
<strong>{{review.stars}} Stars</strong>
{{review.body}}
<cite class="clearfix">—{{review.author}}</cite>
</blockquote>
</li>
</ul> <!-- Review Form -->
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)"> <!-- Live Preview -->
<blockquote >
<strong>{{reviewCtrl.review.stars}} Stars</strong>
{{reviewCtrl.review.body}}
<cite class="clearfix">—{{reviewCtrl.review.author}}</cite>
</blockquote> <!-- Review Form -->
<h4>Submit a Review</h4>
<fieldset class="form-group">
<select ng-model="reviewCtrl.review.stars" class="form-control" ng-options="stars for stars in [5,4,3,2,1]" title="Stars">
<option value>Rate the Product</option>
</select>
</fieldset>
<fieldset class="form-group">
<textarea ng-model="reviewCtrl.review.body" class="form-control" placeholder="Write a short review of the product..." title="Review"></textarea>
</fieldset>
<fieldset class="form-group">
<input ng-model="reviewCtrl.review.author" type="email" class="form-control" placeholder="jimmyDean@example.org" title="Email" />
</fieldset>
<fieldset class="form-group">
<input type="submit" class="btn btn-primary pull-right" value="Submit Review" />
</fieldset>
</form>
我对Directive里面的attribute的@、=、&的理解
http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/
http://jsfiddle.net/maxisam/QrCXh/
http://stackoverflow.com/questions/14050195/what-is-the-difference-between-and-in-directive-scope
@就用{{variable}}去取值，否则就是literal string
=就是直接对应variable
AngularJS Notes的更多相关文章
- AngularJS Learning Notes
AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML ...
- AngularJS Resource：与 RESTful API 交互
REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格.RESTful风格的设计不仅 ...
- 3.1 AngularJS必备知识
AngularJS是一个WEB应用框架. 本节我们会学习控制器(控制数据),会学习作用域(连接控制器和用户界面),用户界面又叫做视图,通过模板和作用域来创建交互视觉效果.另外,我们还会学习其他的特性比 ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
- AngularJS笔记---路由视图
最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...
- Make AngularJS $http service behave like jQuery.ajax()(转)
There is much confusion among newcomers to AngularJS as to why the $http service shorthand functions ...
- angularJS $resource与后台restapi的对应关系
REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格.RESTful风格的设计不仅 ...
- angularjs springMVC 交互
AngularJS中的$resource使用与Restful资源交互 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数 ...
- 黄聪：AngularJS中的$resource使用与Restful资源交互（转）
原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以 ...
随机推荐
- 绝对路径${pageContext.request.contextPath}用法及其与web.xml中Servlet的url-pattern匹配过程
以系统的一个“添加商品”的功能为例加以说明,系统页面为add.jsp,如图一所示: 图一 添加商品界面 系统的代码目录结构及add.jsp代码如图二所示: 图二 系统的代码目录结构及add.js ...
- Why do people integrate Spark with TensorFlow even if there is a distributed TensorFlow framework?
https://www.quora.com/Why-do-people-integrate-Spark-with-TensorFlow-even-if-there-is-a-distributed-T ...
- Java 虚拟机类加载器
虚拟机设计团队把类加载阶段张的”通过一个类的全限定名来获取此类的二进制字节流”这个动作放到Java虚拟机外部去实现,以便让应用程序自己决定如何去获取所需要的类.实现这个动作的代码模块称为”类加载器”. ...
- Java虚拟机（JVM）概述
JVM(Java虚拟机)是一个抽象的计算模型.就如同一台真实的机器,它有自己的指令集和执行引擎,可以在运行时操控内存区域.目的是为构建在其上运行的应用程序提供一个运行环境.JVM可以解读指令代码并与底 ...
- 每日英语：How to Solve India's Huge Food Wastage
India is one of the world’s largest producers of fruits and vegetables, but a third of its produce ...
- python（57）：私有变量，代码块
转载:http://blog.csdn.net/zhu_liangwei/article/details/7667745 引子 我热情地邀请大家猜测下面这段程序的输出: class A(object) ...
- 【Linux】Linux根目录下各文件夹的意义
[root@localhost /]# ll / total 102 dr-xr-xr-x. 2 root root 4096 Dec 1 07:37 bin # binary file,二进制执行文 ...
- 死亡之Makefile。。。
A=Nothing build: @rm -rf build/$(A)/* > /dev/null .PHONY: build 这是一个Makefile..只需要打开终端,在这个Makefile ...
- Asp.Net MVC绑定DropDownList等控件
测试环境:vs2013..Net4.5.mvc5 一.Asp.Net MVC绑定控件原理说明 以Html.TextBox为例 /// <param name="name"&g ...
- Spark-shell引入第三方包
Spark-shell引入第三方包 如何引入 spark-shell --jars path/nscala-time_2.10-2.12.0.jar 若有多个jar包需要导入,中间用逗号隔开即可. s ...