AngularJS is a structural framework for dynamic web apps.This presentation talks about Angular js Basics (MV* architecture), Two Way Data-Binding, Templates, Dependency Injection etc...

1. 5 awesome features in
Angular JS
Presenter: Padmalochan, Mindfire Solutions
Date: 17/11/2014

2. About Me
I am Padmalochan Maharana, working as web developer at Mindfire Solutions
since 3.2 years.
Key skills :
Asp.Net MVC 4.0, C#, Entity Framework, Javascript, Jquery, HTML5, CSS3,
RESTful API, Angular.js.
Specialist in Backbone.js
Curently having 3 certification
MCTS-70-515 - Microsoft .NET 4.0, Web App Development
MCP - 70-486 - Developing ASP.NET MVC 4 Web Applications
MCP:70-480 - Specialist certification in HTML5 with JavaScript and CSS3 Exam
Presenter: Padmalochan, Mindfire Solutions

3. Presenter: Padmalochan, Mindfire Solutions
Agenda
 Angular JS Basics (MV* Architecture)
 Two way Data-Binding
 Dependency Injection
 Templates
 Directives
 Model, Services and Factory
 Working with RESTful API

4. Presenter: Padmalochan, Mindfire Solutions

5. Presenter: Padmalochan, Mindfire Solutions
Angular JS is a SPA Framework
 Single Page Applications.
 No round tripping
 Loads all of resources at one go.
 Its a concept not proper definition
 Rich user experience.
 Net latency is reduced.
 Performance is increased.

6. Presenter: Padmalochan, Mindfire Solutions
Why Angular

7. Presenter: Padmalochan, Mindfire Solutions

8. Presenter: Padmalochan, Mindfire Solutions
MV* Architecture
Choose whatever architecture suits you best.

9. Presenter: Padmalochan, Mindfire Solutions
Two-Way Data Binding

10. Presenter: Padmalochan, Mindfire Solutions
Controller and $scope
$scope is a glue between the Controller and the View
The controller is responsible for constructing the model on
$scope and providing commands for the view.
$scope an object that refers to application model.
It can watch expressions and propagate events.
Controllers shouldn't know any thing about view they control.
They should not own the domain model.

11. Presenter: Padmalochan, Mindfire Solutions
Dependency Injection
Dependency Injection (DI) is a software design pattern that deals
with how components get hold of their dependencies. Angular JS
comes with a built-in dependency injection mechanism. You can
divide your angular js app into multiple different types of
components which angular js can inject into each other.
There are 3 ways of injecting dependencies :
A. From function Parameter
<script type="text/javascript">
function Controller($scope, greeter) {
// ...
}
</script>

12. Presenter: Padmalochan, Mindfire Solutions
Dependency Injection
B. From $inject property
<script type="text/javascript">
var MyController = function(renamed$scope, renamedGreeter) {
// TODO...
}
MyController['$inject'] = ['$scope', 'greeter'];
</script>
C. Inline Array
<script type="text/javascript">
someModule.factory('greeter', ['$window', function(renamed$window) {
// ...
}]);
</script>

13. Presenter: Padmalochan, Mindfire Solutions
Directives
Data is attached to $scope which is used to display in View.
Model doesn't know about view.
Data Binding moves model data to view.
<script type=”text/javascript”>
Var controller = function($scope){
$scope.message=”hello world”;
}
</script>
<div> {{ message }} </div>

14. Presenter: Padmalochan, Mindfire Solutions
Data binding , Expression
and Scopes
$compile compiles the DOM into a template function that
can be used to bind the view and scope together.
$digest processes all of the watchers of current scope
$apply() is used to notify that something has happened
outside of Angular JS domain
$apply forces a $digest cycle
Custom watch and digest

15. Presenter: Padmalochan, Mindfire Solutions
Data binding , Expression
and Scopes

16. Presenter: Padmalochan, Mindfire Solutions
Data binding , Expression
and Scopes

17. Presenter: Padmalochan, Mindfire Solutions
Services and Factory
service factory
module.service('MyService', function() {
this.method1 = function() {
//..
}
this.method2 = function() {
//..
}
});
module.factory('MyFactory', function() {
var factory = {};
factory.method1 = function() {
//..
}
factory.method2 = function() {
//..
}
return factory;
});
service(class) - registers a constructor function, class that will be wrapped in a service
provider object, whose $get property will instantiate a new object using the given
constructor function.
factory(fn) - registers a service factory function, fn, that will be wrapped in a service
provider object, whose $get property will contain the given factory function.

18. Presenter: Padmalochan, Mindfire Solutions
References
https://github.com/jmcunningham/AngularJS-Learning

19. www.mindfiresolutions.com
SAMPLE CASE STUDY
Online Statistical Sports Data System
This client of ours is a sports statistical
media company specializing in high
school sports. They provided this high
school sports statistical data through
recording, display and storage of
athletic events through multimedia
outlets which included online viewing
and mobile phone access. They had a
range of products and were involved
into research and development of their
products. Recently, they came up with
an Adobe AIR stat recorder application
capable of producing box score display
with the help of local programmers.
Click here to know more 

20. Presenter: Padmalochan, Mindfire Solutions
Question and Answer

21. Presenter: Padmalochan, Mindfire Solutions
Thank you

22. www.mindfiresolutions.com
https://www.facebook.com/MindfireSolutions
http://www.linkedin.com/company/mindfire-solutions
http://twitter.com/mindfires