Разработка на AngularJS

Алексей Пихтовников

Разработка на AngularJS
Наши грабли
— это просто!

Что такое Angular?

В первую очередь это фреймворк!

“Фреймворк — программная платформа, определяющая структуру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта.”

Из чего создаётся структура

  • Шаблоны
  • Директивы
  • Контроллеры
  • Фильтры
  • Сервисы
  • Фабрики
  • Стейты

Библиотеки и расширения

  • по умолчанию включает в себя jqLite
  • jQuery
  • lodash
  • bourbon
  • restangular
  • angular-route
  • angular-translate
  • angular-material

Инициализация приложения


angular.module('myApp', ['ngCookies', 'ngResource', 'ngRoute', 'restangular'])
    .config(function ($stateProvider, $urlRouterProvider) {
        // Установка параметров
    })
    .controller('myCtrl', function ($scope, myService) {
        // Код контроллера
    })
    .directive('myDirective', function () {
        // Код директивы
    })
    .filter('myFilter', function () {
        // Код фильтра
    });

Декларативный подход вместо императивного

Сравним два подхода
привязки данных в шаблонах...

Императивная привязка через jQuery




    
    Привет

Привет

Декларативная привязка данных в AngularJS




    
    Привет, {{name}}!

Привет, {{name}}!

Декларативный стиль — сокращают время разработки за счёт прозрачности кода

Но если мы говорим о таком преимуществе, как время разработки, то было бы странно обойти стороной автоматическую сборку проекта.

Автоматизация

Автоматическая сборка проекта

  • nodejs
  • npm
  • bower
  • gulp

Команды для запуска

  • npm install
  • bower install
  • gulp serve
  • gulp build

Структура приложения

  • config
  • src
  • gulpfile.js
  • bower.json
  • package.json

Автоматическое тестирование

Angular 2

Спасибо!