Angular JS MVC фреймворк для создания веб-приложений Маркевич

Angular. JS MVC фреймворк для создания веб-приложений Маркевич Сергей Altex. Soft

Паттерн MVC. ЧТО? Модель (логика) представляют проблемно -ориентированные нания з и данные в приложении. Представление (вид) обычно проектируется в виде пользовательского интерфейса. Они должны знать о существовании Моделей, но непосредственно не общаться с ними. Контроллеры обрабатывают входные данные (клики, пользовательские действия) в приложении.

Паттерн MVC. КОГДА? • При построении одностраничного приложения или при создании сложного пользовательского интерфейса, или просто при сокращении количества HTTP -запросов (MV*-фреймворки типа Backbone или Ember). • Фреймворки MV* содержат много готовых реализаций, которые можно использовать для решения ряда задач. Это экономит время на разработку.

Паттерн MVC. ГДЕ? • Если вы пишете приложение для общения с API или для обработки данных бекенда, где основная тяжесть просмотра или управления данными будет в браузере.

Коллекция MVC JS-фреймворков • Backbone. js • Angular. JS • Ember. js • Knockoutjs • Dojo • YUI

http: //habrahabr. ru/post/149872/

Что такое Angular?

Angular. JS • • • позволяет расширить синтаксис HTML, в результате код получается выразительным, читаемым, и легко поддерживается расширяем и отлично взаимодействует с другими библиотеками, любая особенность может быть изменена или заменена в соответствии с потребностями приложения реализует механизм связывания данных управляет поведением элементов через контроллер реализует поддержку валидации форм

Hello World <!doctype html> <html ng-app> <head> <script src=“angular. min. js"></script> </head> <body> <p ng-init=" name='World' "> Hello {{name}}! </p> </body> </html>

Hello World

Контроллер

Контроллер function My. Ctrl($scope) { $scope. action = function() { $scope. name = 'OK'; } $scope. name = 'World'; } <!doctype html> <html ng-app> <head> <script src=“angular. min. js"></script> <script src="script. js"></script> </head> <body> <div ng-controller="My. Ctrl"> Hello {{name}}! <button ng-click="action()"> OK </button> </div> </body> </html>

Модель

Область видимости ($scope) <!doctype html> <html ng-app> <head> <script src=“angular. min. js"></script> <script src="script. js"></script> </head> <body> <div ng-controller="Greet. Ctrl"> Hello {{name}}! </div> <div ng-controller="List. Ctrl"> <ol> <li ng-repeat="name in names">{{name}}</li> </ol> </div> </body> </html> function Greet. Ctrl($scope) { $scope. name = 'World'; } function List. Ctrl($scope) { $scope. names = ['Igor', 'Misko', 'Vojta']; }

Data Binding

Представление <!doctype html> <html ng-app> <head> <script src=“angular. min. js"></script> </head> <body> <div ng-init="list = ['Chrome', 'Safari', 'Firefox', 'IE'] "> <input ng-model="list" ng-list> <pre>list={{list}}</pre> <ol> <li ng-repeat="item in list"> {{item}} </li> </ol> </div> </body> </html>

Фильтры <!doctype html> <html ng-app> <head> <script src=“angular. min. js"></script> </head> <body> <div ng-init="list = ['Chrome', 'Safari', 'Firefox', 'IE'] "> Формат числа: {{ 1234567890 | number }} фильтрация массива <input ng-model="predicate"> {{ list | filter: predicate | json }} </div> </body> </html>

Сервисы • singletons — классы • Сервисы предоставляют данные и их обработку • Существуют во всех представлениях • Зависят от других сервисов • Angular. JS содержит более 20 сервисов • $ http- сервис для взаимодействия с сервером • $location - разбирает URL в адресной строке браузера

$http - сервис • $http • • • Принимает объект с настройками Возвращает promise Реализует асинхронный запрос $http({method: ‘GET’, url: fetch. Url}). success(function(data, status) { // process the data here }). error(function(data, status) { // error handling });

$resource- сервис the. PRSApp. factory('annual. Service', function ($resource) { return $resource('/: controller/: action', {}, { query: { method: 'GET', params: { action: "Details" }, is. Array: true }, start: { method: 'GET', params: { action: "Start" } }, delete. PR: { method: 'POST', params: { action: "Delete" } } }); annuaservice. js $scope. get. Users = function () { annual. Service. query({ controller: "User" }, function (data, status, headers, config) { $scope. users = data; }); }; annual. Service. query({ controller: “Annual”}, success. Get. Annual. Plan); annualctrl. js

• Open source – MIT License • Built by Google and community • 1. 0 released June 2012 • 1. 0. 6 current (April 2013) • http: //angularjs. org/

Поддержка браузеров • Chrome • Internet Explorer 9+ (others see next slide) • Firefox • Safari • Opera • mobile browsers (Android, Chrome Mobile, i. OS Safari)

Источники • Angular. JS (April 29, 2013) Green & Seshadri – O’Reilly • http: //angularjs. org/ • http: //angular. ru

Спасибо за внимание