It is a client side framework (not a library) entirely written in JS. Angular JS is typically used to build single-page-application.
Many JS frameworks compel us to extend from custom Javascript objects and manipulate DOM. Hence, developer requires knowledge of the complete DOM & force complex logic into JS.
Whereas angular auguments HTML to provide native mvc capabilities. Here the developer can encapsulates a portion of the page as one application instead of compelling as entire page to be an angular app. It encourages loose coupling between presentation, data and logic components.
The main difference is the IOC. When you call a method from a library, you are in control of the method. But with a framework, the control os inverted.The framework call you actually.
A library is just a collection of class definitions to increase the code-reuse. But in framework, all the control flow is already there. There is a bunch of white spots that you should fill with your own code.
1. In case of jQuery, first design a page and then make it dynamic. i.e programmatically change the view but in case of angular, start with the architecture & finally design the view.
2. In jQuery the DOM represents the model as selectors are used to find DOM elements and bind event handlers to them but in angular, a separate model layer independent of the view is present.
M stands for Model - Hols the data. It does not know about the view and controller.
V stands for View - Displays stuffs. It only knows about the model.
M stands for Controller - The logic resides in it. It knows about the view and model.
ng-app attribute is set to an element of DOM. The only components that ere impacted by Angular are the DOM elements that are declared inside the element with ng-app attribute.
Modules are logical entities that an application can be divided into.An app can contain several modules. Each module can contain code for a specific functionality. e.g. angular.module("myApp", []); It accepts two parameters.
1. Name of the module.
2. List of dependencies
The $scope is a plain javascript object. It represents an object that holds the model data to pass the view. It can be treated as a local variable for a controller.
The $rootScope is the eventual parent of all $scope objects. if the controller is nested, the $scope variables will do a lookup in prototypal manner. it is not recommended to attach a lot of logic to this global context.
1.Controllers are JS functions that are bound to a particular scope.
2.When a new controller is created on a page, Angular provides it a new $scope.
3.This $scope can be used to setup the initial state of the scope of the controller.
4. Angular permits view to call functions on the scope.
5.It allows for the logic of a single view to be contined in a single container.
myApp.controller("stateController", function($scope, $timeout){
$scope.location.state = "...";
$timeout(function(){
$scope.location.state = "Karnataka";
}, 3000);
});
The built-in $timeout service is injected into the function dynamically.
Filter provides a mechanism to format the data to be displayed to the user. Filters are invoked in HTML using the | character inside template binding {{}}.
{{location | uppercase}}
The temperature is {{25 | toFahrenheit }}.
myApp.filter("toFahrenheit", function() {
return function(input) {//it will execute for each elements.
if(input) {
// define the logic here and return result
}
}
});
A directive is a marker on a DOM element(attribute, element or CSS class) that tells AngularJS to attach a specofed behaviour to that element. It is just a function that can be run on a particular DOM element.
.directive() method provided by Angular module API can be used to register new directives.
An angular directive can be associated with the foollowing appearance.
HTML element('E') e.g.- <date-time></date-time >
attribute to an element('A') e.g. <div date-time></div>
a class('C') e.g. - <div class="date-time"></div>
These are achieved using restrict property while defining a directive.
The custom element can be removed from the generated DOM with the help of replace property with a value set to true.
Angular allows to change the the default scope of directives by passing a configuration object called DDO(Directive Definition Object). It is a javascript object used to configure the directive's behaviour.
There are 3 types of scope provided by a directive.
scope: false : In this case directive uses its parent scope.
scope: true :It defines a new scope and this new scope object is prototypically inherited from its parent scope.
scope: {} : In this case directive gets a new isolated scope and it won't be inherited from the parent scope.
There are 3 types of binding options defined as prefixes in scope property.
@ - text-binding / one way binding
= - direct model -binding / two way binding
& - behaviour-binding / methd binding
It is used to fetch the and include an external HTML fragement into the current aplication. Here the URL of the template is restricted to the same domain and protocal as the application.
$pristine : True if the form has not been changed, false if some fields have been changed.
$dirty : False if the form has not been changed, true if it has.
$valid : True if the form field(or all fields) is valid.
$invalid : False if the field (or all fields) is valid, true otherwise.
The purpose of ng-form is to group controls and not a replacement for the <form>. It is used when a form is to be nested within another. This is a requirement as name attribute of input elements can not be generated dynamically.
A service in Angular is a function or an object that is used to share data and/or behavior across controllers, directives etc. Services provide a mechanism to keep data around for the lifetime of the app. A service is lazy-?loaded (created only when necessary)
The most common method for registering a service with the Angular app is through the factory() method
The other approaches for creating services are:
service()
provider()
constant()
