AngularJS Hello World – Hello {{ name }}! – Template Expressions

View Github Repository Open presentation in a new window

tilmanpotthof

See all presentation from tilmanpotthof

AngularJS Hello World – Hello {{ name }}! – Template Expressions

0 0

angular-einfuehrung-kurz

On Github tilmanpotthof / angular-einfuehrung-kurz

AngularJS

Kurz Überblick

AngularJS Hello World

<body ng-app>

Hello {{ name }}!

</body> ngApp Initialisierung der App für das DOM {{ name }} Template-Expression ngModel Binding der Variable an das Eingabefeld

Was ist AngularJS?

  • MVVM Framework - MVVM? Framework?
  • Ehemals Freizeit-Projekt von Misko Hevery (Google)
  • HTML-Erweiterung für Nicht-Entwickler
  • Fokus auf wiederverwendbare Komponenten

Template Expressions

{{ myExpression }} Mustache-Syntax {{ 1 + 2 + 2 }} Berechnung {{ myObject.someAttribute }} Objekt-Zugriff {{ timestamp + 'ms' }} String Konkatenation {{ myBoolean ? 'YES' : 'NO' }} Tenärer Operator

Two-Way-Binding

  • Automatische Prüfung der Änderungen
  • Funktioniert für alle Eingabefelder
  • Binding an Variablen und Objekt-Attribute
12

Scopes und Controller


  
Hello {{ name }}!

  

    




          Namenkonvention: HelloWorldController.controller.js


angular
  .module('helloWorld')
  .controller('HelloWorldController', function ($scope) {
    'use strict';

    $scope.name = 'Bernd';
});


        
Direktiven


  • Wiederverwendbare Element und Attribute
    • 

  • Idee von HTML "kopiert"
    • 

  • Kapseln von komplexen Verhalten in Bausteine
    • 

Interaktion und Events


  • 
ngClick, ngFocus, ngMousemove, ngSubmit

    • 

  • 
$digest-Zyklus und Vergleich mit jQuery
    • 

Ein- und Ausblenden von Elementen


  • 
ngShow, ngHide, ngIf, ngSwitch

    • 

  • 
ngCloak - Ausblenden vor dem Rendern
    • 

Code-Beispiel


    

        
Weitere Direktiven


  • 
ngRepeat - Die Angular Schleife
    • 

  • 
ngClass + ngStyle - Styling
    • 

  • 
ngInit - Variablen setzen
    • 

  • 
ngInclude - Templates includieren
    • 

Code-Beispiele


          
    {{ word }}



          

  

    {{ maxLength - myText.length }}
  




          

  

    Some content
  




        
Services


und


Dependency-Injection


Service


  • Wiederverwendbare Logik-Bausteine
    • 

  • Kapselung von Business-Logik, Kommunikation etc.
    • 

  • Nützliche Built-in Services
    • 

Built-In Services


  • 
$http - AJAX-Requests
    • 

  • 
$log - Logging-Wrapper
    • 

  • 
$parse - Expression-Parser
    • 

  • 
$timeout - setTimeout wrapper
    • 

Code-Beispiel


          
angular.module('myModule')
  .controller('MyController', function($log, $http) {
    'use strict';

    $log.info('ENTER MyController');

    $http.get('someData.json').success(function (data) {
       $log.info('LOADED someData.json', data);
    });

    $log.info('LEAVE MyController');
  });


        
Eigener User-Service


  • Gewünschte Methoden für den
    • addUser(user)
      • 

    • removeUser(user)
      • 

    • getUsers()
      • 

    • getUserById(id)
      • 

    • 

Beispiel-Service


angular.module('myModule').factory('userService', function () {
  'use strict';

  var privateUsersById = {};
  var idCounter = 1;

  var userService = {
    addUser: function (user) {
      if (user.id) { throw new Error('User has already a id. Use updateUser() instead'); }
      user.id = idCounter++;;
      privateUsersById[user.id] = user;
      return user;
    },
    removeUser: function (user) {
      delete privateUsersById[user.id];
    },
    getUserById: function (id) {
      return privateUsersById[id];
    },
    getUsers: function () {
      return Object.keys(privateUsersById).map(function (id) {
        return privateUsersById[id];
      });
    }
  };

  return userService;

});

        
Dependency Injection


angular.module('myModule')
  .controller('MyController', function ($scope, userService) {
     'use strict';

     $scope.userService = userService;
});

        
Filter


  • Wiederverwendbare Template-Transformatoren
    • 

  • Build-In Filter (date, json, limitTo, filter)
    • 

Code-Beispiele

          
{{ user.birthdate | date:'dd.MM.yyy' }}

          
{{ user.sha256 | uppercase | limitTo:7 }}

          
{{ user.name }}

          
{{ user.name }}

        
Eigene Filter

          
angular.module('commons').filter('eliminateVowels', function () {
  'use strict';

  return function (value, disable) {
    if (angular.isString(value) && !disable) {
      return value.replace(/[AEIOUaeiou]/g, '');
    } else {
      return value;
    }
  };
});


          

  
  {{ user.lastname | eliminateVowels:!filter.enableVowelFilter }}



        
Happy coding!


        
          “First do it, then do it right, then do it better.” Addy Osmani
        
      


  










































































AngularJS
Kurz Überblick