• 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>
    View Code
    <!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>
    View Code
    <!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>
    View Code
     
    Let's add a new controller method to PhoneDetailCtrl 
    $scope.hello = function(name) {
        alert('Hello ' + (name || 'world') + '!');
    }
    View Code
    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>
    View Code
    (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"
          };
        });
      })();
    View Code
    <!--  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>
    View Code

    我对Directive里面的attribute的@、=、&的理解

  • 相关阅读:
    C# 操作XML文件
    参数化查询为什么能够防止SQL注入
    引用asp.net母版页后,母版页和内容页的页面事件执行顺序
    简单的数据库时间查询
    WCFService Configuration Editor的使用
    显示、隐藏计算机Administrator账户
    在ASP程序中调用Web Service
    ASP.NET WAP开发
    Microsoft SQL Server 2005 错误 29503。SQL Server 服务无法启动
    ASPNET2.0中读写Cookie的方法!
  • 原文地址:https://www.cnblogs.com/null00/p/3926254.html
Copyright © 2020-2023  润新知