angular seminar-js

5 awesome features in Angular JS

Presenter: Padmalochan, Mindfire SolutionsDate: 17/11/2014

About MeI 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 DevelopmentMCP - 70-486 - Developing ASP.NET MVC 4 Web ApplicationsMCP:70-480 - Specialist certification in HTML5 with JavaScript and CSS3 Exam

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


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* ArchitectureChoose 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 InjectionDependency 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 InjectionB. 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>


DirectivesData 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.


Referenceshttps://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

Software