Your SlideShare is downloading. ×
0
Getting started with AngularJS
Maurice de Beijer
Who am I?
Maurice de Beijer
The Problem Solver
Microsoft Integration MVP
Freelance developer
DevelopMentor instructor
Twit...
What are we going to cover?
•
•
•
•
•

What is AngularJS?
Getting started
Directives
Routing
Services

• Demos at:
– http:...
What is AngularJS?
• AngularJS is an MVC framework for browser based apps
– Open source and originally developed at Google...
Key features
• Model View Controller architecture
– A well known and proven architecture
• Declarative two way data bindin...
Bootstrapping
• Automatic bootstrapping
– Add a reference to AngularJS
– Add the ngApp attribute
• Manual bootstrapping is...
The MVC of AngularJS

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

8
View
•
•
•
•

The user interface layer
Data binds to the model
Calls functions on the controller
Use declarative directive...
Controller
• Glues the view and the model together
• Provides additional functionality
• Uses additional services for reus...
Services
• Services are reusable pieces of business logic
– Separation results in reuse and testability
• Created as singl...
Standard Services
• Many general purpose services provided by AngularJS
– $http
• Used for XMLHttpRequest handling
– $loca...
Dependency injection
• AngularJS uses dependency injection to decouple modules
– Dependencies are automatically injected b...
Standard directives
• Directives allow you to enhance HTML with new capabilities
– Start using HTML as a domain specific l...
Custom directives
• Turn HTML into your Domain Specific Language
– Use templates to embed complete blocks
• Can use either...
Routing
• Used to create SPA style application
– The page can change without using the server
• The ngView is often used t...
$http service
• The basic service for doing all HTTP requests
– The building block for all AJAX requests
• Can be used as ...
$resource
• Creates a service for working with RESTful services
– Much easier than using the $http object
• Standard funct...
Questions

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

19
Upcoming SlideShare
Loading in...5
×

Getting started with angular js

3,266

Published on

Online presentation I did about getting started with AngularJS for DevelopMentor

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,266
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
49
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Getting started with angular js"

  1. 1. Getting started with AngularJS Maurice de Beijer
  2. 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. 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. 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. 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. 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. 7. The MVC of AngularJS 7
  8. 8. Model • The business data • Exposed to the view through the $scope 8
  9. 9. View • • • • The user interface layer Data binds to the model Calls functions on the controller Use declarative directives for reusable code 9
  10. 10. Controller • Glues the view and the model together • Provides additional functionality • Uses additional services for reusable logic 10
  11. 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. 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. 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. 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. 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. 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. 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. 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. 19. Questions ? The presentation and source code will be available http://msmvps.com/blogs/theproblemsolver/ 19
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×