Angular In Depth

AngularIn

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.j4.Modules.5.Controllers6.Views7.Directives8.Angular Routes9.Custom Directives10. Angular Services & Custom Services Demo11. 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 directivesl 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=> Classestemplate:'<h3>My Tag HTML</h3>',

}});


Isolation in DirectivesIsolate 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 DirectivesDirective 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 FiltersA 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.

http://karma-runner.github.io/0.12/index.html

http://visionmedia.github.io/mocha/

http://qunitjs.com/

http://jasmine.github.io/2.0/introduction.html

References

1.Angular Org : https://docs.angularjs.org/api

2.W3School:http://www.w3schools.com/angular/default.asp

3.Tuts+ : http://code.tutsplus.com/courses/hands-on-angular?utm_source=Tuts+&utm_medium=website&utm_campaign=relatedcourses&utm_content=sidebar&WT.mc_id=Tuts+_website_relatedcourses_sidebar


QUESTIONS?


Thank you

Angular In Depth

Software

Transcript of Angular In Depth