Эта статья будет полезна тем, кто ещё не сталкивался с разработкой на 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.
ссылка на оригинал статьи http://habrahabr.ru/post/271765/
Добавить комментарий