2. Who am I?
Maurice de Beijer
The Problem Solver
Microsoft Integration MVP
Freelance developer
DevelopMentor instructor
Twitter:
@mauricedb
http://msmvps.com/blogs/theproblemsolver/
• Blog:
http://www.TheProblemSolver.nl
• Web:
mauricedb@develop.com
• E-mail:
•
•
•
•
•
•
2
3. What are we going to cover?
•
•
•
•
•
What is AngularJS?
Getting started
Directives
Routing
Services
• Demos at:
– http://bit.ly/dmangularjs
• Source code at:
– https://github.com/mauricedb/DM-Starting-AngularJS
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.9
• 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
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