Simon de Turck

Front-end Developer

 

WHITE internetbureau

 

AngularJS

Een introductie

Wat is AngularJS

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.

 

 

https://angularjs.org

De AngularJS pitch

  • Een javascript Framework voor op het MVC / MVVM design pattern gebaseerde web applicaties
  • Uitermate geschikt voor 'data-driven' CRUD applicaties en single page apps
  • Gemaakt door Miško Hevery en wordt gefinancierd door Google.
  • Magic

Angular is ...

  • Geen javascript library
  • Geen DOM manipulatie tool a-la jQuery (al gebruikt angular wel een subset van jQuery genaamd jqLite)
  • Niet geschikt voor apps die veel complexe DOM manipulatie behoeven zoals games of WYSIWYG editors

Wat is AngularJS niet?

AngularJS is what HTML could have been if it had been designed for web application development

- Miško Hevery, de man met het plan

De grondbeginselen van AngularJS

Seperation of concerns

  • Data
  • UI
  • Logic
  • Model
  • View
  • Controller
  • JS Objecten
  • DOM*
  • JS Modules

* DOM = HTML + Directives

Testbaarheid

  • View en logic zijn strikt gescheiden
  • Dependency injection
  • Test tools zijn ingebouwd (unit en end-to-end testing)

https://github.com/angular/angular-seed

Concepten van AngularJS

De belangrijke onderdelen

  • Template
  • View
  • Model
  • Scope
  • Directive
  • Compiler
  • DI
  • Expression
  • Data-Binding
  • Controller
  • Module
  • Injector
  • Service

https://docs.angularjs.org/guide/concepts

De belangrijke onderdelen

  • View: De Dom
  • Scope: De 'lijm' tussen controller en views
  • Model: De variablen die in een 'scope' bestaan
  • Expression: Javascript-achtige snippets {{ expr }}
  • Data-binding: Sync van data tussen controller en view
  • Controller: De business logic

Code!

<html ng-app>
<body>
    <h1>Databinding</h1>
    <input ng-model="user.name" placeholder="naam">
    <input ng-model="user.lastname" placeholder="achternaam">
    <p ng-show="user.name || user.lastname">
        Hoi {{user.name}} {{user.lastname}}
    </p>
    <script src="angular.min.js"></script>
</body>
</html>

2 weg databinding

MVC

<html ng-app="mvcExample">

<body ng-controller="UserCtrl as userCtrl">
  <h1>Databinding MVC</h1>
  <input ng-model="userCtrl.user.name" placeholder="naam">
  <input ng-model="userCtrl.user.lastname" placeholder="achternaam">
  <p ng-show="userCtrl.user.name || userCtrl.user.lastname">
    Hoi {{userCtrl.user.name}} {{userCtrl.user.lastname}}
  </p>
  <button ng-click="userCtrl.shout()">roep</button>

  <script src="angular.min.js"></script>

  <script>
    angular.module('mvcExample', [])
      .controller('UserCtrl', UserCtrl);

    function UserCtrl() {
      this.user = {
        name: 'John',
        lastname: 'Doe'
      };

      this.shout = function() {
        alert((this.user.name + ' ' + this.user.lastname).toUpperCase());
      };
    }
  </script>
</body>

</html>

<html ng-app="mvcExample">

<body ng-controller="UserCtrl">
  <h1>Databinding MVC</h1>
  <input ng-model="user.name" placeholder="naam">
  <input ng-model="user.lastname" placeholder="achternaam">
  <p ng-show="user.name || user.lastname">
    Hoi {{user.name}} {{user.lastname}}
  </p>
  <button ng-click="shout()">roep</button>

  <script src="angular.min.js"></script>

  <script>
    angular.module('mvcExample', [])
      .controller('UserCtrl', UserCtrl);

    function UserCtrl($scope) {
      $scope.user = {
        name: 'John',
        lastname: 'Doe'
      };

      $scope.shout = function() {
        alert(($scope.user.name + ' ' + $scope.user.lastname).toUpperCase());
      };
    }
  </script>
</body>

</html>

MVC - met scope

Resources

AngularJS docs: https://docs.angularjs.org

Populaire AngularJS modules: http://ngmodules.org/

Bite-size Tutorials: https://egghead.io/​

Docs voor vanalles: http://devdocs.io/​

In depth tutorial (frontend masters) : http://bit.ly/1FVGr0F

Codeschools Tutorials: http://bit.ly/1p3XWCj

@zimmen - simon@zimmen.com

Bedankt!

Made with Slides.com