The document provides an overview of AngularJS, including its core concepts and how it can be used with Java frameworks like Spring, Struts, and Hibernate. AngularJS is an open-source JavaScript framework that assists with building single-page applications using MVC architecture. It allows developers to specify custom HTML tags and directives to control element behavior. The document then discusses key AngularJS concepts like data binding, directives, expressions, filters, controllers, dependency injection, views/routing, and services. It provides examples of how these concepts work and how AngularJS can integrate with Java frameworks in a sample reader application divided into multiple sub-projects.
This document provides an overview and introduction to single page application (SPA) frameworks using AngularJS. It discusses the rise of responsive SPAs and some of the challenges in building SPAs. It then introduces key AngularJS concepts like templates, directives, expressions, data binding, scopes, controllers and modules. It also includes a recap of JavaScript concepts like objects, functions and classes. Finally, it demonstrates basic AngularJS examples using directives, expressions, filters, controllers and scopes.
Chicago Coder Conference 2015
Speaker Biography: Wei Ru
Wei Ru has over 15 years of professional experience in design and development of Java enterprise applications across multiple industries. Currently he works as a technical architect at STA Group, LLC. He received a M.S. degree in Computer Science from Loyola University Chicago. As a software developer with an emphasis on Java, he strongly believes in software re-usability, open standards, and various best practices. He has successfully delivered many products using open source platforms and frameworks during his IT consultancies.
Speaker Biography: Vincent Lau
Vincent Lau has been Senior Architect at STA Group in Chicago for the last two years. He received a B.S. degree in Accounting and Finance from the University of Illinois at Chicago and worked on M.S. of Computer Science at DePaul University. He has over 15 years of software design, development, testing and project management experience on large enterprise distributed computing platforms. Most recently, he has worked on web based applications using Java, Spring, JavaScript, Angular.js, jQuery and web services. He previously had Senior Software Engineer and Lead positions in Royal Caribbean Cruises, Wells Fargo Bank, Cap Gemini America and Trans Union Corp.
Presentation: Practical AngularJS
AngularJS has been seen gaining momentum recently. Whether you want to develop a modern single-page application or to spice up only the view enabled by a traditional MVC web framework, AngularJS allows you to write cleaner, shorter code. AngularJS’ two-way data binding feature allows a declarative approach on views and controllers, and ultimately code modulization. With this strategic change and many features offered by AngularJS, learning AngularJS can be challenging. In this session, we will share some of the experiences we had in Angular UI development, we will cover:
AngularJS modules and common project setup
Communicating to a Restful service
Commonly used Angular functions, directives
UI Bootstrap, grid views and forms in AngularJS
Custom Angular directives
Asynchronous functions and event processing
An introduction to the complex single page web application framework known as AngularJs. An attempt to overview the high-level aspects of the framework, and to supply references for further exploration.
This document provides an overview of AngularJS, including its core features and concepts. It discusses how AngularJS is a client-side JavaScript framework that uses MVC architecture. Key points covered include two-way data binding, templates, dependency injection, modules, controllers, views, models, scopes, filters, services, and directives. Custom directives and their creation are demonstrated. The document aims to give attendees an introduction to AngularJS and its basic building blocks.
This document provides an overview of AngularJS, including its philosophy and architecture. AngularJS aims to simplify development by providing model-view-controller frameworks and dependency injection. It advocates for declarative code for building user interfaces rather than imperative code. The document also discusses AngularJS concepts like templates, scopes, models, repeaters, filters and custom directives to build single page applications.
AngularJS is a JavaScript MVC framework developed by Google in 2009. It uses HTML enhanced with directives to bind data to the view via two-way data binding. AngularJS controllers define application behavior by mapping user actions to the model. Core features include directives, filters, expressions, dependency injection and scopes that connect controllers and views. Services like $http are used to retrieve server data. AngularJS makes building single page applications easier by taking care of DOM updates automatically.
This document provides an overview of AngularJS fundamentals including controllers, services, directives, dependency injection, routing, forms, and testing. It discusses key AngularJS concepts like scopes, expressions, filters, and the digest loop. Sample code is presented to demonstrate modules, controllers, and directives. Various options for server communication, caching, debugging, localization, and animation are also covered. Guidelines for optimizing AngularJS applications are provided at the end.
The document discusses AngularJS and provides an introduction and overview. It describes AngularJS as an open source JavaScript framework developed by Google that uses MVC architecture and data binding. It discusses key AngularJS concepts like directives, scopes, controllers and views. It also covers communicating with servers using $http and $resource, and provides an example of writing a custom directive.
AngularJS is a JavaScript framework that extends HTML with directives and binds data to HTML with expressions. Some key points:
- AngularJS extends HTML with directives like ng-app, ng-model, and ng-bind.
- Expressions written with double braces like {{expression}} output data on the HTML page.
- Modules define AngularJS applications and controllers control the application logic and data.
- Common directives include ng-init, ng-click, ng-repeat, and filters like currency and lowercase can be used.
- A shopping cart example demonstrates binding data with ng-repeat, adding items with ng-click, and removing with ng-click.
Node package manager (NPM) initializes projects and manages front-end packages. Bower manages client-side packages like jQuery. Grunt and Gulp automate workflows. Yo generates application scaffolding. Angular uses MVC architecture with views, models, and controllers. Data binding syncs models and views. Directives extend HTML. Modules contain components and support dependency injection. Routes define application states. Filters format data. Controllers manipulate scope data. Values, services, and factories support dependency injection of reusable code. Testing uses Karma, Jasmine, and generated test skeletons.
AngularJS is a JavaScript framework for building frontend web applications. It is inspired by Model-View-Controller (MVC) pattern and uses HTML templating with two-way data binding. Key features include DOM manipulation, validation, routing, and reusable components. The document provides an overview of AngularJS concepts like directives, data binding, controllers, modules, dependency injection, and built-in services. It also demonstrates how to create custom directives and use routing and resources services.
This document provides an overview of Angular JS including its architecture, components like controllers, services, directives and views. It discusses best practices for controllers, creating services, using directives, and avoiding the Flash of Unstyled Content issue. It also mentions the UI-Router module and recommends a file structure for Angular apps. In the end, it lists some pros and cons of Angular JS, noting its two-way binding, component architecture, and rapid development but also potential performance issues with deep object graphs.
AngularJS is a popular JavaScript framework. It is intended to make the implementation of RIA (Rich Internet Applications) easier and convenient. AngularJS is created and maintained by Google. It is relatively, a new JavaScript framework, which is designed to make the front-end development as simple as possible. AngularJS is a useful tool for standardizing the web application structure and it provides a future template to ensure that the client-side applications are developed much effectively.
This document by RapidValue is written by Gourav Ajmani, Technical Lead, who has been working on AngularJS for a while, and has read many tutorials and blogs on it. According to Gourav, he could never find any article which gives a clear, concise and step-by-step guide to create the project structure and execute the project. So, he has written this document which will help you to create the Project structure and then execute it in a simple manner.
AngularJS is a JavaScript framework for building dynamic web applications. It uses MVC architecture and allows developers to write client-side code using HTML as the template language. Key features include two-way data binding, directives for extending HTML, dependency injection, and routing. AngularJS aims to solve problems with traditional HTML by making it dynamic and declarative. It separates concerns into models, views, and controllers and uses services to retrieve data from servers.
This is a talk I gave the at the AngleBrackets/DevIntersection conference in April of 2014 that covers the AngularJS JavaScript framework (one of my favorite frameworks out there!). In this talk I discussed the challenges with Single Page Applications (SPA) and how AngularJS helps solve those challenges with built-in support for two-way data binding, directives and filters, controllers and more. I also discuss the relationship of modules to controllers, factories and services, and more.
A presentation made for the AngularJS-IL meetup group that took place in oct 2014 at Google TLV Campus (http://www.meetup.com/AngularJS-IL/events/207559572/)
its an overview of how to use services in your app. this slideshow contain a link for a reference code on github.
(link in the last slide)
Material I prepared for a beginner's workshop on AngularJS. Feel free to change it for your own use. I would appreciate it if you attributed the original to me.
Dynamic Application Development by NodeJS ,AngularJS with OrientDBApaichon Punopas
This document provides an overview of NodeJS, AngularJS, and how they can be used together with OrientDB for building dynamic applications. It discusses key concepts like non-blocking I/O in NodeJS, MVC architecture in AngularJS, data binding, directives, routing. It also compares performance of NodeJS vs Apache and explains why Angular and NoSQL are well-suited for dynamic applications that require frequent changes - since only the data model and view layers need changes, without requiring changes to the controller code or database schema.
This document provides an introduction to key concepts in Angular including how Angular works, data binding, scope, controllers, services, modules, and routing. It explains that Angular bootstraps the browser to build the DOM and any changes to the model or DOM trigger updates between each other. It describes one-way and two-way data binding and how scope acts as the source of truth and tracks changes. Controllers control the page UI, services handle non-UI logic, and modules configure sections and routing. Components connect routes, templates, and controllers to create reusable DOM elements.
- O documento discute o estado atual do AngularJS, incluindo problemas de performance com data binding e escopo, e como resolvê-los.
- É sugerido minimizar watchers, usar ng-if em vez de ng-repeat quando possível e processar lógica no controller em vez de na view.
- O documento também discute as mudanças no Angular 2 e como preparar aplicações para o futuro usando TypeScript desde já.
AngularJS, a MVW framework from Google is based on JavaScript, a language globally known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Integrating AngularJS is simple as it evaluates page once HTML is in the DOM and make easier to bind Angular on top of existing applications. It can run along with Node.js, an asynchronous development platform with lightning speed execution, which makes building Mean Stack applications easier and faster. AngularJS comes with a very good documentation and also have wide range of third party modules making it user-friendly for developers.
Building scalable applications with angular jsAndrew Alpert
This document discusses best practices for organizing AngularJS applications. It recommends organizing files by feature rather than type, with each feature having related HTML, CSS, tests, etc. It also recommends structuring modules to mirror the URL structure and listing submodules as dependencies. The document discusses using services for reusable logic rather than large controllers. It emphasizes writing tests, managing technical debt, following code style guides, and using task runners like Grunt or Gulp to automate tasks.
Angular JS - Develop Responsive Single Page ApplicationEdureka!
AngularJS, a MVW framework from Google is based on JavaScript, a language globally known to millions of developers worldwide - thus giving it a much lower learning curve even for complete beginners. Integrating AngularJS is simple as it evaluates page once HTML is in the DOM and make easier to bind Angular on top of existing applications. It can run along with Node.js, an asynchronous development platform with lightning speed execution, which makes building Mean Stack applications easier and faster. AngularJS comes with a very good documentation and also have wide range of third party modules making it user-friendly for developers.
What is a Angular Js ?
What is the main benefits of Angular Js ?
What is the difference between Angular js 1 and Angular js 2 ?
Structure of Angular Js ?
Choose of Language|Editor ?
Introduction of Components.
Template, Interpolation and Directives.
Data Binding and Pipes.
,Angular 2 is Javascript framework
This document discusses AngularJS application architecture best practices including:
- Separation of concerns by component type and feature
- Consistent syntax such as aliasing 'this' for nested functions
- Organizing the app by feature rather than type for larger apps
- Naming conventions for controllers, services, directives
- Using modules to aggregate dependencies
- Best practices for controllers, AJAX calls, unit testing, and end-to-end testing
Microservices - java ee vs spring boot and spring cloudBen Wilcock
Spring Boot and Spring Cloud provide an easier and more productive framework for building cloud-native microservices compared to Java EE. Spring Boot simplifies the development, deployment, and management of microservices. Spring Cloud adds helpful capabilities for service discovery, external configuration, load balancing, and monitoring that are missing from Java EE. While Java EE adoption is declining, the use of Spring Boot and Spring Cloud is growing rapidly among developers.
AngularJS - What is it & Why is it awesome ? (with demos)Gary Arora
AngularJS - What is it & Why is it awesome! A quick introduction to AngularJS, its features and some demos. This deck was part of Gary Arora's presentation for the Boston Code Mastery event in December 2013.
This document provides a summary of the AngularJS framework. It discusses the following key points in 3 sentences:
1. AngularJS aims to make HTML better suited for building applications by teaching the browser new syntax like directives. This allows more of the application logic to be handled in the declarative HTML instead of JavaScript code.
2. Angular follows an MVC pattern where the controller contains the business logic and data, the view displays the data through bindings, and the scope acts as a synchronization mechanism between the model and view.
3. Features like data binding, directives, dependency injection and routing allow building dynamic and interactive single-page applications by synchronizing the model and view through declarative templates and separating concerns
AngularJS 1.3 is by far the best version of Angular available today. It was just released a few weeks ago. It's chock full of bug fixes, feature enhancements and performance improvements.
YouTube link: - https://youtu.be/bghVyCbxj6g
AngularJS uses a compile function to parse HTML into DOM elements and compile directives. The compile function sorts directives by priority and executes their compile and link functions to connect the scope to the DOM. It recursively compiles child elements. This allows directives to manipulate DOM elements and register behavior.
This document discusses using Angular for dynamic content in a CMS context. It describes bootstrapping multiple Angular applications on a page and providing initial data to components. It then discusses using a route config generated by a CMS, resolving data for routes, and using generic components with *ngIf. It also covers ComponentFactoryResolver for dynamic components, AOT, server-side rendering with Angular Universal, and maintaining state between server and client.
AngularJS is a JavaScript framework that allows developers to create single-page applications. It provides features like data binding, directives, dependency injection and MVC architecture. The presentation provided an overview of AngularJS, its core features and concepts like modules, controllers, services and routing. Key benefits of AngularJS include building reusable components, easier testing and single page application capabilities.
Angular workshop - Full Development GuideNitin Giri
AngularJS provides powerful tools for building single page applications, including data binding, scopes, controllers, directives, filters and forms validation. It follows an MVC pattern with two-way data binding between models and views. Key features include directives for creating custom HTML elements, filters for formatting data and built-in validation for forms. AngularJS aims to improve frontend development by reducing code and server interactions.
AngularJS is a JavaScript framework for building single-page web applications. It augments HTML to provide MVC capabilities and allows developers to write dynamic web apps without having to manipulate the DOM directly. AngularJS uses scopes to bind models and views, and filters to format data for display. Directives extend HTML and allow developers to create reusable components. Modules are used to organize code and keep the global namespace clean.
This document provides an introduction and overview of AngularJS including its main concepts such as MVC, dependency injection, directives, filters, data binding, routing and REST services. It also discusses Angular scaffolding tools like Yeoman and provides examples of building an Angular application including fetching data from REST APIs and implementing routing. The document contains an agenda with topics and code snippets for controllers, views, directives and services. It also includes exercises for practicing key AngularJS concepts like data binding, routing and consuming REST services.
This document provides an overview of AngularJS, including its features, directives, filters, data binding, views, controllers, modules, and factories. It discusses key AngularJS concepts like single page applications, directives like ng-repeat and ng-model, filters, creating controllers within modules, and using factories. It also covers creating custom directives, dependency injection with $inject, and the differences between values, services, factories and providers in AngularJS.
This document provides an overview of AngularJS, including its features, directives, filters, data binding, views, controllers, modules, and factories. It discusses key AngularJS concepts like single page applications, directives like ng-repeat and ng-model, filters, creating controllers within modules, using factories to share data between controllers, and $watch. Code examples are provided for common tasks like creating a view with a controller, using directives and filters, and defining modules, controllers, and factories.
AngularJS is an open-source JavaScript framework for building client-side web applications. It facilitates the creation of single-page applications using Model-View-Controller architecture. Key aspects of AngularJS include data binding, directives, dependency injection, services, filters and forms. It promotes declarative programming for templates and imperative code for controllers and logic. AngularJS makes it easier to write modular code through services and dependency injection. It also simplifies communication with backend servers via the $http service and $resource for RESTful APIs.
AngularJs Workshop SDP December 28th 2014Ran Wahle
This document provides an overview and agenda for a training on AngularJS. It introduces key concepts in AngularJS like modules, dependency injection, data binding with controllers and scopes, services, filters, directives, forms, and routing. Code examples are provided to demonstrate creating modules, controllers, services, binding data between the view and model, and using built-in and custom directives. The training will cover building AngularJS applications with a focus on best practices.
The document discusses how web pages are created using HTML, CSS, and JavaScript. It explains the Document Object Model (DOM) and how JavaScript can manipulate the DOM. It then provides an overview of AngularJS including what it is, how it works, and some key concepts like directives, dependency injection, services, and data binding.
Angular Js Get Started - Complete CourseEPAM Systems
This document provides an introduction and overview of AngularJS, including:
- AngularJS is a JavaScript framework for building dynamic web applications and sites. It allows building applications that run in web browsers using HTML.
- Key AngularJS concepts covered include directives, controllers, modules, services, filters, forms, routing and two-way data binding.
- Examples are provided to demonstrate how to create AngularJS applications, controllers, directives, filters and more.
- Custom directives and services can be created to extend the functionality of AngularJS applications.
Introduction to single page application with angular jsMindfire Solutions
This document summarizes a presentation on AngularJS. It introduces AngularJS as a JavaScript framework for building single-page applications. It covers key AngularJS concepts like modules, controllers, views, directives, routing, services, filters and custom directives. It also provides examples of creating modules, controllers and views, using directives for data binding, implementing routing and dependency injection. The presentation concludes by discussing upcoming topics like custom directives, isolated scopes, services and testing with AngularJS.
AngularJS is an open source JavaScript framework for building dynamic web applications. It enhances HTML with custom directives and bindings to enrich client-side web applications with reusable components. Key features include two-way data binding, reusable components, support for MVC/MVVM design patterns, end-to-end testing, cross-browser compatibility, and services. AngularJS allows developers to organize applications into modules and controllers to keep code clean and reusable.
AngularJS is an open-source JavaScript framework for building dynamic web applications. It uses HTML as the template language and allows extending HTML vocabulary for the application. The key concepts covered in the document include modules and dependency injection, data binding using controllers and scopes, services, filters, form validation, directives, and routing. Various AngularJS features like modules, controllers, services, directives etc. are demonstrated via code examples. The document provides an introduction to core AngularJS concepts through explanations, code samples and a demo.
Introduction to Angular JS by SolTech's Technical Architect, Carlos Muentes.
To learn more about SolTech's custom software and recruiting solution services, visit http://www.soltech.net.
A complete crash course with 7 pratical labs, to have a head start developing single page applications with Angular. It also contains advanced topics, like Transclusion, Directive to directive communication and UI Router.
High Quality presentation: https://goo.gl/3OwQXf
Download Labs: https://goo.gl/cVI6De
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosLearnimtactics
AngularJs is next big thing. Have a read for making strong your skills in AngularJs. We are sharing with you basic model of angularjs, How it is work and what are his basics. Enjoy the information.
This fast-paced overview for beginners discusses some aspects of AngularJS 1.x and 2.x, which versions to learn (and why), and the technologies that you need to learn. We'll delve into examples of combining AngularJS with other technologies (such as BackboneJS and D3.js), and also address the +/- of AngularJS.
This document discusses using AngularJS for Cordova development and includes summaries of key AngularJS concepts like services, directives, and dependency injection. It also provides examples of using AngularJS services to wrap native Cordova APIs and using UI frameworks like Ionic and Onsen UI to build native-feeling mobile apps with AngularJS directives.
This document provides an overview of key concepts in AngularJS including two-way data binding, directives, modules, controllers, expressions, validation, filters, services, dependency injection, and custom directives and services. It explains how AngularJS uses directives, modules, and controllers to organize code. It also covers core functions like data binding, validation, filters, and dependency injection via the injector.
2. What is “Angular JS” ?
AngularJS is an open-source JavaScript framework,
maintained by Google, that assists with
running single-page applications. Its goal is to
augment web-based applications with model–view–
controller (MVC) capability, in an effort to make
both development and testing easier.
AngularJS allows the developer to specify custom and
reusable HTML tags that moderate the behavior of
certain elements these attributes are called ‘Diretives’.
Example: ng-app , ng-model etc.
3. Why “Angular JS” ?
• Defines various ways to organize web app at client
side.
• Enhances HTML using various directives, attributes
and templates.
• Encourage 2-way data binding
• Encourage MVC
• Code reuse
• Good for SPAs
4. Angular JS: MVC
View
3. Implements the business
Logic on response data
and bind it to view
Model
1. Event or User Action
or View Load
Controller
2. Maps to particular model
after fetching the data
5. Angular JS: Core Concepts
Bootstrap
Data Binding
Directives
Expressions
Filters
Controllers
Dependency Injection
Views and Routing
Services
$digest
6. Angular JS: Bootstrap
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<script src="angular.js"></script>
</head>
<body>
…..
</body>
</html>
The ng-app attribute represents
an Angular directive
named ngApp.
The ngApp found in the
document will be used to define
the root element to autobootstrap as an application.
7. What happens during bootstrapping..?
There are 3 important things that happen during the app
bootstrap:
• The injector that will be used for dependency injection is
created.
• The injector will then create the root scope that will become
the context for the model of our application.
• Angular will then compile the DOM starting at
the ngApp root element, processing any directives and
bindings found along the way.
8. Angular JS: Data Binding
Data-binding in Angular
web apps is the automatic
synchronization of data
between the model and
view components.
First the template
(uncompiled HTML) is
compiled on the browser,
and second, the
compilation step produces
a live view.
9. Angular JS: Directives
I am ng-model and i am a
directive.
<input ng-model=“hell">
Directives are markers on a DOM element (such as an
attribute, element name, or CSS class) that tell
AngularJS's HTML compiler ($compile) to attach a
specified behavior to that DOM element or even transform
the DOM element and its children.
Angular provide some in-built directives like ngApp(ngapp), ngModel(ng-model), ngIf(ng-if) etc.
10. Angular JS: Directives…
Do I need to get compiled…?
<input ng-model=“hell">
What does it mean to "compile" an HTML template?
For AngularJS, "compilation" means attaching event
listeners to the HTML to make it interactive. The reason
the term "compile" is used that the recursive process of
attaching directives mirrors the process of compiling source
code in compiled programming languages.
11. Angular JS: Expressions
{{ expression }}
1+2=3
{{a.b.c}}
I am an expression. I use $parse
service to evaluate.
1+2={{1+2}}
Expression evaluation is
forgiving to undefined and null.
It means that if any of a/b/c is
null or undefined it will not
throw exception and show
nothing(blank).
12. Angular JS: Filters
{{ 1.234 | number:2 }}
I am a Filter. I will show up to 2
decimal points only i.e. 1.23
A filter formats the value of an expression for display to the
user.
They can be used in view templates, controllers or services and
it is easy to define your own filter.
{{ expression | filter }}
{{ expression | filter1 | filter2 | ... }}
{{ expression | filter:arg1 : arg2 ... }}
14. Angular JS: Controllers
In Angular, a Controller is a
JavaScript constructor function that
is used to augment the Angular
Scope.
When a Controller is attached to the
DOM via the ng-controller directive,
Angular will instantiate a new
Controller object, using the specified
Controller's constructor function. A
new child scope will be available as
an injectable parameter to the
Controller's constructor function
as $scope.
I am a controller. I contain all
business logics.
<div
ng-controller=“hellCtrl">
{{msg}}
</div>
function hellCtrl($scope)
{
$scope.msg = ‘Hell!!!';
}
15. Angular JS: Controllers…
Please use me correctly.
function hellCtrl($scope)
{
$scope.msg = ‘Hell!!!';
}
Do not use Controllers for:
• Any kind of DOM manipulation — Controllers should contain
only business logic.
• Input formatting (use angular form controls instead).
• Output filtering (use angular filters instead).
• Sharing stateless or stateful code across
Controllers(use angular services instead).
• Managing the life-cycle of other components (for example, to
create service instances).
16. Angular JS: Dependency Injection
$scope and hellSvc are two
services which need to be
injected into the controller.
function hellCtrl($scope,
hellSvc)
{ ... }
Dependency Injection (DI) is a software design pattern that
deals with how code gets hold of its dependencies.
There are only 3 ways an object or a function can get a hold of
its dependencies:
• The dependency can be created, using the new operator.
• The dependency can be looked up by referring to a global
variable.
• The dependency can be passed in to where it is needed.
17. Angular JS: Views and Routing
Sample App Router Config
var app= angular.module(‘app', [
'ngRoute‘, ‘appCtrl’ ]);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/home',
{
templateUrl: 'partials/home.html',
controller: ‘homeCtrl'
}).otherwise({
redirectTo: '/error’ });
}]);
$route is used for deep-linking
URLs to controllers and views
(HTML partials). It
watches $location.url() and tries
to map the path to an existing
route definition.
Routing requires
the ngRoute module to be
installed.
We can define routes
through $routeProvider’s API.
18. Angular JS: Services
What are Angular Services?
Angular services are singletons objects or functions that carry out
specific tasks common to web apps. Angular has a number of built
in services, such as the $http service.
Using $inject for injection
Using inline injection
var ctrl= function($location) { ... };
ctrl.$inject = ['$location'];
var svc= function($http) { ... };
myModule.controller(‘ctrl', ctrl);
myModule.factory(‘svc', ['$http',
svc]);
19. Angular JS: Services and DI
xTended
app.config(function($provide) {
$provide.factory('greeting',
function() {
return function(name) {
alert("Hello, " + name);
};
}); });
var greeting =
$injector.get('greeting');
greeting(‘Cloak’);
20. Angular JS: Creating Services
All services are defined by using $provider service and it’s
respective methods provider, factory and service.
These methods are also available on the module object so you can
use them without injecting $provider service.
Using angular module
Using $provider service
var myModule =
angular.module('myModule', []);
myModule.factory('serviceId',
function() {
var inst;
…
return inst;
});
angular.module('myModule', [],
function($provide) {
$provide.factory('serviceId',
function() {
var inst;
…
return inst;
});});
21. Angular JS: Creating Services…
Creating services using service. Service is suitable for cases when
you have a ready function that you need to share throughout the
app without any “preprocessing”. It expects to receive a constructor
which it then invokes by using new and then returns a result.
Using service
angular.module(‘hell', []).service(‘hellService', function(){
this.greet = function (name) {
return ‘Welcome to Hell : ' + name;
}
});
function hellController( hellService) {
hellService.greet(‘Cloak’);
}
22. Angular JS: Creating Services…
Creating services using fatory. Factory allows us to add some logic
before creating the object we require. It allows us to pass the
function which factory then invokes and returns the result. This
allows us to return what ever we like not just call constructor of
already prepared function.
Using factory
angular.module(‘hell', []).factory(‘hellService', function () {
var hellClass = function(name) {
this.name = name; this.greet = function () {
return ‘Welcome to Hell: ' + this.name;
} } return hellClass ; });
function hellController( hellService) {
var hellSvc = new hellService(‘Cloak');
hellSvc.greet();
}
23. Angular JS: Creating Services…
Creating services using provider. Provider is the most configurable
of all three. All other providers are derived from it. It enables us
define how the service will be provided even before the injection
system is in place. This is achieved with configure call where we
register work during the modules configuration phase.
Using provider
var hellApp = angular.module(‘hellApp', []);
hellApp.provider(‘hell', function () {
var darkSide = true;
this.joinDarkSide = function(s){
darkSide = s;
}
var hellClass = function(name) {
this.name = name;
this.greet = function () { return ‘Welome to Hell(Dark Side):’ +
this.name; } }
….contd…
24. Angular JS: Creating Services…
Contd..: Using provider
var hell2Class = function(name) { this.name = name; this.greet =
function () { return ‘Welcome to Hell(Light Side) ' + this.name; } }
this.$get = function() {
if (darkSide){ return hellClass; }
else { return hell2Class; } };
});
hellApp.config(function(hellProvider){
hellProvider.joinDarkSide(false); });
function hellController( hellProvider) {
var luke = new hellProvider('Luke'); luke.greet();
}
26. Angular JS: Digest
How all this works?
• AngularJS compares a value with its previous value and if it has
changed then a change event is fired. This is dirty checking.
• In AngularJS, a digest is the cycle that performs dirty checking.
This is initiated via $digest().
• If something happens outside of AngularJS, you need to let
AngularJS know to execute a digest cycle and you do that via
$apply which calls $digest.
27. Angular JS: Digest…
$digest();
This is the heart-beat of angular js.
It processes all of the watchers of the current scope and its
children.
The $digest()keeps calling the watchers until no more listeners are
firing. This means that it is possible to get into an infinite loop.
This function will throw 'Maximum iteration limit exceeded.' if the
number of iterations exceeds 10.
Usually, we don't call $digest() directly in controllers or
in directives. Instead, we should call $apply() (typically from
within a directives), which will force a $digest().
If you want to be notified whenever $digest() is called, you can
register a watchExpression function with $watch() with
no listener.
28. Angular JS: Watch Expressions
Behind every $digest cycle is a good watchExpression.
watchExpressions return the value of what is being watched on
every $digest cycle. This is the trenches of dirty checking. If the
value of the current watchExpression call and the previous
watchExpression call do not match then a listener is fired.
Syntax:
scope.$watch('name', function(newValue, oldValue)
{ /* Do something clever here */ });
29. Angular JS: $apply
$apply is a courier service that the outside world can recruit to tell
AngularJS that something has happened and drop off an optional
expression to be handled.
To follow the courier analogy, $apply delivers the message and
possibly a package to the sweet lady at the front desk named
$evalerie, but you can call her $eval.
Now $eval checks to make sure that $apply dropped off a
legitimate expression. If something is wrong while it is being
evaluated then an exception is thrown and passed to the
$exceptionHandler service. From there, $digest is called to kick off
the $digest cycle.
Eg.: http://jsfiddle.net/simpulton/huKHQ/