Эта статья будет полезна тем, кто ещё не сталкивался с разработкой на 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.
Комментарии (9)
olegcorner
26.11.2015 16:28+1$http.get('phones/'+$scope.phoneId+'.json').success(function(data){
А если не success?
web_for_mass
27.11.2015 19:44Спасибо за замечание. Действительно, забыл в статье указать про второй случай.
kovalevsky
29.11.2015 22:50+1А если заглянуть в документацию, то Вы используете deprecated методы promis'a:
The $http legacy promise methods success and error have been deprecated. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $http/legacy error.
ElianL
ИМХО но если кто-то не сталкивался с AngularJs (1.x) то может уже и не стоит? Вакансии если и есть, то по большей части «поддержка старого проекта»
Drag13
Стоит стоит. Вакансий не так и мало, + ангуляр 1.х довольно прост для прототипирования САПов.
Fesor
справедливости ради angular 1.5 более-менее годная штука, с него потом на 2-ку перейти не так сложно (если правильно к процессу обучения подходить).
ArMikael
Однозначно стоит. Angular 1.x по прежнему является утвержденной в интерпрайзе библиотекой, поэтому компании активно готовы на его базе разрабатывать для себя сервисы, приложения и сайты. А пока Angular 2 дойдет до этапа внедрения в интерпрайз еще пройдет ооочень много времени. Пару месяцев назад начали пилить внутренние сервисы на Angular 1.5, а уже на подходе следующий здоровенный проект, который тоже не собирается дожидаться прихода «великого» A2. Главное, стараться писать так, чтобы проще было потом переехать на новые рельсы. Например, можно потихоньку начинать использовать ES6 методики.
Fesor
Лайфхак:
— ES6 + Babel (или typescript)
— angular-decorator (и подобные)
— поменьше привязываемся к DOM, не используем link у директивы (ну или не трогаем элемент хотя бы), практикуем компоненты
— изолируем бизнес логику от фреймворка (мы же большой проект делаем, чем больше проект тем это больше профта дает)
— почитать ngUpgrade
И переход на angular2 будет не таким уж страшным, и если плюшки вроде server-side пререндринга, web-workers и т.д. для проекта несут ценность — то почему бы и не мигрировать потом.