2. What is AngularJS
MVC Javascript Framework by Google for Rich
Web Application Development
3. Why AngularJS
“Other frameworks deal with HTML’s shortcomings by either abstracting away
HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating
the DOM. Neither of these address the root problem that HTML was not designed
for dynamic views”.
• Structure, Quality and Organization
• Lightweight ( < 36KB compressed and minified)
• Free
• Separation of concern
• Modularity
• Extensibility & Maintainability
• Reusable Components
“ HTML? Build UI Declaratively! CSS? Animations! JavaScript? Use it the plain old way!”
4. jQuery
• Allows for DOM Manipulation
• Does not provide structure to your code
• Does not allow for two way binding
6. Features of AngularJS
• Two-way Data Binding – Model as single
source of truth
• Directives – Extend HTML
• MVC
• Dependency Injection
• Testing
• Deep Linking (Map URL to route Definition)
• Server-Side Communication
19. Expressions
Expressions allow you to execute some
computation in order to return a desired value.
• {{ 1 + 1 }}
• {{ 946757880 | date }}
• {{ user.name }}
you shouldn’t use expressions to implement any
higher-level logic.
20. Directives
Directives are markers (such as attributes, tags, and
class names) that tell AngularJS to attach a given
behaviour to a DOM element (or transform it, replace
it, etc.)
Some angular directives
• The ng-app - Bootstrapping your app and defining its
scope.
• The ng-controller - defines which controller will be in
charge of your view.
• The ng-repeat - Allows for looping through collections
25. Loading data from the
server(services.js)
angular.module('F1FeederApp.services', []).
factory('ergastAPIservice', function($http) {
var ergastAPI = {};
ergastAPI.getDrivers = function() {
return $http({
method: 'JSONP',
url:
'http://ergast.com/api/f1/2013/driverStandi
ngs.json?callback=JSON_CALLBACK'
});
}
return ergastAPI;
});
• $http - a layer on top
of XMLHttpRequest or JSONP
• $resource - provides a higher level of
abstraction
• Dependency Injection
we create a new module
(F1FeederApp.services) and register a service
within that module (ergastAPIservice).