1) The document introduces AngularJS, a framework for building single-page applications. It discusses why frameworks are needed for SPAs and highlights features of AngularJS like two-way data binding, directives, controllers, and routing.
2) The agenda covers AngularJS concepts like templates, directives, data binding, scopes, controllers, modules, filters, services, and routing. It also explains how an Angular app starts and how views interact with controllers.
3) Examples are provided to demonstrate two-way data binding, directives, controllers, and routing in AngularJS. Links are included for further learning on AngularJS tutorials and documentation.
2. Agenda
● Need of framework in SPA
● What is angularJS
● Features of angular
● Angular concepts
● How an angular app starts
● Two way data binding
● Directives
● Controllers
● View - Controller interaction
● Modules
● Services
● Routing
3. Why a framework
Things to consider for developing SPA
DOM manipulation
- how to manipulate view effectively
History
- What happens when pressing back button
Routing
- Readable urls
Data binding
- How to bind data from model to view
View Loading
- how to load view in html
Hence use Frameworks
4. SPA framework in Javascript
Implements client side mvc pattern
No direct manipulation of DOM, less code, less complexity
Supported by major browsers
Large and fast growing open source community
Help developers write more meaningful html
9. Directives
Directives are markers on a DOM element (such as an attribute, element
name, comment or CSS class)
Directives tell AngularJS's HTML compiler to attach a specified behavior to
that DOM element or even transform the DOM element and its children.
<body ng-app=”myapp”>
<ng-view></ng-view>
</body>
10. Controllers
Provides logic to your app
ng-controller directive specifies controller in html
Don't modify dom from controller. so how we communicate
with view?
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope',
function($scope) {
$scope.greeting = 'Hola!';
}]);
11. View - Controller interaction
$scope is an object that can be used to communicate
between view and controller
https://gist.github.com/shyjal/aa9a0e4b15029f7ea624
12. Modules
Re usable container for different features of an app or app itself
- controllers, services, filters, directives, etc.
Modules can be loaded in any order
No need of use require js like AMD’s as angular have
dependency injection mechanism
var myApp = angular.module('myApp',[ngRoute]);
This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.
The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.
The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.
The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.
The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.
The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.
The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.
The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.
The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.
The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
Test is available in word document under 'Attention to Detail' notes.
This is a test that shows us how agile we are currently. It helps us gauge where we are with our attention to detail and helps us chart out what we need to do to improve this quality. The test clearly states that we need to pay very close attention to detail yet most of us seldom do.
Test is available in word document under 'Attention to Detail' notes.
This is a test that shows us how agile we are currently. It helps us gauge where we are with our attention to detail and helps us chart out what we need to do to improve this quality. The test clearly states that we need to pay very close attention to detail yet most of us seldom do.
This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.
The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.
Test is available in word document under 'Attention to Detail' notes.
This is a test that shows us how agile we are currently. It helps us gauge where we are with our attention to detail and helps us chart out what we need to do to improve this quality. The test clearly states that we need to pay very close attention to detail yet most of us seldom do.
This presentation is customized for QBurst and addresses aspects of Attention to details in the Qburst environment.
The meticulous attention to detail at a micro level in this art form has resulted in a spectacular collection item.