ng-app The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.
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.
ng-click The ng-click directive defines an AngularJS click event.
 
AngularJS filters can be used to transform data:
Filter Description
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.
 
AngularJS $http is a service for reading data from web servers.
$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>
 
Let's add a new controller method to PhoneDetailCtrl 
$scope.hello = function(name) {

    alert('Hello ' + (name || 'world') + '!');

}
and add:
<button ng-click="hello('Elmo')">Hello</button>
to the 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的@、=、&的理解

AngularJS Notes的更多相关文章

  1. AngularJS Learning Notes

    AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML ...

  2. AngularJS Resource：与 RESTful API 交互

    REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格.RESTful风格的设计不仅 ...

  3. 3.1 AngularJS必备知识

    AngularJS是一个WEB应用框架. 本节我们会学习控制器(控制数据),会学习作用域(连接控制器和用户界面),用户界面又叫做视图,通过模板和作用域来创建交互视觉效果.另外,我们还会学习其他的特性比 ...

  4. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  5. AngularJS笔记---路由视图

    最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...

  6. Make AngularJS $http service behave like jQuery.ajax()(转)

    There is much confusion among newcomers to AngularJS as to why the $http service shorthand functions ...

  7. angularJS $resource与后台restapi的对应关系

    REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格.RESTful风格的设计不仅 ...

  8. angularjs springMVC 交互

    AngularJS中的$resource使用与Restful资源交互 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数 ...

  9. 黄聪：AngularJS中的$resource使用与Restful资源交互（转）

    原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以 ...

随机推荐

  1. Android Studio 解决 Gradle 依赖冲突的问题

    Android Studio 解决 Gradle 依赖冲突的问题 参考链接: Android Studio(Gradle)解决库依赖冲突问题:http://www.mobibrw.com/2016/3 ...

  2. JQuery设置获取下拉菜单选项的值 多实例

    分享下JQuery如何设置获取下拉菜单某个选项的值,多种方法,值得收藏. JQuery获取和设置Select选项 获取Select :获取select 选中的 text :$(“#ddlRegType ...

  3. RSA公钥加密，私钥解密的程序示例

    using System;using System.Collections.Generic;using System.Linq;using System.Security.Cryptography;u ...

  4. EditText: EditText自动获取焦点并弹出键盘&EditText不自动获取焦点并且不会弹出键盘

    1.EditText不自动获取焦点并且不会弹出键盘 找到EditText的父控件,设置其父控件为: Parent.setFocusable(true); Parent.setFocusableInTo ...

  5. （原创）C++11改进我们的程序之move和完美转发

    本次要讲的是右值引用相关的几个函数:std::move, std::forward和成员的emplace_back,通过这些函数我们可以避免不必要的拷贝,提高程序性能.move是将对象的状态或者所有权 ...

  6. linux命令（35）：diff命令

    diff 命令是 linux上非常重要的工具,用于比较文件的内容,特别是比较两个版本不同的文件以找到改动的地方.diff在命令行中打印每一个行的改动.最新版本的diff还支持二进制文件.diff程序的 ...

  7. git push remote error解决办法

    通常在用git clone了remote端(服务器)的git仓库后,再进行了自己一系列修改后,会将自己测试后稳定的状态push到remote端,以更新源仓库,使 其他人在pull的时候得到自己的修改. ...

  8. Lua 自己实现排序sort比较方法，抛出错误invalid order function for sorting

    明天新功能就要上了,结果刚刚突然QA说项目抛出了错误.握草,吓得立马出了一身汗. 查了一下错误,发现可能是自己写的不稳定排序造成的.自己感觉应该就是.把排序方法写成稳定的之后,代码分离编译进手机,跑了 ...

  9. 在IIS服务器上屏蔽IP的访问

    今天就跟大家分享一下在IIS服务器上如何屏蔽特定IP的访问,希望对大家有所帮助. 第一种方法:通过iis中的ip地址和域名限制. 此方法简单有效,建议使用 点击网站--右键属性--目录安全性--IP地 ...

  10. Android下基于SDL的位图渲染（二）理论篇

    理论篇 上一篇中介绍了如何将SDL2源码应用到Android渲染中,实际上SDL本身提供的android-project实现了基于android的c运行时环境,通过上面实践篇的介绍,就是完成这个环境搭 ...