Latest web development tutorials

AngularJS маршрутизации

В этой главе мы представим AngularJS маршрут.

AngularJS проложены через разные URL позволяет получить доступ к различным содержанием.

По AngularJS можно просматривать более чем одной странице веб-приложений (одна страница веб-приложений, SPA).

Наш URL , как правило , в видеhttp://w3big.com/first/page~~pobj, но в одной страницы веб - приложений AngularJS на # + отметкадостигается, например:

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

При нажатии на любой из вышеперечисленных, когда мы имеем связь с сервером, пожалуйста, обращайтесь совпадают (http://w3big.com/). Поскольку содержание после знака # в конце запроса на обслуживание будет игнорироваться браузером. Таким образом, мы должны реализовать функцию клиентскую # позже в реализации. AngularJS маршруты , чтобы помочь нам через# + отметка , чтобы отличить разные логические страницы и отдельные страницы , связанные с соответствующим контроллером.

В приведенном выше графике, мы можем видеть, что создали два URL: / ShowOrders и / AddNewOrder. Каждый URL имеет соответствующий вид и контроллер.

Далее мы рассмотрим простой пример:

<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>

Попробуйте »

Примеры анализа:

  • 1, погрузили реализации маршрутизации JS файл: угловато-route.js.

  • 2, включает в себя модуль ngRoute в качестве основного модуля приложения зависимого модуля.

    angular.module('routingDemoApp',['ngRoute'])
    
  • 3, с помощью инструкции ngView.

    <div ng-view></div>

    Содержание HTML в DIV на основе изменений маршрута.

  • 4, настроить $ routeProvider, AngularJS $ routeProvider используется для определения правил маршрутизации.

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

Функция конфигурации AngularJS модуль используется для настройки правил маршрутизации. Используя configAPI, мы спрашиваем, что $ routeProvider впрыскивается в нашей функции конфигурации и использовать $ routeProvider.whenAPI определить наши правила маршрутизации.

$ RouteProvider дают нам, когда (путь, объект) и в противном случае (объект) Функция определяет все маршруты, в том порядке, который принимает два аргумента:

  • Первый параметр правила регулярного URL или URL.
  • Вторым параметром является объект конфигурации маршрутизации.

Объект Параметры маршрута

AngularJS маршрут может быть достигнуто с помощью различных шаблонов.

Первый аргумент функции $ routeProvider.when является регулярным URL правила или URL, второй конфигурации параметров маршрута.

правила синтаксиса объекта конфигурации маршрутизации заключаются в следующем:

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

Параметр Описание:

  • шаблон:

    Если нам нужно только вставить простое содержимое HTML в нг-зрения, а затем использовать этот параметр:

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

    Если нам нужно только вставить файлы шаблонов HTML в нг-зрения, а затем использовать этот параметр:

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

    Приведенный выше код будет получить вид из содержимого файла сервера / computers.html в нг-зрения.

  • контроллер:

    функция, строка или тип массива, функция контроллера выполняется на текущем шаблоне, создать новую область.

  • controllerAs:

    тип строки, указать псевдоним для контроллера.

  • RedirectTo:

    Адрес перенаправления.

  • постановляю:

    Указывает текущий контроллер зависит от других модулей.

примеров

<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>

Попробуйте »