Angular
26 November 2015

AngularJs, краткое пособие по созданию PhoneCat Application

From Sandbox
image

Эта статья будет полезна тем, кто ещё не сталкивался с разработкой на 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.

+4
11.8k 68
Comments 9
Top of the day