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. 用Entityframework 调用Mysql时，datetime格式插入不进去数据库的解决办法。

    1. 打开Model.edmx, 2. 选择userinfo中的createtime字段的属性 3. storegeneratedpattern设置值为None

  2. svn提交遇到冲突解决方法

    冲突:如果提交时候发现冲突了先不急着提交,否则会产生冲突文件. 解决步骤: 1.将本地文件先复制一份 2.svn revert(恢复到没修改前版本) -> svn update(更新当前最新版本 ...

  3. js评价五星

    js评价五星 1.图片(star.png): 2.图片和html文件在同级目录 <html> <head> <script src="http://libs.b ...

  4. Android面试、开发之高手 编码规范与细节

    凝视 [规则1]必须用 javadoc 来为类生成文档.不仅由于它是标准.这也是被各种java 编译器都认可的方法. [规则2]在文件的開始部分应该有文件的说明信息,应包括例如以下信息: (1)版权信 ...

  5. FFmpeg(10)-利用FFmpeg进行视频像素格式和尺寸的转换(sws_getCachedContext(), sws_scale())

    一.包含头文件和库文件 像素格式的相关函数包含在 libswscale.so 库中,CMakeLists需要做下列改动: # swscale add_library(swscale SHARED IM ...

  6. Flink KAFKA

    https://data-artisans.com/blog/kafka-flink-a-practical-how-to https://github.com/dataArtisans/kafka- ...

  7. PBR Metallic/Roughness工作流中Albedo与F0的计算方法

    首先简单回顾一下典型的纯金属与绝缘体的PBR属性: 纯金属: Albedo(diff): 0 F0(spec): >0.3 (or 0.5, epic/allegorithmic etc.) M ...

  8. vs code 快捷键的使用

    vs code 快捷键的使用 shift + f12 快速查找函数的生成Ctrl+F12 查看单个函数的定义Shift+F12 查看所有函数的定义ctrl + ` 是打开运行的程序ctrl + Tab ...

  9. ftell函数使用注意事项

    ftell函数的原型如下: long ftell(FILE *stream); 主要功能是获取FILE指针在当前文件中的位置. 但在使用文本模式打开文件时,ftell函数返回值不一定跟FILE文件指针 ...

  10. Ubuntu设置静态连接连不上网

    今天新建了一个Ubuntu虚拟机,一切都好了之后,设置了静态ip,但是上不了网,但是使用dhcp可以上网. 搞了几个小时也没有搞定,记录一下这些信息