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. 使用Talend Open Studio将数据分步从oracle导入到hive中

    先使用Tos建立模型,将Oracle中的数据导入到本地: build job后,形成独立可以运行的程序: 将生成的zip文件,上传到hadoop集群上,有hive环境的机器上: [hive@h1 wo ...

  2. Outlook 如何初始化邮箱

    首先我们找到邮箱的安装位置,我们可以右键Outlook,然后看其属性.找到其安装位置,复制下来,比如说 "C:\Program Files\Microsoft Office\root\Off ...

  3. 手把手教你使用“谷歌云消息服务(GCM)"

    原文: http://android.eoe.cn/topic/summary GCM结构概述-GCM Architectural Overview 快速预览* 一个状态通知允许应用程序通知用户一个事 ...

  4. Datagrid分页、排序、删除代码

    <%@ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="fal ...

  5. Fiddler 抓取 app 网络请求数据

    通过设置代理在同一个路由器下可以通过 Fiddler 实现抓取 app 的网络数据 步骤如下: 手机(Android ,iOS 都可以)和 PC 连到同一个路由器 对手机连接的 WIFI 设置代理,代 ...

  6. Java 格式化数字

    ; ){ DecimalFormat df = "); String xs = df.format(x); System.out.println(xs); x++; } 将 1 格式化为 0 ...

  7. Cloud Resource

    Cloud Public Cloud Aliyun AWS Azure Cloud Stack SDN指南 DNS:Band Private Cloud DC/OS OpenStack Hybrid ...

  8. 关于ddx/ddy重建法线在edge边沿上的artifacts问题

    经验证,原来ddx/ddy这两个操作,在forward rendering与deferred rendering中存在着微妙的应用区别. 在forward rendering中,GPU shader会 ...

  9. 注册表彻底卸载sql

    先在控制面板中删除sql,然后再删除注册表1.打开注册表. 开始——运行——regedit——确定 2.然后找到下面的文件夹,删除掉: HKEY_CURRENT_USER\ Software\ Mic ...

  10. layui的table中使用switch

    {{# if(false){ }} <input type="checkbox" name="switch" lay-skin="switch& ...