январь 1, 2015 · angularjs

Создаем одностраничное приложение с помощью Angular Route в AngularJS

Одностраничные приложения становятся очень популярными. Сайты создают такими, чтобы они выглядели как планшетные приложения.
Angular позволяет реализовать такое поведение.

Наше простое приложение

Мы создадим простой сайт со страницами home, about и contact. Angular создан для гораздо более сложных приложений чем это, но данное руководство покажет основные принципы.

Цели

Подобную задачу можно решить используя стандартные ajax запросы, но с помощью Angular это делать быстрее и проще.

Файловая структура

- script.js 		<!-- angular -->
- index.html 		<!-- основной шаблон -->
- pages 		<!-- подключаемые страницы -->
----- home.html
----- about.html
----- contact.html

HTML

Это простая часть. Мы будем использовать Bootstrap и Font Awesome.
Откроем файл index.html и добавим основной шаблон с навигационной панелью.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
  <script src="script.js"></script>
</head>
<body>

    <!-- ШАПКА И НАВИГАЦИЯ -->
    <header>
        <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Angular Routing Example</a>
            </div>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
            </ul>
        </div>
        </nav>
    </header>

    <!-- ОСНОВНОЙ КОНТЕНТ И ПОДКЛЮЧАЕМЫЕ СТРАНИЦЫ -->
    <div id="main">

        <!-- angular шаблонизатор -->
        <!-- тут будут показаны подключаемые станицы -->

    </div>

</body>
</html>

Для указания ссылок на страницы мы используем #. Мы не хотим, чтобы браузер думал, что мы открываем страницы about.html и contact.html напрямую.

Angular приложение

Модуль и контроллер

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

// script.js

// cсоздадим модуль и назовем его scotchApp
var scotchApp = angular.module('scotchApp', []);

// создадим контроллер и внедрим $scope
scotchApp.controller('mainController', function($scope) {

    // сообщение, которое мы хотим отобразить
    $scope.message = 'Everyone come and see how good I look!';
});

Добавим модуль и контроллер в наш HTML, чтобы Angular знал как собирать наше приложение.
Чтобы проверить, что все работает, отобразим сообщение, которое добавили в $scope.

<!-- index.html -->
<!DOCTYPE html>

<!-- инициализация angular -->
<html ng-app="scotchApp">
<head>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
  <script src="script.js"></script>
</head>

<!-- обьявляем контроллер -->
<body ng-controller="mainController">

...

<div id="main">
    {{ message }}
</div>

Внутри нашего main блока мы можем увидеть сообщение, которое создали в контроллере.

Встраивание страниц в основной шаблон

ng-view директива Angular, которая внедряет представление по текущему пути (/home, /about, /contact) в основной шаблон.

<!-- index.html -->
...
<div id="main">

    <div ng-view></div>

</div>

...

Настройка путей и представлений

Мы создаем одностраничное приложение, поэтому не хотим чтобы страница обновлялась при переходах.
Воспользуемся возможностями маршрутизации Angular.

Начиная с версии Angular 1.1.6 маршуртизация не включена в основную библиотеку. Нужно подключать библиотеку отдельно в head и модуль при настройке приложения.

Взглянем на Angular файл и добавим в наше приложение. Мы будем использовать $routeProvider, который отвечает за настройку маршрутизации.

// script.js

var scotchApp = angular.module('scotchApp', ['ngRoute']);

// настроим маршруты
scotchApp.config(function($routeProvider) {
    $routeProvider

        // маршрут для страницы home
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        // маршрут для страницы about
        .when('/about', {
            templateUrl : 'pages/about.html',
            controller  : 'aboutController'
        })

        // маршрут для страницы contact
        .when('/contact', {
            templateUrl : 'pages/contact.html',
            controller  : 'contactController'
        });
});

scotchApp.controller('mainController', function($scope) {
    $scope.message = 'Everyone come and see how good I look!';
});

scotchApp.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

Мы обьявили в маршруты в $routeProvider. Как вы можете видеть, мы указали маршрут, файл представления и контроллер.
Это способ при котором каждая страница может иметь свой контроллер.

Чистые URL: По-умолчанию Angular добавляет хеш # в URL. Чтобы изабвится от этого, нужно использовать $locationProvider, чтобы включить HTML History API. Больше иформации по ссылке.

Cтраница home соответствует файлу home.hmtl. Страницы about и contact соотвественно.
Теперь если мы посмотрим на нашем приложение и будем нажимать на ссылки в навигации, контент будет меняться как запланировано.

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

<!-- home.html -->
<div class="jumbotron text-center">
    <h1>Home Page</h1>

    <p>{{ message }}</p>
</div>
<!-- about.html -->
<div class="jumbotron text-center">
    <h1>About Page</h1>

    <p>{{ message }}</p>
</div>
<!-- contact.html -->
<div class="jumbotron text-center">
    <h1>Contact Page</h1>

    <p>{{ message }}</p>
</div>

Angular маршрутизация работает только в http окружении. Убедитесь, что вы открываете страницу по адресу http://***, а не file://***.

Выводы

Это очень простое руководство, поможет вам настроить маршрутизацию на Angular для работы с шаблонами и разделенными представлениями.
Теперь вы можете использовать эти знания, чтобы создавать более сложные одностраничные приложения.


Источник

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket