Angular Seminar-js

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

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

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

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.

Why Angular

MV* Architecture
Choose whatever architecture suits you best.

Two-Way Data Binding

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.

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>

Dependency Injection
B. From $inject property
var MyController = function(renamed$scope, renamedGreeter) {
// TODO...
}
MyController['$inject'] = ['$scope', 'greeter'];
</script>
C. Inline Array
someModule.factory('greeter', ['$window', function(renamed$window) {
// ...
}]);
</script>

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>

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

Data binding , Expression
and Scopes

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.

References
https://github.com/jmcunningham/AngularJS-Learning

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 

Question and Answer

Thank you

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

Angular Seminar-js

Recommended

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to Angular Seminar-js (20)

More from Mindfire Solutions (20)

Recently uploaded (20)

Angular Seminar-js