（一）Angularjs

AngularJS进行应用开发的一个重要的思维模式： 从构造声明式界面入手

ng-app: 这个指定定义并且关联了使用angularJS的HTML页面部分

ng-model: 这个指定定义并绑定AngularJS数据和HTML页面中相关输入元素(input,textarea等等)

ng-bind: 这个指定将AngularJS的数据绑定到页面指定HTML元素上，例如, <p>

<div ng-app="" class="ng-scope">
  <input type="text" ng-model="website" class="ng-pristine ng-valid">
  <p>
    你好，<span ng-bind="website" class="ng-binding"></span>
  </p>
</div>

<script src="angular.min.js"></script>

相关说明：

ng-app 指定暗示AngularJS程序开始
ng-mode 指定定义了一个“模型”名称，使用这个名称可以在上面ng-app中访问和使用相关数据
ng-bind 指定使用上面定义的“模型”名称展示到页面相关的元素中.
</div>关闭标签暗示了当前AngularJS应用结束 

 

ng-init：定义程序初始化的一些数据
ng-repeat：定义重获取数据集中的内容

<div ng-app="" ng-init="languages=[{name:'java', learningcurve:'high'},{name:'javascript',learningcurve:'medium'}]">
  <p>编程语言</p>
  <ul>
    <li ng-repeat="language in languages">
      {{'编程语言：'+ language.name +', 难度：' + language.learningcurve}}
    </li>
  </ul>
</div>

AngularJS中的控制器

ng-controller：定义控制器来控制模块的相关数据

页面定义：

<div ng-app="" ng-controller="myCtrl">
...
</div>

myCtrl即是需要定义的控制器方法：

//控制器使用Javascript来定义，如下：
 
function myCtrl($scope){
  $scope.course = { //定义一个course对象
    title:"AngularJS入门",
    enroll: 20,
    result: function(){
      //定义一个方法：这个方法返回组装的字符串
      var courseObj;
      courseObj = $scope.course;
      return courseObj.title + " " + courseObj.enroll + "人报名中";
    }
  };
}

在页面中使用ng-model绑定输入元素，使用表达式来调用控制器相关方法，如下：

<div ng-app="" ng-controller="myCtrl">
  课程：<input type="text" ng-model="course.title"><br>
  报名：<input type="text" ng-model="course.enroll"><br>
  <hr>
  课程报名信息：<span class="text">{{course.result()}}</span>
</div>

AngularJS的过滤器使用

uppercase：转换为大写
lowercase：转换为小写
currency：转换为货币单位
filter：过滤内容
orderby：内容排序

<div ng-app="" 
      ng-init="books=[{language:'javascript', price:50},
                        {language:'java', price:30},
                        {language:'c++', price:70},
                        {language:'html', price:20}]">
  
  过滤：<input type="text" ng-model="book">
  
  <ul>
    <li ng-repeat="book in books | filter: {language:book} | orderBy: 'price'">
      {{ book.language | uppercase }} : {{book.price | currency}}
    </li>
  </ul>
  
</div>

AngularJS的模块

AngularJS 支持模块化方式。模块用来帮助分离逻辑，例如，服务，控制器，应用等等。更利于代码的管理和维护。我可以方便的在不同的JS中定义不同的模块。这样对于大型项目来说，维护成本更低！

下面例子中，我们将创建两个模块：

• 应用模块：用来初始化控制器相关的应用
• 控制器模块：用来定义相关控制器

应用模块

var mainApp = angular.module("mainApp", []);

这里声明了一个mainApp的应用，使用了angular.module方法，并且传递了一个空的数组，这个数组用来包含独立的模块

控制器模块

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Terry",
      lastName: "Lee",
      fees:500,
      subjects:[
         {name:'编程语言基础',marks:90},
         {name:'C语言',marks:85},
         {name:'HTML/CSS',marks:61},
         {name:'Java',marks:85},
         {name:'NodeJS',marks:65}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
      }
   };
});

引用模块

<div ng-app="mainApp" ng-controller="studentController">
..
<script src="mainApp.js"></script>
<script src="studentController.js"></script>

事件

• ng-click
• ng-dbl-click
• ng-mousedown
• ng-mouseup
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-keydown
• ng-keyup
• ng-keypress
• ng-change

示例：表单reset效果，使用ng-click事件处理

<div ng-app="" ng-controller="studentController" class="ng-scope">

  <input name="firstname" type="text" ng-model="firstName" value="test" required="" class="ng-pristine ng-valid ng-valid-required"><br>
  <input name="lastname" type="text" ng-model="lastName" required="" class="ng-pristine ng-valid ng-valid-required"><br>
  <input name="email" type="email" ng-model="email" required="" class="ng-pristine ng-valid-email ng-valid ng-valid-required"><br>
  
  <!-- ng-click触发控制器方法 -->
  <button ng-click="reset()">点击这里重置表单数据</button>

</div>

function studentController($scope) { 
  //调用reset将表单输入框对应值设置为如下缺省值
  $scope.reset = function(){
    $scope.firstName = "terry";
    $scope.lastName = "lee";
    $scope.email = "terrylee@gbtags.com";
  }
  $scope.reset();
}   

Angular的include指令

ng-include：嵌入HTML页面

<div ng-app="" ng-controller="studentController">
 
  <!-- 使用angularjs的include指令导入一个外部html -->
  <div ng-include="'/cdn/gblibraryassets/libid101/main.html'"></div>  
 
</div>