AngularJS之初級Route【一】（六）

時間  2019-11-08
標籤 angularjs 初級 route 欄目 AngularJS 简体版
原文   原文鏈接

前言

這一節咱們來說講AngularJS中的路由以及利用AngularJS在WebAPi中進行CRUD。下面咱們一塊兒來看看。css

話題

當咱們須要進行路由映射時即用到$route服務，在AngularJS中依賴於ngRoute模塊，因此鑑於此咱們得添加這個模塊。添加路由服務則會映射URL到對應的視圖名稱，經過$location.path方法匹配到映射的視圖時，視圖會進行加載並呈現。在$route服務中使用映射則經過provider即$routeProvider，該服務的第一個參數是經過URL須要應用的路由，第二個參數爲路由配置對象。例如，以下：html

app.config(function ($routeProvider) {  
    
    $routeProvider.when("/mobile", {  
        templateUrl: "cnblogs.html",  
        controller: "cnblogsController"  
    });  
  
});

在$routeProvider中還有其餘路由屬性，咱們看看。jquery

路由配置

咱們給出以下路由的有關屬性列表。git

Name Descriptions
controller 指定匹配到的視圖中的控制器名稱
controllerAs 指定控制器的別名
Template 指定返回視圖的內容
templateUrl 指定經過URL匹配對應的路由中的視圖並呈現，該屬性是一個字符串或者返回值爲字符串的函數
resolve 指定控制器的依賴
redirectTo 當路由進行匹配時能夠進行重定向

上述咱們關於路由基本講述完畢，可是咱們還未說一個東西，那就是在AngularJS的路由中如何進行參數的傳遞呢？以下：github

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

如上述的 /tv/:discount 傳遞參數經過冒號（：）加上參數名稱便可。bootstrap

下面咱們經過實際例子來加深理解AngularJS中的路由。api

實例1

Index.htmlpromise

<html>  
<head>  
    <title>Home Page For Route</title>  
    <style type="text/css">
        a{
            cursor:pointer;
        }
    </style>
    <meta charset="utf-8"/>
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />  
    <script src="../Scripts/angular.js"></script>  
    <script src="../Scripts/angular-route.js"></script>  
    <script src="app.js"></script>  
    <script src="IndexController.js"></script>  
    <script src="HomeController.js"></script>  
    <script src="MobileController.js"></script>  
    <script src="TVController.js"></script>  
    <script src="ComputerController.js"></script>  
</head>  
<body ng-app="app" ng-controller="IndexController">  
    <div class="rowDiv panel panel-primary">  
        <h2 class="panel-heading">Angular Route</h2>  
        <table style="width:40%;">  
            <tr class="table-bordered">  
                <td><a ng-click="fnGoToPage('home');" class="btn-block">Home</a></td>  
                <td><a ng-click="fnGoToPage('mobile');">Mobile</a></td>  
                <td><a ng-click="fnGoToPage('tv');">TV</a></td>  
                <td><a ng-click="fnGoToPage('computer');">Computers</a></td>  
            </tr>  
        </table>  
  
    </div>  
    <div class="rowDiv navbar-form">  
        <div class="pgHolder" ng-view>  
        </div>  
    </div>  
</body>  
</html>

IndexController.jsapp

testApp.controller("IndexController", ['$scope', '$http', '$location',  
    function ($scope, $http, $location) {  
        $scope.fnGoToPage = function (args) {  
            if (args == 'tv') {  
                $location.path('/' + args + "/80%");  
            }  
            else  
                $location.path('/' + args);  
        }  
    }  
]);

再給出其中一個視圖及其對應的腳本（其餘則再也不給出）ide

TV.html

<div class="panel-body">  
    <h2 class="panel-heading">全部產品打折{{discount}}</h2>  
    <table class="table table-striped table-bordered">  
        <thead>  
            <tr>  
                <th>Name</th>  
                <th>Company</th>  
                <th class="text-right">Quantity</th>  
                <th class="text-right">Price</th>  
            </tr>  
        </thead>  
        <tbody>  
            <tr ng-repeat="item in data">  
                <td>{{item.name}}</td>  
                <td>{{item.company}}</td>  
                <td class="text-right">{{item.quantity}}</td>       
                <td class="text-right">{{item.price | currency}}</td>                  
            </tr>  
        </tbody>  
    </table>  
</div>

TVController.js

testApp.controller("TVController", ['$scope', '$http','$routeParams',  
    function ($scope, $http, $routeParams) {  
        $scope.discount = $routeParams.discount; //經過$routeParams來獲取路由參數即上述傳遞過來的80%  
  
        $scope.data = [ { name: 'LED TV 20"', company: 'Samsung', quantity: '10', price: '11000.00' },  
                        { name: 'LED TV 24"', company: 'Samsung', quantity: '50', price: '15000.00' },  
                        { name: 'LED TV 32"', company: 'LG', quantity: '10', price: '32000.00' },  
                        { name: 'LED TV 48"', company: 'SONY', quantity: '25', price: '28000.00' }];  
    }  
]);

下面咱們來看看具體效果：

接下來咱們經過一個簡單利用WebAPi和AngularJS結合來完成CURD的例子。

AngularJS CRUD for WebAPi 

在AngularJS中咱們能夠利用$resource來進行發送請求有get、save、query、remove、delete方法。下面給出應用程序結構。

moviesService.js 

經過此腳原本與WebAPi進行交互獲取數據。

(function () {
    'use strict';

    angular
        .module('moviesServices', ['ngResource'])
        .factory('Movie', Movie);

    Movie.$inject = ['$resource'];

    function Movie($resource) {
        return $resource('/api/movies/:id');
    }

})();

Index.cshtml

經過此視圖做爲母版加載其餘頁面

@{
    Layout = null;
}

<!DOCTYPE html>
<html ng-app="moviesApp">
<head>
    <base href="/">
    <meta charset="utf-8" />
    <title>Movies</title>
    <!-- jQuery -->
    <script src="../Scripts/jquery-1.10.2.min.js"></script>
    <!-- Bootstrap -->
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap.min.js"></script>
    <!-- AngularJS-->
    <script src="../Scripts/angular.min.js"></script>
    <script src="../Scripts/angular-resource.min.js"></script>
    <script src="../Scripts/angular-route.min.js"></script>
    <script src="../../movies/Services/moviesService.js"></script>
    <script src="../../movies/app.js"></script>
    <script src="../../movies/Controllers/moviesController.js"></script>
</head>
<body ng-cloak>
    <div class="container-fluid">
        <ng-view></ng-view>
    </div>
</body>
</html>

app.js

加載依賴模塊以及對應的控制器執行的相應操做

(function () {
    'use strict'; 

    config.$inject = ['$routeProvider']; 

    angular.module('moviesApp', [
        'ngRoute', 'moviesServices'
    ]).config(config);

    function config($routeProvider) {
        $routeProvider
            .when('/', {
              templateUrl: '../../movies/Views/list.html',
              controller: 'MoviesListController'
            })
            .when('/movies/add', {
                templateUrl: '../../movies/Views/add.html',
                controller: 'MoviesAddController'
            })
            .when('/movies/edit/:id', {
                templateUrl: '../../movies/Views/edit.html',
                controller: 'MoviesEditController'
            })
            .when('/movies/delete/:id', {
                templateUrl: '../../movies/Views/delete.html',
                controller: 'MoviesDeleteController'
            });

    }

})();

上述核心腳本已經給出，至於其餘頁面則再也不平鋪代碼，下面咱們來看看效果：

 

對於上述利用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中的一些經常使用指令，固然也會經過一些實際例子來加深咱們的理解且就遇到的問題進行積累。今天到此爲止。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程