StandWithUkraine
Одностраничное приложение AngularJS
Мы создадим простой сайт с домашней страницей, страницей о компании и контактной информацией. 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.