你的位置:首页 > Java教程

[Java教程](三)Angularjs


 AngularJS AJAX

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

1  //后台提供的ajax数据提供url2  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 });