Angular In Depth

Angular
In
Depth
Presenter: Nakul Suneja, Mindfire Solutions
Date: 26/03/2015

Earlier we discussed:
1. Single Page Application.
2.What is Angular.js?
3.Why Angular.j
4.Modules.
5.Controllers
6.Views
7.Directives
8.Angular Routes
9.Custom Directives
10. Angular Services & Custom Services Demo
11. Filters & Custom Filters Demo.

Presenter: Nakul, Mindfire Solutions
Angular in Depth.
1. Angular Custom Directives.
2. Isolated Scopes in Directives.
3. DI with Custom Directives.
4. What is Services, Factories Providers & Value in
Depth.
5. Custom Services & Factories in Depth.
6. Useful Tools with Angularjs.

Directives are markers on Dom Elements(such as attributes, tags, and class
names) that tell HTML compiler ($compile) to attach a given behavior to a
DOM element (or transform it, replace it, etc.),When Angular bootstraps
your application, the HTML compiler traverses the DOM matching
directives
against the DOM elements.
Some angular built-in directives
l The ng-app - Bootstrapping your app and defining its scope. (<html ng-
app>).
l The ng-controller - defines which controller will be in charge of your
view.
l (<input ng-controller=”xyz”>).
l The ng-repeat - Allows for looping through collections.
l The ng-init – Allows to Initialize any Data Model Object.
What is a Directive?

AngularJS Help for Directives

Custom Directives

You can implement the following types of directives:
1. Element directives
2. Attribute directives
3. CSS class directives
4. Comment directives
To create Each type of directive You can use restrict to EAC
Custom Directives
app.directive('myTag', function() {
return {
restrict: 'A', /// A => Attributes, E=> Elements, C=> Classes
template:'<h3>My Tag HTML</h3>',
}
});

Isolation in Directives
Isolate scope can be a tough concept to understand when you are first starting out with AngularJS.
Since directives are reusable, sharing $scope can create undesirable behavior with shared state.
By isolating scopes you are able to control how and when your directives will share state with controllers and other
directives.
Isolation with Directive:
app.directive('myFirstName', function() {
return {
restrict: 'E', /// Three Type of Directives We can Define A => Attributes, Elements, Classes
scope: {
},
template:'First Name: <input type="text" ng-model="first_name">{{first_name}}',
}
});

Transclude Directives
Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.Any
existing content of the element that this directive is placed on will be removed before the transcluded content is inserted.
app.controller('UserController', function($scope) {
$scope.title = 'Lorem Ipsum';
$scope.text = 'Neque porro quisquam est qui dolorem';
})
app.directive('pane', function(){
return {
restrict: 'E',
transclude: true,
scope: { title:'@' },
template: '<div style="border: 1px solid black;">' +
'<div style="background-color: gray">{{title}}</div>' +
'<ng-transclude></ng-transclude>' +
'</div>'
};
});

Providers

Angular Services.
Angular services are substitutable objects that are wired together using dependency injection (DI). You
can use
services to organize and share code across your app.
Angular services are:
 Lazily instantiated – Angular only instantiates a service when an application component depends on
it.
 Singletons – Each component dependent on a service gets a reference to the single instance
 generated by the service factory.
AngularJS internal services: AngularJS internally provides many services that we can use in our
application. $http is one example (Note: All angularjs internal services starts with $ sign). There are
other useful services such as $route, $window, $location etc.
module.controller('UserController', function($http){
//...
});
module.controller('AdminController', function($window){
//...
});

Angular Custom Services.
We can define our own custom services in angular js app and use
them wherever required.
var module = angular.module('myapp', []);
module.service('userService', function(){
this.users = ['User1', 'User2', 'User3'];
});
When declaring serviceName as an injectable argument you will be
provided with an instance of the function. In other words new
FunctionYouPassedToService(). This object instance becomes the
service object that AngularJS registers and injects later to other
services / controllers if required.

Filters & Custom Filters
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 | filter1 | filter2 | ... }}
We have in-built Filters Available as
 Number : {{ 1234 | number:2 }}
 Currency : {{ 12 | currency }}
 Date: {{ date_expression | date : format : timezone}}
 Lowercase : {{ lowercase_expression | lowercase}}
 Uppercase : {{ lowercase_expression | uppercase}}
 Filter : <tr ng-repeat="friend in friends | filter:'a'">
 OrderBy : <tr ng-repeat="friend in friends | orderBy:'-age'">
Custom Filter :
app.filter('reverse', function() { // Custom Filter Reverse
return function(input) {
var out = input.split('').reverse().join();
return out;
};
});

Tools with Angular
Karma, Jasmine, Grunt, Bower, Yeoman… What are all these tools?
Karma is Google’s JavaScript test runner and the natural choice for testing
AngularJS. In addition to allowing you to run your tests on real browsers
(including phone/tablet browsers), it is also test framework agnostic; which
means that you can use it in conjunction with any test framework of your
choice (such as Jasmine, Mocha, or QUnit, among others).
Jasmine will be our test framework of choice, at least for this post. Its syntax
is quite similar to that of RSpec, if you’ve ever worked with that. (If you
haven’t, don’t worry; we’ll check it out in greater detail later in this tutorial.)
Grunt is a task runner that helps automate several repetitive tasks, such as
minification, compilation (or build), testing, and setting up a preview of your
AngularJS application.
Bower is a package manager that helps you find and install all your
application dependencies, such as CSS frameworks, JavaScript libraries,
and so on. It runs over git, much like Rails bundler, and avoids the need to
manually download and update dependencies.
Yeoman is a toolset containing 3 core components: Grunt, Bower, and the
scaffolding tool Yo. Yo generates boilerplate code with the help of generators
(which are just scaffolding templates) and automatically configures Grunt
and Bower for your project. You can find generators for almost any
JavaScript framework (Angular, Backbone, Ember, etc.), but since we’re
focusing here on Angular, we’re going to use the generator-angular project.

References
1.Angular Org : https://docs.angularjs.org/api
2.W3School:http://www.w3schools.com/angul
ar/default.asp
3.Tuts+ :
http://code.tutsplus.com/courses/hands-on-
angular?
utm_source=Tuts+&utm_medium=website
&utm_campaign=relatedcourses&utm_cont
ent=sidebar&WT.mc_id=Tuts+_website_rel
atedcourses_sidebar

QUESTIONS?

Thank you

Angular In Depth

More Related Content

What's hot (20)

Viewers also liked (13)

Similar to Angular In Depth (20)

More from Mindfire Solutions (20)

Recently uploaded (20)

Angular In Depth