1.
Getting started with AngularJS
Maurice de Beijer

2.
Who am I?
• Maurice de Beijer
• The Problem Solver
• Microsoft Integration MVP
• Freelance developer
• DevelopMentor instructor
• Twitter:
@mauricedb
• Blog:
http://msmvps.com/blogs/theproblemsolver/
• Web:
http://www.TheProblemSolver.nl
• E-mail:
mauricedb@develop.com
2

3.
What are we going to cover?
•
•
•
•
•
What is AngularJS?
Getting started
Directives
Routing
Services
• Demos at: http://bit.ly/lidnugng
3

4.
What is AngularJS?
• AngularJS is an MVC framework for browser based apps
– Open source and originally developed at Google
• The clean architecture has attracted a large following quickly
– Version 1.0 was released in June 2012
– Currently at 1.2.0
• The goal is building CRUD style business applications
– Not as suitable for games etc
• Use declarative programming for UI and imperative
programming for the logic
– The application is wired together in a declarative way
• Supports modern desktop and mobile browsers
– Internet Explorer version 8 and above
4

5.
Key features
• Model View Controller architecture
– A well known and proven architecture
• Declarative two way data binding
– Automatically synchronizes values between Model and View
• Dynamic templates
– Makes it very easy to update the user interface
• Dependency injections
– Code dependencies are automatically injected where needed
• Extends HTML with directives
– Lots of powerful standard directives or create your own
• Build with testing in mind
– Makes it much easier to unit test different parts
5

6.
Bootstrapping
• Automatic bootstrapping
– Add a reference to AngularJS
– Add the ngApp attribute
• Manual bootstrapping is also possible
– Gives you more control
– For example when using AMD/RequireJS
6

7.
The MVC of AngularJS
7

8.
Model
• The business data
• Exposed to the view through the $scope
8

9.
View
•
•
•
•
The user interface layer
Data binds to the model
Calls functions on the controller
Use declarative directives for reusable code
9

10.
Controller
• Glues the view and the model together
• Provides additional functionality
• Uses additional services for reusable logic
10

11.
Services
• Services are reusable pieces of business logic
– Separation results in reuse and testability
• Created as singleton objects
– Inject by AngularJS using dependency injection
• Services are created as part of a module
– One module can take a dependency on another module
• Modules are groupings of related functionality
– Also used to bootstrap the application
11

12.
Standard Services
• Many general purpose services provided by AngularJS
– $http
• Used for XMLHttpRequest handling
– $location
• Provide information about the current URL
– $q
• A promise/deferred module for asynchronous requests
– $routeProvider
• Configure routes in an SPA
– $log
• Logging service
– Many more
12

13.
Dependency injection
• AngularJS uses dependency injection to decouple modules
– Dependencies are automatically injected by the framework
• Based on the parameter name
• JavaScript is often minified in production
– Need to provide AngularJS with some extra hints
13

14.
Standard directives
• Directives allow you to enhance HTML with new capabilities
– Start using HTML as a domain specific language
• AngularJS comes with a long list of standard directives
– ngApp
– ngBind
– ngModel
– ngRepeat
– ngClick
– ngEnable/ngDisable
– ngHide/ngShow
– ngView
– …
14

15.
Custom directives
• Turn HTML into your Domain Specific Language
– Use templates to embed complete blocks
• Can use either attributes, elements, CSS classes or comments
• Directives let you interact with the DOM
– The place for jQuery code
15

16.
Routing
• Used to create SPA style application
– The page can change without using the server
• The ngView is often used to render a template
– HTML templates loaded when needed
– Can also be pre loaded as script with type="text/ng-template"
• The $routeProvider service is used to configure the route
• The $location service can be used to navigate
– Using an anchor tag is also possible
• The $routeParams service can be used to retrieve parameters
– Properties named in the route URL template
16

17.
$http service
• The basic service for doing all HTTP requests
– The building block for all AJAX requests
• Can be used as a function
– $http(config)
• Provides a number of shortcut methods
– $http.post(url, config)
– $http.get(url, config)
– $http.put(url, config)
– $http.delete(url, config)
• Uses the promises API as the result
– Provided by the $q service
17

18.
$resource
• Creates a service for working with RESTful services
– Much easier than using the $http object
• Standard functions are already preconfigured
– Only the common HTTP PUT is missing
• Requires a dependency on ngResource
– Located in angular-resource.js
18

19.
Unit testing AJAX code
• The $httpBackend is the service that is responsible
– Use the XMLHttpRequest object
• There is a second version in the ngMock module
– Used for unit testing code that does HTTP requests
• Can be configured to fake HTTP requests
– Or verify that HTTP calls where made
19

20.
Conclusion
• AngularJS is a complete framework for client side applications
– Based on the standard MVC design pattern
• Two way data binding makes it easy to build data entry forms
• Dependency injection makes it easy to separate modules
• Build with testing in mind
20

21.
Questions
?
The presentation and source code will be available
http://msmvps.com/blogs/theproblemsolver/
21