Эта статья будет полезна тем, кто ещё не сталкивался с разработкой на AngularJs и хочет в сжатые сроки освоить базовые принципы работы данного фреймворка. В случае если вы никуда не спешите, то разработчики Google давно позаботились о вас и написали чудесный учебник.
Для того чтоб вы могли сразу видеть то, что мы собираемся создать, я оставлю это демо тут.
Итак, начнём.
Так как работать будем с ajax запросами, не стоит забывать, что проект нужно разместить на локальном сервере. Создаём index.html и пишем базовую разметку, которая станет общей для всех страниц нашего приложения. Я не буду описывать подключение всех библиотек (ведь это и так всем понятно), а просто их перечислю:
— angular;
— angular-route;
В итоге вы должны получить что-то на подобие:
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<!-- Template Title -->
<title>PhoneCat App</title>
<!-- Custom stylesheet -->
<link href="style.css" rel="stylesheet">
</head>
<body ng-controller="PhoneListCtrl">
<!-- ====== Menu Section ====== -->
<section id="menu">
<div class="navbar" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a href="#/home">Home</a></li>
<li><a href="#/about">Description</a></li>
<li><a href="#/contact">Contact</a></li>
</ul>
</div>
</section>
<!-- ====== End Menu Section ====== -->
<!-- ====== Ng-veiw Section ====== -->
<section ng-view id="search"></section>
<!-- ====== End Ng-veiw Section ====== -->
<!-- Angular JS -->
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<!-- Custom JS -->
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/main.js"></script>
</body>
</html>
В коде выше вы могли встретить в преть не знакомые вам атрибуты, такие как ng-app, ng-controller, ng-view. Это всё AngularJs директивы, каждая из них имеет свои свои особенности. Так, к примеру, ng-app сообщает Angular-у корневой элемент нашего приложения, а ng-controller назначает поведение области видимости. Директива ng-view включает отображение шаблона по текущему адресу. Давайте создадим необходимые нам шаблоны: home.html, about.html, contact.html, phone-detail.html.
Теперь нам надо как-то связать данные страницы с index.html, тут и начинается магия AngularJs. Откроем файл controllers.js и напишем в нём следующие:
var phonecatApp= angular.module('phonecatApp', ['ngRoute','ngAnimate']);
phonecatApp.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/',{
templateUrl:"template/home.html",
controller:"PhoneListCtrl"
})
.when('/about',{
templateUrl:"template/about.html",
controller:"AboutCtrl"
})
.when('/contact',{
templateUrl:"template/contact.html",
controller:"ContactCtrl"
})
.when('/phones/:phoneId',{
templateUrl:"template/phone-detail.html",
controller:"PhoneDetailCtrl"
})
.otherwise({
redirectTo: '/'
});
}]);
phonecatApp.controller('PhoneListCtrl',['$scope','$http','$location', function($scope,$http, $location){ }]);
phonecatApp.controller('AboutCtrl',['$scope','$http','$location', function($scope,$http, $location){ }]);
phonecatApp.controller('ContactCtrl',['$scope','$http','$location', function($scope,$http, $location){ }]);
phonecatApp.controller('PhoneDetailCtrl',['$scope','$http','$location','$routeParams', function($scope,$http, $location, $routeParams){ }]);
Давайте разберём построчно то, что мы сделали. Первым делом мы огласили новый angular module под названием «phonecatApp» и прописали его зависимости. Далее мы настраиваем config для нашего приложения, где указываем с помощью $routeProvider маршруты (links) к нашим шаблонам и соответствующие каждому из них контроллеры. После чего мы инициализируем указанные выше контроллеры. В следствии наших действий у нас на странице заработала навигация.
Идём дальше, нам нужно создать файл phones.json, который будит содержать массив с краткой информацией про телефоны. Так как это очень трудоёмкое занятие, все файлы с соответствующими массивами и картинки можно скачать из данного репозитория (папки phones и img), который предоставляют нам создатели учебника про AngularJs от Google.
И вот настало время редактировать home.html. В данном шаблоне должны присутствовать форма ввода (для реализации поиска по элементам страницы) и цикл (реализованный с помощью ng-repeat), который выведет информацию про телефоны из файла phones.json.
<div class="search-input">
<input type="text" placeholder="Search" ng-model="query">
</div>
<div class="phone-wrap animation" ng-repeat="phone in phones | filter: query">
<div class="phone_img-wrap">
<img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}">
</div>
<h3>{{phone.name}}</h3>
<div class="phone_text-wrap">
<p class="phone-text">{{phone.snippet}}</p>
</div>
<a class="btn-see" href="#/phones/{{phone.id}}">
<p>VIEW</p>
</a>
</div>
Директива ng-model в реальном времени присваивает вводимые нами символы переменной query, с которой в дальнейшем времени встроенный из коробки в AngularJs фильтр сопоставит выводимые циклом элементы и удалит все лишнее (ng-repeat=«phone in phones | filter: query»).
Но чтоб всё это заработало нам нужно прописать данный http-запрос в контроллере 'PhoneListCtrl':
$http.get('phones/phones.json').success(function(data,status,headers,config) {
$scope.phones=data;
});
Наше приложение почти готово, осталось только создать индивидуальные страницы каждого телефона. Для этого давайте напишем следующий htttp-запрос в контроллере 'PhoneDetailCtrl':
$http.get('phones/'+$scope.phoneId+'.json').success(function(data){
$scope.phone=data;
})
Для полной готовности нашему приложению не хватает только какой-либо информации на уникальной странице телефона, что довольно таки легко поправить. Давайте выведем на ней название выбранной позиции:
<h1>{{phone.name}}</h1>
Вот и всё! Мы с вами только что создали ваше первое single page application на AngularJs.
