angular seminar-js
TRANSCRIPT
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
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
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.
Presenter: Padmalochan, Mindfire Solutions
MV* ArchitectureChoose whatever architecture suits you best.
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.
Presenter: Padmalochan, Mindfire Solutions
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>
Presenter: Padmalochan, Mindfire Solutions
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>
Presenter: Padmalochan, Mindfire Solutions
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>
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
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.
Presenter: Padmalochan, Mindfire Solutions
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