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>