WebApps with

By Henk Bakker

Forget everything about

JQuery

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

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, also called ViewModel

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"

Create custom attributes
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>