Знакомство с 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!

Вопросы?

Презентация здесь: 

https://slides.com/igorpetrov/angular

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

Angular.js

By Igor Petrov

Angular.js

  • 243
Loading comments...

More from Igor Petrov