AngularJS маршрутизацию с помощью UI-Router

angular
image-985

AngularJS обеспечивает отличный способ сделать приложения на одной странице. При создании приложений на одной странице, маршрутизация будет очень важной.

Сегодня посмотрим на маршрутизацию с помощью UI-Router.

Обзор

Что такое AngularUI маршрутизатор?

UI-Router маршрутизация фреймворка для AngularJS созданная AngularUI командой. Она обеспечивает иной подход, чем ngRoute, и меняет, основанное на состояние приложения, а не только URL маршрута.

Состояния vs URL пути

При таком подходе, ваши виды и маршруты не привязаны к URL сайта. Таким образом, вы можете изменить детали вашего сайта с помощью маршрутизации, даже если URL не меняется.

При использовании ngRoute, вам придется использовать ngInclude или другие методы, и это может привести к путанице. Теперь, когда все ваши состояния, маршрутизации и виды обрабатываются в одном .config().

Простое приложение

Давайте создадим простое приложение. У нас будет две страницы Главная и О нас.

Установка

Нам понадобится несколько файлов:

- index.html                    // главный шаблон нашего приложения
- app.js                        // код angular приложения
- partial-about.html            // страница о нас
- partial-home.html             // главная страница
- partial-home-list.html        // вывод на главной странице
- table-data.html               // таблица

С нашей структура приложения выяснили, давайте перейдем к самим файлам.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <!-- CSS (загрузка bootstrap) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <style>
        .navbar { border-radius:0; }
    </style>
    <!-- JS (загрузка angular, ui-router) -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</head>
<!-- app нашего приложения -->
<body ng-app="routerApp">
<!-- навигация -->
<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Главная</a></li>
        <li><a ui-sref="about">О нас</a></li>
    </ul>
</nav>
<!-- основной контент -->
<div class="container">
    <div ui-view></div>
</div>
</body>
</html>

Мы будем использовать Bootstrap, для стилизации наших страниц. Обратите внимание, что мы также загрузили ui-router. UI Router находится отделена от основного Angular ядра.

При создании связь с UI-Router, вы будете использовать ui-sref. Ссылки будет генерироваться из состояние вашего приложения и указывать на них. Они создаются в app.js.

Мы также используем

вместо

как в ngRoute.

Перейдем к нашему app.js.

// app.js
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        // главная, состояние и вид ========================================
        .state('home', {
            url: '/home',
            templateUrl: 'partial-home.html'
        })
        // о нас =================================
        .state('about', {
            // we'll get to this in a bit
        });
});

Теперь мы создали routerApp, что мы уже обратились к нашему body в index.html.

Здесь у нас .state() для страниц главная и о нас. На главной, мы используем файл шаблона partial-home.html.

Давайте заполним нашу страницу partial-home.html что бы мы смогли ее увидеть в приложении.

<!-- partial-home.html -->
<div class="jumbotron text-center">
    <h1>The Homey Page</h1>
    <p>This page demonstrates <span class="text-danger">nested</span> views.</p>
</div>

Теперь у нас есть наше приложение. Это не так уж много, но у нас это есть.

angular-ui-router-home-first[1]
image-986

Вложенные виды

Давайте посмотрим, как мы можем реализовать вложенные виды. Мы добавим две кнопки для нашей домашней странице и оттуда, мы хотим, показать различную информацию.

Мы собираемся добавить наши кнопки в partial-home.html.

<!-- partial-home.html -->
<div class="jumbotron text-center">
    <h1>Главная страница</h1>
    <p>Эта страница показывает <span class="text-danger">вложенные</span> виды.</p>
    <a ui-sref=".list" class="btn btn-primary">Список</a>
    <a ui-sref=".paragraph" class="btn btn-danger">Абзац</a>
</div>
<div ui-view></div>

ui-sref=».list» и ui-sref=».paragraph» будут определены в нашей app.js и как только мы добавим их, мы сможем выводить информацию в

.

// app.js
...
$stateProvider
    // HOME STATES AND NESTED VIEWS ========================================
    .state('home', {
        url: '/home',
        templateUrl: 'partial-home.html'
    })
    // nested list with custom controller
    .state('home.list', {
        url: '/list',
        templateUrl: 'partial-home-list.html',
        controller: function($scope) {
            $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
        }
    })
    // nested list with just some random string data
    .state('home.paragraph', {
        url: '/paragraph',
        template: 'I could sure use a drink right now.'
    })
...

Теперь ui-sref мы определили в home.html, связаны с фактическим состоянием. С home.list и home.paragraph создали, эти ссылки будут теперь принимать предоставленный шаблон и ввести его в ui-view.

Последнее, что нам нужно сделать для домашней странице определить файл partial-home-list.html.

<!-- partial-home-list.html -->
<ul>
    <li ng-repeat="dog in dogs">{{ dog }}</li>
</ul>

Теперь мы получаем следующее приложение со вложенными страницами.

angular-routing-ui-router-home-list[1]
image-987

Вывод

Это небольшой обзор отличный инструмент UI-Router. То, что вы можете делать с ним невероятные и когда вы смотрите на ваше приложения как на состояния, Angular приложения могут быть легко созданы, чтобы быть модульными и расширяемыми.