Introduction to AngularJS

Gunther Laurijssens Consultant @laurigun

Agenda

● What is AngularJS? ● Why use AngularJS?

● Concepts + demos

●  Tips

What is angular?

●  AngularJS IS NOT - a Library - a replacement for HTML, CSS or JS

●  AngularJS IS

- a clientside JavaScript MVC Framework - Extention to HTML with new attributes, custom tags, ..

Why use angular? ●  Re-usable components ●  Modularity

●  Dependency Injection

●  Two-way Databinding

●  Testing

Concepts

●  Expressions

●  Filters

●  Directives

●  Models

●  Modules

●  Controllers

●  2-Way Databinding

●  Services

Getting started

1. Include Angular

2. Bootstrap Angular

Directives •  Extend HTML to define custom tags, attributes

and classes

•  ng-prefix •  Normalization

ngModel

Recommended HTML5

compliant

Directives •  As an attribute (A)

•  As a class (C)

•  As an element (E)

•  As a comment (M)

Scopes

•  Exactly ONE root Scope via ng-app

•  Child scopes (controllers, directives)

•  Scope inheritance à Mimic DOM structure

•  Determine access to models

Models •  Encapsulate application data

•  Variable on Scope

•  ngModel directive

Expressions •  JavaScript-like code snippets that are

usually placed in bindings - {{ expression }}

•  Valid expressions - {{ 1 + 1 }} - {{ a + b }} - {{ name }}

Filters ●  Formatting values

●  Separated by | (pipe)

●  {{ expression | filter }}

●  Built-in filters: uppercase, lowercase, limitTo, …

Templates

HTML + Directives + Filters

View

Compile

Modules ●  AngularJS has nothing like a main method

●  Container for custom components

●  Allows us to build re-usable components - Controllers - Services - Filters - Directives

Controllers

•  Set up the inital state of $scope object

•  Add behavior to the $scope object

•  Inheritance

Controllers

•  Creates a new child scope

•  Scope of view injected in Controllers constructor function

$Scope

View Controller

ViewModel

Model

2-way databinding

Services

●  Extract re-usable code

●  Communicate between controllers

●  Lazily instantiated (Dependency Injection)

●  Singletons

Services ●  $rootScope

●  $scope

●  $http ●  $q

●  $log

•  $interval

•  $resource

•  $timeout

•  $window

•  $document

Services - Factory

Services - Service

Tips

Modules •  An application level module

•  A module for each Feature

•  A module for each reusable component - Controllers - Services - Filters - Directives

Controllers •  Do not use controllers to:

- Manipulate DOM ( à use directives)

- Format input (à use forms)

- Share code or state across Controllers (à use services)

Dependencies

•  What happens with Minification?

- Renames function parameters

- How do does compiler know which is which?

ngSrc

•  The easy way

•  How it should be written

Not covered •  Promises

•  Localization

•  Form Validation

•  Views & Routes

•  Server communication

•  Testing

•  …

Resources

•  https://docs.angularjs.org/

•  https://egghead.io/

•  https://thinkster.io/

•  http://www.slideshare.net/craftworkz/

•  https://github.com/craftworkz/ucll-workshop-angularjs

Thanks for listening!

Questions?