Знакомство с Angular.js
Ruby
Ruby on Rails
Javascript
Git
PostgreSQL
Nginx
Redis
Angular.js
Ubuntu/Debian
jQuery
Coffeescript
Amazon Web Services
Angular
HTML enhanced for web apps!
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js">
</script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>Hello World на Angular.js
- Декларативный подход (расширение HTML)
- Двухстороннее связывание данных (2 way binding)
- Модульность (включаем только то, что нужно)
- Dependency Injection
- Нет строгих соглашений (по написанию моделей и контроллеров)
- Нет зависимостей от сторонних библиотек
Основные элементы Angular.js приложения
Modules
Контейнеры для различных частей приложения (контроллеров, сервисов и тд.)
- Модули описывают то, как загружается приложение
- Модули могут задавать зависимости от других модулей
- Повторно используемы
// declare a module
var myAppModule = angular.module('myApp', []);<html ng-app="myApp">// declare a module
var myAppModule = angular.module('myApp', ['dependentModule']);Scopes
- Это объекты, которые являются контекстом выполнения для выражений
- Организуются в иерархическую структуру, имитирующую DOM структуру приложения
- "Склеивает" контроллеры и представления
- И контроллеры, и директивы имеют ссылку на scope, но не имеют ссылок друг на друга.
<!-- выражение вычисляется не в контексте window,
а в контексте текущего scope -->
<span>
a + b = {{ a + b }}
</span>angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
$scope.a = 1;
$scope.b = 2;
}]);Controllers
Javascript функция-конструктор, в которую "инжектится" Scope
Controllers
Используем для:
- Инициализации данных Scope объекта ($scope)
- Добавления поведения к объекту $scope
Controllers
- Пишем контроллер в рамках основного модуля приложения
- Привязываем к DOM с помощью директивы ng-controller
- Angular для нас создаёт новый объект контроллера, используя функцию-конструктор, которую мы определили
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);<div ng-controller="GreetingController">
{{ greeting }}
</div>Expressions
Javascript-like выражения.
Выполняются (интерполируются) в момент компиляции шаблона
<span>
1+2={{1+2}}
</span><input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>Directives
Чито это?
directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children
Directives
Декларативная работа с пользовательским интерфейсом
- Обогащают синтаксис HTML
- Добавляют поведение и модифицируют DOM
- Можно создавать свои директивы
-
Директивы могут использоваться:
- как элемент
- как атрибут
- в классе
- в комментарии
<my-directive></my-directive><div my-directive="exp"> </div><div class="my-directive: exp;"></div><!-- directive: my-directive exp -->Directives
Встроенные директивы
- ng-click - задаём поведение элемента при клике на нём
- ng-show - показываем элемент в зависимости от условия
- ng-if - вставляет или удаляет HTML в зависимости от условия
- ng-repeat - циклический вывод HTML фрагмента
<button ng-click="processPayments()"><ul>
<li ng-repeat="order in orders">
<span>{{ order.number }}</span>
</li>
</ul>Services
- Объекты, связанные друг с другом посредством dependency injection
- Используются для организации кода (в том числе для организации бизнес-логики приложения)
- Внутреннее устройство:
- Lazily instantiated - сервис создается, когда компонент приложения зависит от него
- Singleton - каждый компонент, зависящий от сервиса, получает ссылку на единственный экземпляр
Services
Чтобы заюзать сервис, добавляем его как зависимость в компонент (сервис, директива, контроллер)
Дальше dependency injection подсистема Angular.js берёт всё на себя ;-)
Services
"Няшности" из коробки
- $http - обеспечивает коммуникацию с сервером через XMLHttpRequest или JSONP
- $location - парсит URL браузера и предоставляет доступ к нему
- $timeout - враппер window.setTimeout
- $cookies - чтение/запись cookies
Services
Пример использования
myApp.controller('GreetingController', ['$scope', '$http', function($scope, $http) {
...
// Simple GET request example :
$http.get('/someUrl').
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
...
}]);
Filters
Фильтры форматируют значения выражений (expressions)
{{ expression | filter }}{{ expression | filter1 | filter2 | ... }}{{ expression | filter:argument1:argument2:... }}- currency
- date
- uppercase
- lowercase
Angular.js
Начнём сначала
1. Подключаем angular
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js">
</script>
</head>Angular.js
Начнём сначала
2. Создаём основной модуль Angular приложения
// declare a module
var myAppModule = angular.module('myApp', []);Angular.js
Начнём сначала
3. Подключаем основной модуль в html для инициализации приложения
<html ng-app="myApp">Angular.js
Начнём сначала
4. Пишем наш первый контроллер
angular.module('myApp')
.controller('CurrencyController', ['$scope', '$interval', function($scope, $interval){
$scope.roubles = 0;
$scope.dollar2RoubleRate = 54.7932; // OMG
$interval(function(){
$scope.dollar2RoubleRate += 0.5;
}, 1000);
$scope.inDollars = function() {
return $scope.roubles / $scope.dollar2RoubleRate;
}
}]);Angular.js
Начнём сначала
5. Привязываем контроллер к элементу html
<body ng-controller="CurrencyController">
...
</body>Angular.js
Начнём сначала
6. Выводим данные в html с помощью expressions
<body ng-controller="CurrencyController">
<label>Put your roubles here</label>
<br>
<input ng-model="roubles" placeholder="Put your roubles here">
<br>
<br>
<label>Current rate:
<strong style="font-size:{{ (dollar2RoubleRate / 54) * 100}}%;">
{{ dollar2RoubleRate }}
</strong>
</label>
<br>
<br>
<label>Get your dollars here:
<strong style="font-size:{{ (dollar2RoubleRate / 54) * 100}}%;">
{{ inDollars() | currency }}
</strong>
</label>
</body>Angular.js
Начнём сначала
7. Результат
Angular.js
Выводы
Бежим программировать на Angular.js!
Learn Angular
Happy New Year!
Вопросы?
Презентация здесь:
Спасибо за внимание
Angular.js
By Igor Petrov
