WebApps with AngularJS

An overview of the framework

Patrick de Wit

Front End Software Engineer

Things I like:

  • JavaScript
  • Skiing
  • Traveling
  • Suits
  • White Collar

"JavaScript is to Java as hamster is to ham"

by Jens Ohlig

What is AngularJS

An open-source web application framework maintained by Google

that helps developing SPA's

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 = 'Patrick de Wit';
            }

myView.html 


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

Controllers

The controller is a function that augments 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 = '';
	            };
	        };

Result

{{ todos | json }}

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>
  • attribute: <span my-directive="value"></span>
  • class: <span class="my-directive: value;"></span>
  • comment: <!-- directive: my-directive value -->

Instant Search

Demo

Instagram

Demo

Learn

Questions

Thanks