AngularJS

няшка и помощник по дому и хозяйству

JS мир и JQuery до и после

  • Нет структуры, хаос, бардак, насилие
  • Слабые абстракции
  • Решение зависимостей на пользователе
  • Пишите код везде (от работы с DOM, до манипуляции данными)

Hello, {username} на JQuery

<html>
<head>
  <meta charset="UTF-8">
  <title>JQuery world</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
  Введите ваше имя: <input type="name" id="name" />  
  <h1 id="show_name"></h1>
  
  <script type="text/javascript">
    $(document).ready(function(){

      $('#name').keyup(function(){
        $('#show_name').html( 'Hello, ' +$(this).val() );
      });

    })
  </script>
</body>
</html>
  • Отсутсвие абстракций и структуры
  • По локоть обеими руками в DOM
  • А что если хотим в JS?
<html ng-app>
<head>
  <meta charset="UTF-8">
  <title>AngularJS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>

  <input type="text" ng-model="name" />
  <h1 ng-show="name">Hello, {{name}}</h1>
  
</body>
</html>
<html ng-app>
<head>
  <meta charset="UTF-8">
  <title>AngularJS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>

  <h1 ng-show="name">Hello, {{name}}</h1>

  <button ng-click="name = 'Ура'">Click me</button>
  
</body>
</html>

Что нам дает AngularJS

  • Структурирование (модули, html интерфейс, css представление, js логика)
  • Связывание данных (2-way binding)
  • Абстракция от DOM
  • Сервисы
  • Директивы
<html ng-app="Mailbox">
<head>
  <meta charset="UTF-8">
  <title>AngularJS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="Inbox">

  <h1>Привет, {{name}}</h1>
  <ul>
    <li ng-repeat="mail in mails">
      От: {{mail.sender}}, Тема: "{{mail.subject}}"
    </li>
  </ul>

  <script type="text/javascript">
    angular.module('Mailbox', []).controller('Inbox', function($scope) {
      $scope.name = 'Ренат';
      $scope.mails = [
        {sender: 'Махно', subject: 'Привет, как дила, клевая ава!'},
        {sender: 'Муссолини', subject: 'Барбариска по захвату Киргизстана'},
        {sender: 'Вэйдер', subject: 'Давно не виделись'},
      ];      
    });
  </script>
  
</body>
</html>

HTML - интерфейс

<h1>Привет, {{name}}</h1>
<ul>
  <li ng-repeat="mail in mails">
    От: {{mail.sender}}, Тема: "{{mail.subject}}"
  </li>
</ul>

CSS - представление

  li:hover{
    color: white;
    background: red;
  }

JavaScript - логика

$scope.showMessage = function(msg){
  alert('Hello' + msg);
};

<html ng-app="Mailbox">
<head>
  <meta charset="UTF-8">
  <title>AngularJS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <style>
  li:hover{
    color: white;
    background: red;
  }
  </style>
</head>
<body ng-controller="Inbox">

  <h1>Привет, {{name}}</h1>
  <ul>
    <li ng-repeat="mail in mails" ng-click="showMessage(mail.msg)">
      От: {{mail.sender}}, Тема: "{{mail.subject}}"
    </li>
  </ul>

  <script type="text/javascript">
    angular.module('Mailbox', []).controller('Inbox', function($scope) {
      $scope.name = 'Ренат';
      $scope.mails = [
        {sender: 'Махно', subject: 'Привет, как дила, клевая ава!', msg: 'Осень наступила'},
        {sender: 'Муссолини', subject: 'Барбариска по захвату Киргизстана', msg: 'И так, ходи свиньей, руби клином!'},
        {sender: 'Вэйдер', subject: 'Давно не виделись', msg: 'Империя в опастносте, в Звездном флоте бунт!'},
      ];      
      $scope.showMessage = function(msg){
        alert(msg);
      };
    });

  </script>
  
</body>
</html>

Что еще есть в AngularJS?

Services

angular.module('Mailbox.services', []).
  factory('MailService', function($http) {

    var mail = {};

    mail.fetchAll = function() {
      return $http({
        method: 'JSON', 
        url: 'http://aomega.co/mailbox?user=renat'
      });
    }

    return mail;
  });

Routes

angular.module('Mailbox', [
  'Mailbox.services',
  'Mailbox.controllers',
  'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.
	when("/inbox", {templateUrl: "partials/inbox.html", controller: "Inbox"}).
	when("/mail/:id", {templateUrl: "partials/mail.html", controller: "Mail"}).
	otherwise({redirectTo: '/inbox'});
}]);

Filters

<li ng-repeat="mail in mails | filter: nameFilter">
$scope.searchFilter = function (mail) {
    var key = new RegExp($scope.nameFilter, 'i');
    return !$scope.nameFilter || key.test(mail.subject) || key.test(mail.msg);
};

Directives

<body>
 <mailbox></mailbox>
</body>
angular.module('Mailbox.directives').directive('mailbox', function () {
    return {
        template: '<ul>' + 
          '<li ng-repeat="mail in mails">' + 
            '{{mail.subject}} ({{mail.from}))' +
          '</li>' + 
        '</ul>'
    };
});

ВОПРОСЫ?

Renat - independent contractor
http://mrak7.com & http://aomega.co

AngularJS - полезняшка

By mpak

Made with Slides.com

AngularJS - полезняшка

санук-сабай или иди нах*й не мешай

  • 550

More from mpak