AngularJS Notes

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的@、=、&的理解

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

最新文章

热门文章