Latest web development tutorials

angularjs Routing

W tym rozdziale będziemy wprowadzać angularjs trasą.

Angularjs kierowane przez innego URL umożliwia nam dostęp do różnych treści.

Przez angularjs można zobaczyć więcej niż jednej stronie aplikacji internetowych (jedna strona aplikacji internetowych, SPA).

Nasz adres jest zazwyczaj w postacihttp://w3big.com/first/page~~pobj, ale w pojedynczej stronie Aplikacje internetowe angularjs przez znak # +osiągnąć, na przykład:

http://w3big.com/#/first
http://w3big.com/#/second
http://w3big.com/#/third

Po kliknięciu na którekolwiek z powyższych, gdy mamy link do serwera prosimy adresu są takie same (http://w3big.com/). Ponieważ zawartość po znaku # w celu zapytania o usługę są ignorowane przez przeglądarkę. Więc musimy zaimplementować funkcję kliencką # w dalszej realizacji. Angularjs trasy, aby pomóc nam przez# znakiem +, aby odróżnić innej strony logiczne i oddzielne strony związane z odpowiednim sterownikiem.

Na powyższym wykresie widać, że powstały dwa URL: / ShowOrders i / AddNewOrder. Każdy URL ma odpowiedni widok i kontroler.

Następny patrzymy na prosty przykład:

<html>
    <head>
    	<meta charset="utf-8">
        <title>AngularJS 路由实例 - 本教程</title>
    </head>
    <body ng-app='routingDemoApp'>
     
        <h2>AngularJS 路由应用</h2>
        <ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/computers">电脑</a></li>
            <li><a href="#/printers">打印机</a></li>
            <li><a href="#/blabla">其他</a></li>
        </ul>
         
        <div ng-view></div>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
        <script>
            angular.module('routingDemoApp',['ngRoute'])
            .config(['$routeProvider', function($routeProvider){
                $routeProvider
                .when('/',{template:'这是首页页面'})
                .when('/computers',{template:'这是电脑分类页面'})
                .when('/printers',{template:'这是打印机页面'})
                .otherwise({redirectTo:'/'});
            }]);
        </script>
     
     
    </body>
</html>

Spróbuj »

Przykłady analizy:

  • 1, załadowany wdrożenie routingu pliku JS: skośnych route.js.

  • 2 zawiera moduł ngRoute jako zależną od modułu głównego modułu aplikacji.

    angular.module('routingDemoApp',['ngRoute'])
    
  • 3, za pomocą instrukcji ngView.

    <div ng-view></div>

    Treść HTML w div w oparciu o zmiany trasy.

  • 4, konfiguracji $ routeProvider, angularjs $ routeProvider używany do definiowania reguł routingu.

    module.config(['$routeProvider', function($routeProvider){
        $routeProvider
            .when('/',{template:'这是首页页面'})
            .when('/computers',{template:'这是电脑分类页面'})
            .when('/printers',{template:'这是打印机页面'})
            .otherwise({redirectTo:'/'});
    }]);
    

config Moduł angularjs funkcja służy do konfigurowania reguł routingu. Używając configAPI, prosimy o $ routeProvider wstrzykiwany do naszej funkcji konfiguracji i użyć $ routeProvider.whenAPI zdefiniować nasze zasady routingu.

$ RouteProvider nam kiedy (ścieżki, obiektu) i inny (obiektu) Funkcja określa wszystkie trasy w kolejności, w jakiej bierze dwa argumenty:

  • Pierwszy parametr to zasady regularnego URL lub adres URL.
  • Drugim parametrem jest obiekt konfiguracji routingu.

Obiekt Ustawienia trasy

Angularjs trasa może zostać osiągnięty za pomocą różnych szablonów.

Pierwszy argument funkcji $ routeProvider.when jest regularny URL reguła lub URL, druga konfiguracja parametrów trasy.

Routing Konfiguracja zasady składni obiektu są następujące:

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

Parametr Opis:

  • szablon:

    Jeśli musimy tylko wstawić prostą zawartość HTML w ng-view, a następnie użyć tego parametru:

    .when('/computers',{template:'这是电脑分类页面'})
  • templateUrl:

    Jeśli musimy tylko wstawić pliki szablonów HTML w NG-view, a następnie użyć tego parametru:

    $routeProvider.when('/computers', {
        templateUrl: 'views/computers.html',
    });
    

    Powyższy kod dostanie widoki z zawartości pliku server / computers.html do NG-view.

  • kontroler:

    Funkcja, string lub typu tablica, funkcja kontrolera jest wykonywana na bieżącym szablonie, należy utworzyć nowy zakres.

  • controllerAs:

    typ string, określić alias dla sterownika.

  • redirectTo:

    Adres przekierowania.

  • rozwiązania:

    Określa bieżący kontroler opiera się na innych modułów.

Przykłady

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>

  
</head>

<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> Home </h1>
  </script>

  <script type="text/ng-template" id="embedded.about.html">
      <h1> About </h1>
  </script>

  <div> 
    <div id="navigation">  
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>
      
    <div ng-view="">
    </div>
  </div>
</body>
</html>

Spróbuj »