WebApps with AngularJS

An overview of the framework

Henk Bakker

Software Engineer Java, Application New Technology

Things i like:

  • Mac's
  • JavaScript
  • Game of Thrones
  • Java EE & Spring
  • Arrow

"JavaScript is to Java as hamster is to ham"

by Jens Ohlig

"JavaScript is the only language people feel like they don't need to learn to use it"

by Douglas Crockford

What is AngularJS

It's a structural framework for dynamic web apps
that's easy to maintain, in a fast and testable way.

The principles

  • Rapid development
  • Modularity
  • Built to be testable
  • Write less code

What it offers us

  • Controllers
  • Templates
  • Two-Way data bindings
  • Services
  • Directives
  • Dependency Injection

The simplest example


    <!DOCTYPE html>
    <html ng-app>
      <head>
        <script src="js/angular.min.js"></script>
      </head>
      <body>
        <form>
          <label>Your name?</label>
          <input type="text" ng-model="name" placeholder="Your name?">
        </form>
        <h3>My name is {{ name }}!</h3>
      </body>
    </html>

My name is {{ name }}!

$scope

$scope is an object that refers to the application model.
It connects the View and the Controller

myController.js 


  function MyController($scope) {
    $scope.name = 'Henk Bakker';
  }

myView.html 


  <form ng-controller="MyController">
    <input type="text" ng-model="name">
  </form>

Controllers

The controller is a function that augment the $scope object.
It's used to add a value or to add a behavior to the $scope.


    function TodoCtrl($scope) {
      $scope.todos = [
        { text: 'Learn AngularJS', done: true  },
        { text: 'Create an App',   done: false }
      ];

      $scope.addTodo = function () {
        $scope.todos.push({ text: $scope.todoText, done: false });
        $scope.todoText = '';
      };
    };

Directives

"Teach new tricks to the HTML"
  1. Create custom attributes
  2. Create custom HTML tags
    (based on W3C webcomponents specification)

Directives 2

All the attributes that begin with "ng" are AngularJS directives.

  • ng-app
  • ng-controller
  • ng-model
  • ng-repeat
  • ng-click
  • ng-view
  • ...

Directives 3

How to use directives


      <!doctype html>
      <html ng-app="myApp">
        <head>
          <script src="../js/angular.min.js"></script>
        </head>
        <body>
          <ul ng-controller="myListController">
            <li ng-repeat="item in items">
              {{ item.name }}
            </li>
          </ul>
        </body>
      </html>

Directives 4

You can also create you own directive.

  • element: <my-directive></my-directive>
  • atribute: <span my-directive="value"></span>
  • class: <span class="my-directive: value;"></span>
  • comment: <!-- directive: my-directive value -->

Instant Search

Demo

Instagram

Demo

Learn

Questions

Question

AngularJS or JSF?

Or GWT?

Thanks