Angular.JS for dummies

How to start using Angular.JS with (almost) no programming background

By Marie-Anne Sinfreu / @masinfreu

What is Angular.JS?


  • Javascript framework, like Ember JS and Backbone logos
  • Created by Google
  • Based on MVC pattern
  • It will allow you to build structured browser-side applications.

MVC pattern?

Model-View-Controller

Model

Data objects:
a string, a JSON file, an API, etc.

 
View

Your HTML.

 
Controller

The link between the two:
your JS files, your program.

Example in pure Javascript

Model - Javascript

var myModel = 'Guten Tag Berlin!';
View - HTML


Bonjour Paris
Controller - Javascript

function changeTitle() {
    document.getElementById('title').innerHTML = myModel;
}

Example in pure Javascript

Link

As to Angular?

Angular binds the view and the model instantly:
both ways data-binding


Example of data-binding

Link


<!doctype html> 
<html ng-app>
	<head>
	    
	    
	</head>
	<body>
	    
	    
My name is: {{ name }}
  
	</body>
</html>

So where do we start?

You only need one file!


<!doctype html> 
<html ng-app>
	<head>
	    
	    
	</head>
	<body> 
	</body>
</html>

Organize your files

  • MyAwesomeApp
    • index.html
    • js
      • exampleA_ctrl.js
      • exampleB_ctrl.js
      • ...
    • views
      • template1.html
      • template2.html
      • ...
    • css
      • bootstrap.css
      • main.css
      • ...

How does Angular work?

Two strong concepts

  • $scope
  • Directives

Scope in Javascript

Where variables and functions are accessible, and in what context it is being executed


<script>
	var g = "global";
	function read() { 
		var l = "local";
		alert(l); // alert "local"
	}
	read();
	alert(l); // throws a reference error
</script>

Link

$scope

An object that communicate between
your Controller and your View

How to use $scope?


ngController directive defines a controller for a div-(or any element)-scope

View - HTML

<body ng-app>
    

        
Hello {{ sayHello }}

    

    

        
Hello {{ sayHello }}

    

</body>

How to use $scope?


$scope only accesses data within the matching div-scope

Controller - Javascript

function Example2ACtrl($scope) {
  $scope.sayHello = 'girls!';
}
function Example2BCtrl($scope) {
  $scope.sayHello = 'boys!';
}

Directives

How to make the HTML learn new tricks


Two types of directives:
  • The ones Angular provides
  • The ones you can create yourself (advanced programmers)

How do they look like?


<body ng-app>
    

    	 
    

</body>

Most used directives

  • ngApp & ngController: assigns behavior to a scope
  • ngModel: tells Angular to do both-way data binding
  • ngHide & ngShow: hides/shows based on the exression provided
  • ngRepeat: instantiates a template once per item from a collection
  • and so many more...

Display a list of items with ng-repeat

Example 4
Model - Javascript

function Example4Ctrl($scope) {
  $scope.pilots = [
  	{ codename: "Apollo", firstname: "Lee", lastname: "Adama" },
  	{ codename: "Starbuck", firstname: "Kara", lastname: "Thrace" },
  	{ codename: "Helo", firstname: "Karl", lastname: "Agathon" },
  	{ codename: "Kat", firstname: "Louanne", lastname: "Katraine" },
  	{ codename: "Boomer", firstname: "Sharon", lastname: "Valerii" }
  ];
}
View - HTML


    
    
  • 
        {{ pilot.codename}} 
        · {{ pilot.firstname }} {{ pilot.lastname }}
    
    •

Simple calculator with
ng-hide, ng-show & ng-model

Example 3
Controller - Javascript

function Example3Ctrl($scope) {
  $scope.val1 = 0;
  $scope.val2 = 0;
}
View - HTML




  

    
    
    
x

    
    
= {{ val1 * val2 }}
  
    
    

    
I'm greater than 10 \o/

    
I'm smaller than 10 :(

Resources

JOIN US

Next meeting is this Wednesday!

More information @angular_berlin

MERCI

Have fun with Angular.JS!

By Marie-Anne Sinfreu / @masinfreu