Dear All,
Please find the below notes topicwise:
ANIMATIONS
AngularJS 1.3 provides animation hooks for common directives such as ngRepeat, ngSwitch, and ngView, as well as custom directives via the $animate service. These animation hooks are set in place to trigger animations during the life cycle of various directives and when triggered, will attempt to perform a CSS Transition, CSS Keyframe Animation or a JavaScript callback Animation (depending on if an animation is placed on the given directive). Animations can be placed using vanilla CSS by following the naming conventions set in place by AngularJS or with JavaScript code when it's defined as a factory.
Animations are not available unless you include the ngAnimate module as a dependency within your application.
How they work
Animations in AngularJS are completely based on CSS classes. As long as you have a CSS class attached to a HTML element within your website, you can apply animations to it.
Which directives support animations?
A handful of common AngularJS directives support and trigger animation hooks whenever any major event occurs during its life cycle. The table below explains in detail which animation events are triggered
| DirectiveSupported Animations |
|---|
| ngRepeat | enter, leave, and move |
| ngView | enter and leave |
| ngInclude | enter and leave |
| ngSwitch | enter and leave |
| ngIf | enter and leave |
| ngClass | add and remove |
| ngShow & ngHide | add and remove
(the ng-hide class value) |
DIRECTIVES
What are Directives?
At a high level, directives are markers on a DOM element (such as an attribute, element name, comment 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.
For AngularJS, "compilation" means attaching event listeners to the HTML to make it interactive.
Directive types
---------------
$compile can match directives based on element names, attributes, class names, as well as comments.
All of the Angular-provided directives match attribute name, tag name, comments, or class name. We can define a directive as attribute/tag name/class name like fallows:
<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>
NOTE: Prefer using directives via tag name and attributes over comment and class names. Doing so generally makes it easier to determine what directives a given element matches.
Creating Directives
-------------------
Much like controllers, directives are registered on modules. To register a directive, WE use the module.directive API.
module.directive takes the normalized directive name followed by a factory function. This factory function should return an object with the different options to tell $compile how the directive should behave when matched.
The factory function is invoked only once when the compiler matches the directive for the first time. You can perform any initialization work here. The function is invoked using $injector.invoke which makes it injectable just like a controller.
PROPERTIES
----------
Restrict
--------
This simply restricts the way WE can define a directive. As we can restrict it as:
E: elements
A: attributes
C: class names (CSS)
M: comments
Template
--------
This basically replaces the existing contents of an element.
TemplateUrl
-----------
If we keep adding more and more details to above card, maintaining the template markups within the directive’s definition will become complicated and unmanageable. So, its better to keep our template in a separate html file and reference its location in templateUrl. As the template loading is asynchronous in this case, so the compilation/linking will be delayed until the template is fully loaded, and will be cached in $templateCache for later use.
priority
--------
This option tells angular to sort directives by priority so a directive having higher priority will be compiled/linked before others.
Transclude
----------
This option tells angular to get ready for transclusion by providing transclude linking function available in a compile function of a directive.
Scope
-------
Setting scope will only create/maintain the hierarchy between the scope of an element and its parent scope but you can still access data bound to parents’ scopes.
scope: false
(DEFAULT)
scope: true
(Creates a new scope but prototypically inherits from the parent scope)
scope: isolate
(Creates an isolated scope which does not prototypically inherit from the parent scope but you can access parent scope using scope.$parent)
Require
-------
This lets US pass a controller associated with another directive into a compile/linking function. You have to specify the name of the directive to be required – It should be bound to same element or its parent.
Controller
----------
This can be treated as a control room for a directive. You can either bind properties/methods to available $scope or this keyword. The data bound to this will be accessible in other directives by injecting the controller using require option.
Compile
-------
A compile function produces a link function. This is the place where we can do the DOM manipulation mostly. This takes 2 arguments by default:
tElement – A template element the directive has been declared on.
tAttrs – A list of attributes associated with the tElement.
Link
----
Its job is to bind a scope with a DOM resulted in a 2-way data binding. We have access to scope here unlike compile function so that we can create custom listeners using $watch method. As expected it takes 3 arguments:
scope – A scope to be used by the directive.
element – An element the directive is bound to.
attrs – A list of attributes associated with the element.
CUSTOM SERVICE'S
AngularJS supports the concept of Separation of Concerns using services architecture. Services are JavaScript functions, which are responsible to perform only specific tasks. This makes them individual entities which are maintainable and testable. The controllers and filters can call them on requirement basis. Services are normally injected using dependency injection mechanism of AngularJS.
AngularJS provides many inbuilt services. For example, $http, $route etc. Each service is responsible for a specific task such as the $http is used to make ajax call to get the server data, the $route is used to define the routing information, and so on. The inbuilt services are always prefixed with $ symbol.
Angular provides us with three ways to create and register our own service.
1) Factory
2) Service
3) Provider
Using Factory Method
When we’re using a Factory we create an object, add properties to it, then return that same object. When you pass this service into your controller, those properties on the object will now be available in that controller through your factory.
var myApp = angular.module("myApp", []);
myApp.factory('MathFactory', function() {
return{
multiply: function(a, b) {
return a * b
}
};
});
Using Service Method
When you’re using Service, it’s instantiated with the ‘new’ keyword. Because of that, you’ll add properties to ‘this’ and the service will return ‘this’. When you pass the service into your controller, those properties on ‘this’ will now be available on that controller through your service.
myApp.service('CalcService', function(){
this.calc = function(a, b) {
return a * b;
}
});
USING PROVIDER METHOD
Providers are the only service you can pass into your .config() function. Use a provider when you want to provide module-wide configuration for your service object before making it available.
myApp.provider('SqareProvider', function() {
this.a = 0;
this.$get = function() {
var a = this.a;
return {
sqare: function() {
return a * a;
}
}
};
this.setValue = function(a) {
this.a = a;
};
});
What to choose?
As usual, it depends. The factory has the Revealing Module pattern which gives the possibility to hide private variables. This can be very useful. However if you don’t have them and the injection of the service isn’t a problem for you, the service can be useful for you as well. The provider is the last in line to use. In most cases you won’t use this one. Use this only when you need the config part. This can be very handy when developing services that were shared of applications.
ANGULAR JS UNIT TESTING
JavaScript is a dynamically typed language which comes with great power of expression, but it also comes with almost no help from the compiler. For this reason ANGULAR feel's very strongly that any code written in JavaScript needs to come with a strong set of tests. Angular have built many features which makes testing your Angular applications easy. So there is no excuse for not testing.
Unit testing, as the name implies, is about testing individual units of code. Unit tests try to answer questions such as "Did I think about the logic correctly?" or "Does the sort function order the list in the right order?"
In order to answer such a question it is very important that we can isolate the unit of code under test. That is because when we are testing the sort function we don't want to be forced into creating related pieces such as the DOM elements, or making any XHR calls to fetch the data to sort.
For testing Angular applications there are certain tools that you should use that will make testing much easier to set up and run.
Karma
Karma is a JavaScript command line tool that can be used to spawn a web server which loads your application's source code and executes your tests.
Jasmine
Jasmine is a behavior driven development framework for JavaScript that has become the most popular choice for testing Angular applications. Jasmine provides functions to help with structuring your tests and also making assertions. As your tests grow, keeping them well structured and documented is vital, and Jasmine helps achieve this.
In Jasmine we use the describe function to group our tests together:
describe("sorting the list of users", function() {
// individual tests go here
});
And then each individual test is defined within a call to the it function:
it('sorts in descending order by default', function() {
// your test assertion goes here
});
angular-mocks
Angular also provides the ngMock module, which provides mocking for your tests. This is used to inject and mock Angular services within unit tests. In addition, it is able to extend other modules so they are synchronous. Having tests synchronous keeps them much cleaner and easier to work with. One of the most useful parts of ngMock is $httpBackend, which lets us mock XHR requests in tests, and return sample data instead. Please fallow below link to check installation procedure of karma test runner.
