Getting started with angular js
-
Upload
maurice-beijer -
Category
Technology
-
view
4.686 -
download
1
description
Transcript of Getting started with angular js
![Page 1: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/1.jpg)
Getting started with AngularJS
Maurice de Beijer
![Page 2: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/2.jpg)
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: [email protected]
![Page 3: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/3.jpg)
3
What are we going to cover?
• What is AngularJS?• Getting started• Directives• Routing• Services
• Demos at: http://bit.ly/lidnugng
![Page 4: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/4.jpg)
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
![Page 5: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/5.jpg)
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
![Page 6: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/6.jpg)
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
![Page 7: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/7.jpg)
7
The MVC of AngularJS
![Page 8: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/8.jpg)
8
Model
• The business data• Exposed to the view through the $scope
![Page 9: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/9.jpg)
9
View
• The user interface layer• Data binds to the model• Calls functions on the controller• Use declarative directives for reusable code
![Page 10: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/10.jpg)
10
Controller
• Glues the view and the model together• Provides additional functionality• Uses additional services for reusable logic
![Page 11: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/11.jpg)
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
![Page 12: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/12.jpg)
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
![Page 13: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/13.jpg)
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
![Page 14: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/14.jpg)
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– …
![Page 15: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/15.jpg)
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
![Page 16: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/16.jpg)
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
![Page 17: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/17.jpg)
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
![Page 18: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/18.jpg)
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
![Page 19: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/19.jpg)
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
![Page 20: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/20.jpg)
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
![Page 21: Getting started with angular js](https://reader036.fdocuments.in/reader036/viewer/2022062307/554f3653b4c905cd048b4d7b/html5/thumbnails/21.jpg)
21
Questions
?The presentation and source code will be available
http://msmvps.com/blogs/theproblemsolver/