加载中...

AngularJS之初级Route【一】（六）

前言

这一节我们来讲讲AngularJS中的路由以及利用AngularJS在WebAPi中进行CRUD。下面我们一起来看看。

话题

当我们需要进行路由映射时即用到$route服务，在AngularJS中依赖于ngRoute模块，所以鉴于此我们得添加这个模块。添加路由服务则会映射URL到对应的视图名称，通过$location.path方法匹配到映射的视图时，视图会进行加载并呈现。在$route服务中使用映射则通过provider即$routeProvider，该服务的第一个参数是通过URL需要应用的路由，第二个参数为路由配置对象。例如，如下：

  1. app.config(function ($routeProvider) {  
  2.     
  3.     $routeProvider.when("/mobile", {  
  4.         templateUrl: "cnblogs.html",  
  5.         controller: "cnblogsController"  
  6.     });  
  7.   
  8. });

在$routeProvider中还有其他路由属性，我们看看。

路由配置

我们给出如下路由的有关属性列表。

Name Descriptions
controller 指定匹配到的视图中的控制器名称
controllerAs 指定控制器的别名
Template 指定返回视图的内容
templateUrl 指定通过URL匹配对应的路由中的视图并呈现，该属性是一个字符串或者返回值为字符串的函数
resolve 指定控制器的依赖
redirectTo 当路由进行匹配时可以进行重定向

上述我们关于路由基本讲述完毕，但是我们还未说一个东西，那就是在AngularJS的路由中如何进行参数的传递呢？如下：

  1. $routeProvider.when("/tv/:discount", {  
  2.         templateUrl: "tv.html",  
  3.         controller: "TVController"  
  4.     });

如上述的 /tv/:discount 传递参数通过冒号（：）加上参数名称即可。

下面我们通过实际例子来加深理解AngularJS中的路由。

实例1

Index.html

  1. <html>  
  2. <head>  
  3.     <title>Home Page For Route</title>  
  4.     <style type="text/css">
  5.         a{
  6.             cursor:pointer;
  7.         }
  8.     </style>
  9.     <meta charset="utf-8"/>
  10.     <link href="../Content/bootstrap.min.css" rel="stylesheet" />  
  11.     <script src="../Scripts/angular.js"></script>  
  12.     <script src="../Scripts/angular-route.js"></script>  
  13.     <script src="app.js"></script>  
  14.     <script src="IndexController.js"></script>  
  15.     <script src="HomeController.js"></script>  
  16.     <script src="MobileController.js"></script>  
  17.     <script src="TVController.js"></script>  
  18.     <script src="ComputerController.js"></script>  
  19. </head>  
  20. <body ng-app="app" ng-controller="IndexController">  
  21.     <div class="rowDiv panel panel-primary">  
  22.         <h2 class="panel-heading">Angular Route</h2>  
  23.         <table style="width:40%;">  
  24.             <tr class="table-bordered">  
  25.                 <td><a ng-click="fnGoToPage('home');" class="btn-block">Home</a></td>  
  26.                 <td><a ng-click="fnGoToPage('mobile');">Mobile</a></td>  
  27.                 <td><a ng-click="fnGoToPage('tv');">TV</a></td>  
  28.                 <td><a ng-click="fnGoToPage('computer');">Computers</a></td>  
  29.             </tr>  
  30.         </table>  
  31.   
  32.     </div>  
  33.     <div class="rowDiv navbar-form">  
  34.         <div class="pgHolder" ng-view>  
  35.         </div>  
  36.     </div>  
  37. </body>  
  38. </html>

IndexController.js

  1. testApp.controller("IndexController", ['$scope', '$http', '$location',  
  2.     function ($scope, $http, $location) {  
  3.         $scope.fnGoToPage = function (args) {  
  4.             if (args == 'tv') {  
  5.                 $location.path('/' + args + "/80%");  
  6.             }  
  7.             else  
  8.                 $location.path('/' + args);  
  9.         }  
  10.     }  
  11. ]);

再给出其中一个视图及其对应的脚本（其他则不再给出）

TV.html

  1. <div class="panel-body">  
  2.     <h2 class="panel-heading">所有产品打折{{discount}}</h2>  
  3.     <table class="table table-striped table-bordered">  
  4.         <thead>  
  5.             <tr>  
  6.                 <th>Name</th>  
  7.                 <th>Company</th>  
  8.                 <th class="text-right">Quantity</th>  
  9.                 <th class="text-right">Price</th>  
  10.             </tr>  
  11.         </thead>  
  12.         <tbody>  
  13.             <tr ng-repeat="item in data">  
  14.                 <td>{{item.name}}</td>  
  15.                 <td>{{item.company}}</td>  
  16.                 <td class="text-right">{{item.quantity}}</td>       
  17.                 <td class="text-right">{{item.price | currency}}</td>                  
  18.             </tr>  
  19.         </tbody>  
  20.     </table>  
  21. </div>

TVController.js

  1. testApp.controller("TVController", ['$scope', '$http','$routeParams',  
  2.     function ($scope, $http, $routeParams) {  
  3.         $scope.discount = $routeParams.discount; //通过$routeParams来获取路由参数即上述传递过来的80%  
  4.   
  5.         $scope.data = [ { name: 'LED TV 20"', company: 'Samsung', quantity: '10', price: '11000.00' },  
  6.                         { name: 'LED TV 24"', company: 'Samsung', quantity: '50', price: '15000.00' },  
  7.                         { name: 'LED TV 32"', company: 'LG', quantity: '10', price: '32000.00' },  
  8.                         { name: 'LED TV 48"', company: 'SONY', quantity: '25', price: '28000.00' }];  
  9.     }  
  10. ]);

下面我们来看看具体效果：

接下来我们通过一个简单利用WebAPi和AngularJS结合来完成CURD的例子。

AngularJS CRUD for WebAPi 

在AngularJS中我们可以利用$resource来进行发送请求有get、save、query、remove、delete方法。下面给出应用程序结构。

moviesService.js 

通过此脚本来与WebAPi进行交互获取数据。

  1. (function () {
  2.     'use strict';
  4.     angular
  5.         .module('moviesServices', ['ngResource'])
  6.         .factory('Movie', Movie);
  8.     Movie.$inject = ['$resource'];
  10.     function Movie($resource) {
  11.         return $resource('/api/movies/:id');
  12.     }
  14. })();

Index.cshtml

通过此视图作为母版加载其他页面

  1. @{
  2.     Layout = null;
  3. }
  5. <!DOCTYPE html>
  6. <html ng-app="moviesApp">
  7. <head>
  8.     <base href="/">
  9.     <meta charset="utf-8" />
  10.     <title>Movies</title>
  11.     <!-- jQuery -->
  12.     <script src="../Scripts/jquery-1.10.2.min.js"></script>
  13.     <!-- Bootstrap -->
  14.     <link href="../Content/bootstrap.min.css" rel="stylesheet" />
  15.     <script src="../Scripts/bootstrap.min.js"></script>
  16.     <!-- AngularJS-->
  17.     <script src="../Scripts/angular.min.js"></script>
  18.     <script src="../Scripts/angular-resource.min.js"></script>
  19.     <script src="../Scripts/angular-route.min.js"></script>
  20.     <script src="../../movies/Services/moviesService.js"></script>
  21.     <script src="../../movies/app.js"></script>
  22.     <script src="../../movies/Controllers/moviesController.js"></script>
  23. </head>
  24. <body ng-cloak>
  25.     <div class="container-fluid">
  26.         <ng-view></ng-view>
  27.     </div>
  28. </body>
  29. </html>

app.js

加载依赖模块以及对应的控制器执行的相应操作

  1. (function () {
  2.     'use strict'; 
  4.     config.$inject = ['$routeProvider']; 
  6.     angular.module('moviesApp', [
  7.         'ngRoute', 'moviesServices'
  8.     ]).config(config);
  10.     function config($routeProvider) {
  11.         $routeProvider
  12.             .when('/', {
  13.               templateUrl: '../../movies/Views/list.html',
  14.               controller: 'MoviesListController'
  15.             })
  16.             .when('/movies/add', {
  17.                 templateUrl: '../../movies/Views/add.html',
  18.                 controller: 'MoviesAddController'
  19.             })
  20.             .when('/movies/edit/:id', {
  21.                 templateUrl: '../../movies/Views/edit.html',
  22.                 controller: 'MoviesEditController'
  23.             })
  24.             .when('/movies/delete/:id', {
  25.                 templateUrl: '../../movies/Views/delete.html',
  26.                 controller: 'MoviesDeleteController'
  27.             });
  29.     }
  31. })();

上述核心脚本已经给出，至于其他页面则不再平铺代码，下面我们来看看效果：

 

对于上述利用angular-resource来发送请求只能满足基本要求，还是不够灵活，在实际开发中建议只用基于RESTful API的 Restangular 。它与$resource有何不同呢？如下：

（1）它使用promise而$resource没有。

（2）我们可以使用$routeProvider.resolve来解析注入的对象。

（3）它没有$resource诸多的bug。

（4）支持所有HTTP方法。

（5）支持ETag 。

（6）支持自连接元素。

（7）对于每个请求我们不需要创建$resource对象。

 ......

该服务脚本地址：https://github.com/mgonto/restangular#differences-with-resource

总结 

本节我们学习了AngularJS中的路由，同时也利用WebAPi和AngularJS进行基本的增、删、改等。到目前为止，关于AngularJS中几大重点就已大概叙述完毕，后面会讲讲AngularJS中的一些常用指令，当然也会通过一些实际例子来加深我们的理解且就遇到的问题进行积累。今天到此为止。

还没有评论.