angularJS笔记

1.angular快速开始

  • 标记ng-app告诉AngularJS处理整个HTML页并引导应用：

  • ng-model 指令把输入域的值绑定到应用程序变量 yourname

  • ng-bind 指令把应用程序变量 yourname 绑定到某个段落的 innerHTML

  • ng-init 指令初始化 AngularJS 应用程序变量。

  • 例子

      <!doctype html>
  <html ng-app>
      <head>
          <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
      </head>
      <body>
          Your name: <input type="text" ng-model="yourname" placeholder="World">
          <hr>
          Hello {{yourname || 'World'}}!

  		<div ng-app="" ng-init="firstName='John'">
  		<p>姓名为 <span ng-bind="firstName"></span></p>
  		</div>
      </body>
  </html>

2.angularJS应用

  • 例子：

      <div ng-app="myApp" ng-controller="myCtrl">
   
  名: <input type="text" ng-model="firstName"><br>
  姓: <input type="text" ng-model="lastName"><br>
  <br>
  姓名: {{firstName + " " + lastName}}
   
  </div>
   
  <script>
  /*AngularJS 模块定义应用:*/
  var app = angular.module('myApp', []);
  /*AngularJS 控制器控制应用:*/
  app.controller('myCtrl', function($scope) {
      $scope.firstName= "John";
      $scope.lastName= "Doe";
  });
  </script>

3.angularJS字符串

  • 例子：

      <div ng-app="" ng-init="firstName='John';lastName='Doe'">		 
  <p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>		 
  </div>

4.angularJS对象

  • 例子：

      <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> 
  <p>姓为 {{ person.lastName }}</p> 
  </div>
  使用ng-bind类似：
  <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> 
  <p>姓为 <span ng-bind="person.lastName"></span></p>
  </div>

5.angularJS数组

  • 例子：

      <div ng-app="" ng-init="points=[1,15,19,2,40]">
  <p>第三个值为 {{ points[2] }}</p>
  <p>第三个值为 <span ng-bind="points[2]"></span></p>
  </div>

6.一个页面创建多个ng-app

  • 1.ng-app是一个特殊的指令，一个HTML文档只出现一次，如出现多次也只有第一个起作用；ng-app可以出现在html文档的任何一个元素上。

  • 2.ng-app作用：告诉子元素指令是属于angularJs。

  • 3.ng-app的值可以为空（练习），项目中一定要赋值，后面所说的模块。

  • 例子：

      var app1 = angular.module("app1", []); //自动加载
  
  var app2 = angular.module("app2", []); //手动加载
  angular.bootstrap(document.getElementById("A2"), ['app2']); // 手动加载2

7.重复html元素

  • 例子：

      <div ng-app="" ng-init="names=[
  {name:'Jani',country:'Norway'},
  {name:'Hege',country:'Sweden'},
  {name:'Kai',country:'Denmark'}]">
   
  <p>循环对象：</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x.name + ', ' + x.country }}
    </li>
  </ul>	 
  </div>

8.1创建自定义指令

  • 可以使用 .directive 函数来添加自定义的指令。
    要调用自定义指令，HTML 元素上需要添加自定义指令名。
    使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

  • 例子：

      <body ng-app="myApp">
  /*元素名*/
  <runoob-directive></runoob-directive>
  以下实例方式也能输出同样结果:
  /*属性*/
  <div runoob-directive></div>
  /*类名*/
  <div class="runoob-directive"></div>
  /*注释*/
  <!-- directive: runoob-directive -->

  <script>
  var app = angular.module("myApp", []);
  app.directive("runoobDirective", function() {
      return {
          template : "<h1>自定义指令!</h1>"
      };
  });
  </script>
  
  </body>

8.2限制使用自定义指令

  • 通过添加 restrict 属性,并设置值为 "A", 来设置指令只能通过属性的方式来调用:

  • restrict 值可以是以下几种:

      E 作为元素名使用
  A 作为属性使用
  C 作为类名使用
  M 作为注释使用
  restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

  • 例子：

      var app = angular.module("myApp", []);
  app.directive("runoobDirective", function() {
      return {
          restrict : "A",
          template : "<h1>自定义指令!</h1>"
      };
  });
posted @ 2018-02-22 09:30  blue星期天  阅读(134)  评论(0)  编辑  收藏  举报