Одностраничное приложение AngularJS

Одностраничное приложение AngularJS

Front-end 08.02.2017

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

Цели

  • Одностраничное приложение
  • Отсутсвие обновления страницы при переходе
  • Различные данные на каждой странице

Структура файлов

  • script.js
  • index.html
  • папка /pages
    • — home.html
    • — about.html
    • — contact.html

HTML

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

<!-- index.html -->
    <!DOCTYPE html>
    <html>
    <head>
      <!-- SCROLLS -->
      <!-- load bootstrap and fontawesome via CDN -->
      <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" />

      <!-- SPELLS -->
      <!-- load angular and angular route via CDN -->
      <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 AND NAVBAR -->
        <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>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">

            <!-- angular templating -->
            <!-- this is where content will be injected -->

        </div>

    </body>
    </html>

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

Angular приложение

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

Во-первых, мы должны создать наш модуль и контроллер в javascript. Мы сделаем это в script.js.

// script.js

    // create the module and name it scotchApp
    var scotchApp = angular.module('scotchApp', []);

    // create the controller and inject Angular's $scope
    scotchApp.controller('mainController', function($scope) {

        // create a message to display in our view
        $scope.message = 'Everyone come and see how good I look!';
    });

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

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

    <!-- define angular app -->
    <html ng-app="scotchApp">
    <head>
      <!-- SCROLLS -->
      <!-- load bootstrap and fontawesome via CDN -->
      <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" />

      <!-- SPELLS -->
      <!-- load angular via CDN -->
      <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>

    <!-- define angular controller -->
    <body ng-controller="mainController">

    ...

    <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main">
        <p> { { message } } </p>

        <!-- angular templating -->
        <!-- this is where content will be injected -->
    </div>

    </html>

Внутри основного div мы увидим сообщение, которое мы создали. Поскольку у нас есть модуль и контроллер и мы знаем, что Angular работает правильно, продолжаем работать с этим макетом, что б показать остальные страницы.

Добавление страниц в главный layout

Ng-view — это директива angular, которая будет включать шаблон текущего маршрута (/home, /about, или /contact) в файле основного макета. Проще говоря, он берет нужный нам файл на основе маршрута и вставляет его в наш основной макет (index.html).

Мы добавим код ng-view на наш сайт в div#main, чтобы сказать Angular, куда разместить наши страницы.

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

    <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main">

        <!-- angular templating -->
        <!-- this is where content will be injected -->
        <div ng-view></div>

    </div>

    ...

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

Поскольку мы создаем одностраничное приложение и не хотим, чтобы какая-либо страница обновлялась — будем использовать возможности маршрутизации Angular.

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

// script.js

    // create the module and name it scotchApp
        // also include ngRoute for all our routing needs
    var scotchApp = angular.module('scotchApp', ['ngRoute']);

    // configure our routes
    scotchApp.config(function($routeProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
            })

            // route for the about page
            .when('/about', {
                templateUrl : 'pages/about.html',
                controller  : 'aboutController'
            })

            // route for the contact page
            .when('/contact', {
                templateUrl : 'pages/contact.html',
                controller  : 'contactController'
            });
    });

    // create the controller and inject Angular's $scope
    scotchApp.controller('mainController', function($scope) {
        // create a message to display in our view
        $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. Как вы можете видеть по конфигурации — есть возможность указать маршрут, файл шаблона для использования и даже контроллер. Таким образом, каждая часть нашего приложения будет использовать свое собственное представление и Angular контроллер.

Наша домашняя страница потянет файл home.html. О компании и контакты потянут тоже соответствующие файлы. Теперь, если мы посмотрим на наше приложение и используем навигацию — будет отображаться нужная информация как мы и планировали.

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

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

Надеюсь данная инфа была вам полезна =)

Источник: Scotch.

Поделиться:

Отправить ответ

avatar
  Subscribe  
Notify of