[Из песочницы] AngularJs, краткое пособие по созданию PhoneCat Application26.11.2015 16:18

image

Эта статья будет полезна тем, кто ещё не сталкивался с разработкой на AngularJs и хочет в сжатые сроки освоить базовые принципы работы данного фреймворка. В случае если вы никуда не спешите, то разработчики Google давно позаботились о вас и написали чудесный учебник.
Для того чтоб вы могли сразу видеть то, что мы собираемся создать, я оставлю это демо тут.

Итак, начнём.

Так как работать будем с ajax запросами, не стоит забывать, что проект нужно разместить на локальном сервере. Создаём index.html и пишем базовую разметку, которая станет общей для всех страниц нашего приложения. Я не буду описывать подключение всех библиотек (ведь это и так всем понятно), а просто их перечислю:

— angular;
— angular-route;

В итоге вы должны получить что-то на подобие: 


  
    
    
    PhoneCat App


В коде выше вы могли встретить в преть не знакомые вам атрибуты, такие как 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.


    




    

        {{phone.name}}
    

    
{{phone.name}}

    

        
{{phone.snippet}}

    

    
        
VIEW


Директива 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;
})


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



{{phone.name}}

Вот и всё! Мы с вами только что создали ваше первое single page application на AngularJs.

© Habrahabr.ru