（二）Angularjs

 AngularJS AJAX

AngularJS提供了$http控制，可以用来获取服务器端的数据。服务器通过一个数据库的读取操作来获取需要的数据。注意AngularJS需要JSON格式的数据。一旦数据准备完毕，$http可以使用如下代码获取数据：

1   //后台提供的ajax数据提供url
2   var url="http://cdn.gbtags.com/gblibraryassets/libid102/jsondata.jsp";
3   
4   //使用http get方法获取数据，并且使用回调函数设置到students中
5   $http.get(url).success(function(response) {
6     $scope.students = response;
7   });

说明：

jsondata.jsp提供了后台的JSON数据$http服务器

通过一个ajax调用将http响应中的数据添加到正确的students中

students模型绘制数据到HTML页面的数据表里。

AngularJS 视图配置

AngularJS提供了ng-view和ng-template声明指令，和$routeProvider服务

ng-view 声明指令

ng-view主要用来创建一个可以展示页面对应生成视图的区域，这些视图可以使用配置方式生成

在主模块中定义一个ng-view的div，如下：

<div ng-app="mainApp">
...
   <div ng-view></div>
...
</div>

ng-template 声明指令

ng-template通过script标签来创建生成的HTML视图内容。包含了id属性，$routeProvider使用这个属性用来映射视图到对应的控制器

主模块中定义一个script区域作为ng-template

<div ng-app="mainApp">
...
  <!-- 定义视图相关模板 -->
  <script type="text/ng-template" id="add.htm">
    <h2> 添加操作 </h2>
      {{message}}
  </script>
  <script type="text/ng-template" id="view.htm">
    <h2> 阅读操作 </h2>        
      {{message}}
  </script>    

</div>

$routeProvider服务

$routeProvider是一个关键服务，用来设置URL相关配置，映射到对应的HTML页面或者ng-template，并且绑定到指定控制器

<div ng-app="mainApp" class="ng-scope">

  <!-- 定义两个视图操作 -->
  <p><a href="#add">添加</a></p>
  <p><a href="#view">阅读</a></p>
  <p><a href="#undefine">其它</a></p>
  
  <hr class="clearfix">
  
  <!-- 定义视图 -->
  <!-- ngView:  --><div ng-view="" class="ng-scope">
    <h2 class="ng-scope"> +添加操作 </h2><span class="ng-binding ng-scope">
      这里演示视图的添加操作
  </span></div>
  
  <!-- 定义视图相关模板 -->
  <script type="text/ng-template" id="add.htm">
    <h2> +添加操作 </h2>
      {{message}}
  </script>
  
  <script type="text/ng-template" id="view.htm">
    <h2> #阅读操作 </h2>        
      {{message}}
  </script>    
</div>
 1 var mainApp = angular.module("mainApp", ['ngRoute']);
 2 
 3 //$routeProvider用来设置URL相关配置，映射到对应的HTML页面或者ng-template，并且绑定到指定控制器
 4 mainApp.config(['$routeProvider',
 5                 function($routeProvider) {
 6                   $routeProvider.
 7                     when('/add', {
 8                       templateUrl: 'add.htm',
 9                       controller: 'AddController'
10                     }).
11                     when('/view', {
12                       templateUrl: 'view.htm',
13                       controller: 'ViewController'
14                     }).
15                     otherwise({
16                       redirectTo: '/add'
17                     });
18                 }]);
19 
20 mainApp.controller('AddController', function($scope) {
21   $scope.message = "这里演示视图的添加操作";
22 });
23 
24 mainApp.controller('ViewController', function($scope) {
25   $scope.message = "这里演示视图的阅读操作";
26 });

说明：

$routeProvider在mainApp模块中使用'$routeProvider'关键字定义了一个方法

$routeProvider定义了一个URL“/add”，用来映射到"add.htm"。add.htm也可以展现到主HTML页面中。如果HTML页面没有定义，那么ng-template需要在id="add.htm"中被使用。

如果没有其它的视图定义，那么otherwise将设置缺省的视图，即“add.htm”

AngulaJS 服务

AngularJS使用服务架构来支持关键点分离的概念。服务是Javascript方法，用来执行特定的功能。这样生成独立的单元，方便测试和维护。控制器根据需要可以调用需要的服务。服务通常使用以来注入方式导入。

AngularJS提供了很多内建的服务，例如，$http，$route，$window，$location等等。每一个服务都对应一个指定的方法。例如$http用来创建服务器端AJAX调用，$route用来定义相关路由信息等等。所有的服务都使用$符号开始。

两种方式创建服务

  • 工厂方法（Factory）
  • 服务方法（Service）

使用工厂方法

这里我们定义一个工厂，并且添加方法： 

1 var mainApp = angular.module("mainApp", []);
2       mainApp.factory('MathService', function() {     
3          var factory = {};  
4          factory.multiply = function(a, b) {
5             return a * b 
6          }
7          return factory;
8       });

使用服务方法

这里定义一个服务，并且赋予方法。我们也可以注入已经存在的服务

1 mainApp.service('CalcService', function(MathService){
2     this.square = function(a) { 
3         return MathService.multiply(a,a); 
4     }
5 });

完整代码：

<div ng-app="mainApp" ng-controller="CalcController" class="ng-scope">
  <p>输入一个数值: </p>
  <p><input type="number" ng-model="number" class="ng-valid ng-valid-number ng-dirty"></p>
  <button ng-click="square()">计算平方 X<sup>2</sup></button>
  <p class="ng-binding">计算结果: </p>
</div>
 1 mainApp.factory('MathService', function() {     
 2   var factory = {};  
 3   factory.multiply = function(a, b) {
 4     return a * b 
 5   }
 6     return factory;
 7 }); 
 8 
 9 mainApp.service('CalcService', function(MathService){
10   this.square = function(a) { 
11     return MathService.multiply(a,a); 
12   }
13 });
14 
15 mainApp.controller('CalcController', function($scope, CalcService) {
16   $scope.square = function() {
17     $scope.result = CalcService.square($scope.number);
18   }
19 });

AngularJS 依赖注入

依赖注入是一个软件设计思想，代表组件间提供依赖而非硬编码。依赖于定位依赖并且让组件可配置。这种方式可以帮助组件重用，高可维护并且可测试。

AngularJS提供了超棒的依赖注入机制。提供如下核心组件用来作为依赖注入：

  • Value
  • Factory
  • Service
  • Provider
  • Constant
  • value

value

value是一个简单的JS对象，在配置阶段用来传递数值到控制器

 1 //定义模块
 2 var mainApp = angular.module("mainApp", []);
 3 //创建一个数值对象作为缺省的输入
 4 mainApp.value("defaultInput", 5);
 5 ...
 6 //使用缺省名字"defaultInput"注入值到控制器
 7 mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
 8       $scope.number = defaultInput;
 9       $scope.result = CalcService.square($scope.number);
10  
11       $scope.square = function() {
12       $scope.result = CalcService.square($scope.number);
13    }
14 });

Factory

一个用来返回值的方法。一旦服务或者控制器需要就创建了一个需要的值。这里使用工厂方法计算并且返回值

 1 //定义模块
 2 var mainApp = angular.module("mainApp", []);
 3 //创建工厂"MathService"，提供一个方法来生成平方
 4 mainApp.factory('MathService', function() {     
 5    var factory = {};  
 6    factory.multiply = function(a, b) {
 7       return a * b 
 8    }
 9    return factory;
10 }); 
11  
12 //注入工厂“MathService”到服务，并且多次使用这个方法
13 mainApp.service('CalcService', function(MathService){
14       this.square = function(a) { 
15       return MathService.multiply(a,a); 
16    }
17 });

Service

一个单例的Javascript对象，包含了一系列的方法执行特定任务。Service是使用service方法定义，并且注入到控制器

//定义模块
var mainApp = angular.module("mainApp", []);
...
//创建一个包含square方法的服务
mainApp.service('CalcService', function(MathService){
      this.square = function(a) { 
      return MathService.multiply(a,a); 
   }
});
//注入服务"CalcService"到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
      $scope.number = defaultInput;
      $scope.result = CalcService.square($scope.number);
 
      $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

AngularJS 依赖注入

Value

一个简单的JS对象，在配置阶段用来传递数值到控制器（配置阶段指AngularJS启动自身）

//定义模块
var mainApp = angular.module("mainApp", []);
//创建一个数值对象作为缺省的输入
mainApp.value("defaultInput", 5);
...
//使用缺省名字"defaultInput"注入值到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
      $scope.number = defaultInput;
      $scope.result = CalcService.square($scope.number);
 
      $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

Factory

一个用来返回值的方法。一旦服务或者控制器需要就创建了一个需要的值。这里使用工厂方法计算并且返回值

//定义模块
var mainApp = angular.module("mainApp", []);
//创建工厂"MathService"，提供一个方法来生成平方
mainApp.factory('MathService', function() {     
   var factory = {};  
   factory.multiply = function(a, b) {
      return a * b 
   }
   return factory;
}); 
 
//注入工厂“MathService”到服务，并且多次使用这个方法
mainApp.service('CalcService', function(MathService){
      this.square = function(a) { 
      return MathService.multiply(a,a); 
   }
});
...

Service

一个单例的Javascript对象，包含了一系列的方法执行特定任务。Service是使用service方法定义，并且注入到控制器

//定义模块
var mainApp = angular.module("mainApp", []);
...
//创建一个包含square方法的服务
mainApp.service('CalcService', function(MathService){
      this.square = function(a) { 
      return MathService.multiply(a,a); 
   }
});
//注入服务"CalcService"到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
      $scope.number = defaultInput;
      $scope.result = CalcService.square($scope.number);
 
      $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

Provider

主要用来在配置阶段创建Service，Factory等等。下面的script可以用来创建MathService。Provider是一个指定的工厂方法，包含一个get方法来返回value/service/factory

//定义模块
var mainApp = angular.module("mainApp", []);
...
 
//创建一个使用provider的服务，这个服务定义了一个方法square来返回数字的平方值
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

Constants

用来在配置阶段传递数值，注意这个常量在配置阶段不可使用

mainApp.constant("configParam", "constant value");
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/huair_12/p/4326338.html