（一）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即是需要定义的控制器方法：

 1 //控制器使用Javascript来定义，如下： 2   3 function myCtrl($scope){ 4   $scope.course = { //定义一个course对象 5     title:"AngularJS入门", 6     enroll: 20, 7     result: function(){ 8       //定义一个方法：这个方法返回组装的字符串 9       var courSEObj;10       courseObj = $scope.course;11       return courseObj.title + " " + courseObj.enroll + "人报名中";12     }13   };14 }

在页面中使用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的模块

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

应用模块

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>