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. 搭建Dubbo+Myeclipse2015+Maven3.3.1的过程遇到问题集锦

    1. 找不到dubbo2.8.4包的问题 在编译Maven工程的过程中,出现如下问题: Description Resource Path Location Type ArtifactDescript ...

  2. Atitit 图像处理类库 halcon11  安装与环境搭建attilax总结

    Atitit 图像处理类库 halcon11  安装与环境搭建attilax总结 正常安装软件,安装前请先退出其它一切正在运行的程序. 先安装halcon-10.0-windows.exe.安装完成后 ...

  3. [svc]Linux vmstat命令实战详解

    vmstat输出 注:是cpu 内存 磁盘 虚拟内存交换情况 io读写情况 vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存 ...

  4. android笔记---主界面(一)

    <?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="htt ...

  5. [开源项目-MyBean轻量级配置框架] 使用MyBean快速搭建分模块的应用程序(主页面的TAB)(DLL-MDI)

    [概述] 抱歉由于上次开源比较匆忙,没有来的及做一个DEMO,里面也有些垃圾的文件没有及时清理.DEMO其实昨天晚上已经调通.相关说明文档今天晚上才说明好,欢迎大家继续关注和交流,和大家一起分享我10 ...

  6. 本地存储localStorage以及它的封装接口store.js的使用

    本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布   0 推荐 9 收藏 ...

  7. Beginning SDL 2.0(4) YUV加载及渲染

    本文主要内容是基于的“Beginning SDL 2.0(3) SDL介绍及BMP渲染”(以下简称BS3)基础上,将BMP加载及渲染修改为YUV420或I420的原始视频格式.阅读完本部分内容相信你可 ...

  8. android adb 读写模式 挂载文件系统

    http://www.qylk.blog.163.com/blog/static/1346873562013092154430/ http://blog.sina.com.cn/s/blog_9906 ...

  9. 有用的SAP System Administration T-CODE

    一,SAP系统管理常用到的事务代码1.  SM51 SAP Servers System Monitoring2.  SM21 SAP系统日志3.  SRZL  SAP计算机中心管理系统(CCMS) ...

  10. 使用spin.js优化等待ajax返回时的页面效果

    [本文出自天外归云的博客园] 最近在做一个JIRA信息统计的系统,在统计JIRA关联信息的过程中由于需要等待ajax返回结果到前端,时间较长,所以要添加一段等待时的loading画面,使用spin.j ...