Ruby
Ruby on Rails
Javascript
Git
PostgreSQL
Nginx
Redis
Angular.js
Ubuntu/Debian
jQuery
Coffeescript
Amazon Web Services
<!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>
Контейнеры для различных частей приложения (контроллеров, сервисов и тд.)
// declare a module
var myAppModule = angular.module('myApp', []);
<html ng-app="myApp">
// declare a module
var myAppModule = angular.module('myApp', ['dependentModule']);
<!-- выражение вычисляется не в контексте window,
а в контексте текущего scope -->
<span>
a + b = {{ a + b }}
</span>
angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
$scope.a = 1;
$scope.b = 2;
}]);
Javascript функция-конструктор, в которую "инжектится" Scope
Используем для:
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
<div ng-controller="GreetingController">
{{ greeting }}
</div>
Javascript-like выражения.
Выполняются (интерполируются) в момент компиляции шаблона
<span>
1+2={{1+2}}
</span>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>
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
<my-directive></my-directive>
<div my-directive="exp"> </div>
<div class="my-directive: exp;"></div>
<!-- directive: my-directive exp -->
<button ng-click="processPayments()">
<ul>
<li ng-repeat="order in orders">
<span>{{ order.number }}</span>
</li>
</ul>
Чтобы заюзать сервис, добавляем его как зависимость в компонент (сервис, директива, контроллер)
Дальше dependency injection подсистема Angular.js берёт всё на себя ;-)
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.
});
...
}]);
Фильтры форматируют значения выражений (expressions)
{{ expression | filter }}
{{ expression | filter1 | filter2 | ... }}
{{ expression | filter:argument1:argument2:... }}
1. Подключаем angular
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js">
</script>
</head>
2. Создаём основной модуль Angular приложения
// declare a module
var myAppModule = angular.module('myApp', []);
3. Подключаем основной модуль в html для инициализации приложения
<html ng-app="myApp">
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;
}
}]);
5. Привязываем контроллер к элементу html
<body ng-controller="CurrencyController">
...
</body>
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>
7. Результат
Бежим программировать на Angular.js!
Презентация здесь: