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 这个服务可以创建一个资源对象,我们可以 ...
随机推荐
- Zephir入门 —— 语法篇
概述 Zephir的语法跟PHP很相似,所以这里不会把官网的文档照搬过来翻译一遍,而是会把一些Zephir相较于PHP比较特别的语法挑出来讲一下.如果想要要完整学习Zephir的语法,没有比官网的文档 ...
- 类里的通用成员函数应声明为static
类C的成员函数f,如果f的实现实现不依赖于C的任何成员变量,则f为通用函数. 对于通用函数f,可以将其从类C中分离出来做成一个全局函数,也可以仍然让它属于类C,但加上static. 两种处理方法实际都 ...
- 未能加载文件或程序集“Microsoft.SqlServer.Management.Sdk.Sfc, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91”或它的某一个依赖项。系统找不到指定的文件。
莫名其妙的,在 VS 中添加数据库连接就报这个错误,经过查找,解决方法是重新安装下两个sql server的组件:SharedManagementObjects.msi 和 SQLSysClrType ...
- ios. GCD 倒计时时间
//倒计时时间 __block int timeout = 60; dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_ ...
- ios获取文件的MD5值
一般我们在使用http或者socket上传或者下载文件的时候,经常会在完成之后经行一次MD5值得校验(尤其是在断点续传的时候用的更 多),校验MD5值是为了防止在传输的过程当中丢包或者数据包被篡改,在 ...
- 关于docker容器和镜像的区别
docker的整个生命周期有三部分组成:镜像(image)+容器(container)+仓库(repository): 如下图所示,容器是由镜像实例化而来,这和我们学习的面向对象的概念十分相似,我们可 ...
- [转]Web App 框架选择之百度&腾讯
百度的GMU GMU(Global Mobile UI)是百度前端通用组开发的移动端组件库,GMU是基于zepto的mobile UI组件库,提供webapp.pad端简单易用的UI组件.具有代码体积 ...
- Maven mvn install 本地jar添加到maven仓库中
最近在使用支付宝.财付通这样的第三方支付,在使用支付宝过程中需要引入官方SDK方便开发,使用以下命令来将本地的jar装载到maven仓库中. 这里有几点需要注意点,我使用Windows10时,使用po ...
- shell格式化字符串
假如你有以下代码: TEMP_SQL="SELECT count(uid) from ${TABLE_PREFIX}_%s;" SUM= for((i=${MIN};i<${ ...
- Lintcode:Longest Common Subsequence 解题报告
Longest Common Subsequence 原题链接:http://lintcode.com/zh-cn/problem/longest-common-subsequence/ Given ...