Digest cycle is important part of the data binding in AngularJS, which compares the old and new version of the scope model. Digest cycle triggered automatically or manually by using $apply() function.
IIFEs or Immediately Invoked Function Expressions is a function that executes as soon as it is created. It offers a simple way to isolate the variable declaration. IIFEs contains two major functions:
1) operator()
2) expression()
ngRoute is a module developed by angularJS team which was a part of the core angularJS framework. Whereas ui-router was developed by a third-party community to overcome the problems of ngRoute.
ngRoute is a location or URL based routing, and ui-router is a state-based routing which allows nested views.
Angular initializes automatically DOMContentLoaded event or when you download angular.js script is to the browser.
After this, AngularJS find the ng-app directive that is the root of angular app compilation. When ng-app directive is found, AngularJS do the following steps:
1) load the module, which is associated with the directive,
2) Create application injector,
3) Compile the DOM from the ng-app root element. This process is known as auto bootstrapping.
AngularJS is a TypeScript language-based JS framework released in October 2010 by Google. It is a completely free framework and open source that is used in SPA projects (i.e. Single Page Application projects).
React.JS is a javascript library developed by Facebook in March 2013 for building UI. React components can be used on several pages but not as a SPA (i.e. Single Page Application).
NPM stands for Node Package Manager. It consists of a command line tool client for interacting with the repository of Node.js project.
Webpack is a module bundler for Angular2 or above. It bundles, transpiles, and minifies AngularJS application.
Factory provider is preferred using an object, whereas a service provider is preferred using with class.
Factories are functions that return the object, while services are constructor functions of the object which is used by a new keyword.
Syntax:
Factory – module.factory(`factoryName`, function);
Service – module.service(`serviceName`, function);
Yes, it is companionable with all browsers like Safari, Chrome, Mozilla, Opera, IE, etc. as well as mobile browsers.
Yes, it is possible as Nested Controllers are well-defined in a classified manner while using a view.
The syntax of Factory is as follows:
app.factory('serviceName',function(){ return serviceObj;})
Constructor: Constructor is one of the default declarations for any specific class or object, it can be called every time when any class instantiated, also ensuring initialization properly of their subclasses and different instance variable fields.
Ngonint: It is one of the first initialize methods using by Angular, mention in the first component of an angular life cycle. It mainly indicated that angular has been completed of creating entire require components properly. It is not mandatory to use but the best practice to use.
The ngzone is a wrapper for the JavaScript files and denoted by Zone.js. These are the key libraries in which the tracking of asynchronous functions. It helps in creating the context for the functions.
The working of typescript in Angular 8 is similar with the enabled and disabled flag, which means if you want to test whether the selected value is an object or not, then the following syntax is used " Typeof value = = = 'object' ". In angular 8 the following types of checks are used such as “Typeof value.ngOnDestroy = = = 'function' “.
The following are the main features of Bazel:
It is an internal build tool, through which the application can be customized.
It also tests the action and performance of multiple machines.
It constructs a graph through which you can identify useful information.
It also supports customization.runGuardsAndResolvers
BOM or Browser Object Model consists of history, object navigator, screen location, etc. It specifies the global browser objects like console, local storage, and window.
AngularJS provides full support for both the unit and end-to-end testing.
The unit testing is a method that helps the developers validate the isolated pieces of code and end-to-end testing is required when you want to ascertain the set of components integrated together work as you expect.
You can use:
$cookies.put() method to set the cookies.
$cookies.get() method to get the cookies.
$cookies.remove to remove cookies in AngularJS.
A stateful component is a detail implementation of the component that can change over time and the stateful components can have stateless components inside them, while the stateless components are a plain JavaScript function.
You only have to update the tsconfig.json and package.json files. Some minor changes may need as per the requirement of the project types.
Angular form validation and ng-pattern directive can be used to validate the email and phone number in Angular JS.
AngularJs have some directives which are used to encapsulate AngularJs application data to a disabled attribute of the HTML elements.
Example: ng-disabled directive encapsulates the application data to the disabled attributes of the HTML DOM element.
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Button
</p>
<p>
{{ mySwitch }}
</p>
</div>
Event handling in AngularJs is very useful when you want to create advance AngularJs applications.
We need to handle DOM events like mouse clicks, moves, keyboard presses, change events and so on. AngularJs has some listener directives like ng-click, ng-dbl-click, ng-mousedown, ng-keydown, ng-keyup etc.
REST is an API style that operates over the HTTP request.
The requested URL identifies the data to be operated on, and the HTTP method identifies the operation that is to be performed. REST is a style of API rather than a formal specification, and there is a lot of debate and disagreement about what is and isn’t RESTful, which is a term used to indicate an API that follows the REST style.
AngularJS is flexible about how RESTful web services are consumed.
In angular there is a scope variable called $parent (i.e. $scope.$parent). $parent is used to access parent scope from child controller in Angular JS.
Example:
<div ng-controller="ParentCtrl">
<h1>{{ name }}</h1>
<p>{{ address }}</p>
<div ng-controller="ChildCtrl">
<h1>{{ title }}</h1>
<input type="text" ng-model="$parent.address" />
</div>
Angular JS is the first version of the Angular. Angular CLI tool is used to generate Angular components. Angular JS is a client-side framework that works with JavaScript, still supported but not compatible with Angular. Angular JS is the old version and Angular is the newest version.
Ng-non-bindable specifies AngularJs to not compile the HTML element and its child nodes. For example:
<title ng-non-bindable > </title>
It allows you to specify the custom behavior on a double click event of the mouse on a web page. We can use it (ng-dblclick) as an attribute of the HTML element like,
<ANY_HTML_ELEMENT ng-dblclick="{expression}">
...
</ANY_HTML_ELEMENT>
It is used to conditionally exchange the structure of DOM on a template that is based on a scope-based expression.
This directive lets you show or hide the HTML element depending on the expression.
<element ng-switch="expression">
<element ng-switch-when="value"></element>
html5Mode method of $locationProvider module is used to enable HTML5 mode in Angular 1.x. For creating pretty URLs and removing # from URLs html5Mode need to true.
Enabling html5Mode to true in Angular 1.x.
angular.module('myApp', [])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/home.html',
controller : mainController
})
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
Orderby filter in AngularJS orders the array based on specified criteria. Following example states how you can order product by price.
<ul>
<li ng-repeat = "company in product.products | orderBy:'price">
{{ company.product + ', price:' + product.price }}
</li>
</ul>
Developers can follow the following steps to integrate AngularJS with HTML:
Step 1: including AngularJS JavaScript in html page.
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
Step 2: Point out AngularJS application.
You have to add ng-app attribute inside HTML body tag to tell what part of HTML AngularJS app has as shown in the following example:
<body ng-app = "testapp">
</body>
AngularJS was developed by Adam Abrons and Misko Hevery. Currently, it is developed by Google.
It is used to intercept Http requests from the application when any users log in to add a JWT in the Authorization header.
In Angular JS $rootscope and $scope both are an object which is used for sharing data from the controller to view.
The main difference between $rootscope and $scope is that $rootscope is available globally to across all the controllers whereas $scope is available only in controllers that have created it along with its children controllers.
AngularJS was designed to highlight the power of dependency injection, a software design pattern that places an emphasis on giving components of their dependencies instead of hardcoding them within the component. For example, if you had a controller that needed to access a list of customers, you would store the actual list of customers in a service that can be injected into the controller instead of hardcoding the list of customers into the code of the controller itself. In AngularJS you can inject values, factories, services, providers, and constants.
Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change and vice versa.
ng-bind-template: It replaces the text content of the element by interpolation of the template. It can contain multiple double curly markups.
<ANY ELEMENT ng-bind-template= " {{expression1}} {{expression2}} … {{expression n}} "> </ANY ELEMENT>
Ng-non-bindable: It specifies AngularJS to not compile the content of this HTML element and its child nodes.
<ANY ELEMENT ng-non-bindable > </ANY ELEMENT>
The following attributes can be used during creation of a new AngularJS Directives,
Restrict
The restrict attribute is how AngularJS triggers the directive inside a template. The default value of the restrict option is “Aâ€. The value of “A†causes the directives to be triggered on the attribute name. Other than “Aâ€, restrict option has “E†(only match element name), “C†(only match class name) and “M†(only match the comment name) or any combination among four options.
TemplateUrl
The templateUrl attribute tells the AngularJS HTML compiler to replace custom directive inside a template with HTML content located inside a separate file. The link-Menu (say, our custom directive name) attribute will be replaced with the content of our original menu template file.
Template
Specify an inline template as a string. Not used if you’re specifying your template as a URL.
Replace
If true, replace the current element. If false or unspecified, append this directive to the current element.
Transclude
Lets you move the original children of a directive to a location inside the new template.
Scope
Create a new scope for this directive rather than inheriting the parent scope.
Controller
Create a controller which publishes an API for communicating across directives.
Require
Require that another directive be present for this directive to function correctly.
Link
Programmatically modify resulting DOM element instances, add event listeners, and set up data binding.
Compile
Programmatically modify the DOM template for features across copies of a directive, as when used in other directives. Your compile function can also return link functions to modify the resulting element instances.
Each angular application consists of one root scope but may have several child scopes. As child controllers and some directives create new child scopes, an application can have multiple scopes. When new scopes are formed or created, they are added as a children of their parent scope. They also create a hierarchical structure similar to DOM.
It is a web application that loads a single HTML page and dynamically updates the page as the user connects with the app.
By using AJAX and HTML a fluid and responsive web app can be created by SPA without invariant page reloads. Through this, we can make responsive UI with no page flicker.
To show one-time binding we have to use “::†in front of the scope.
Manipulation of DOM is in directives and apart from this it should not exist in the controller’s services or anywhere else.
DI or Dependency Injection is a software design pattern that deals with how code gets hold of its dependencies. In order to retrieve elements of the application which is required to be configured when the module gets loaded, the operation "config" uses dependency injection.
These are the ways that object uses to hold of its dependencies
1. Typically using the new operator, dependency can be created
2. By referring to a global variable, dependency can be looked up
3. Dependency can be passed into where it is required
a) To observer model mutations scopes provide APIs ($watch)
b) To propagate any model changes through the system into the view from outside of the Angular realm
c) A scope inherits properties from its parent scope, while providing access to shared model properties, scopes can be nested to isolate application components
d) Scope provides context against which expressions are evaluated
In One-Way data binding, view (UI part) not updates automatically when data model changed. We need to write custom code to make it updated every time.
ng-bind has one-way data binding.
While in two way binding scope variable will change it’s value every time its data model changed is assigned to a different value.
You can isolate a directive’s Scope by passing an object to the scope option of directive.
This tells the directive to keep scope inside of itself and not to inherit or share with other scopes.
CanActivate is the feature in Angular Interface that is focused on the security. It helps the user to login for any application during the routing of a page.
It is well known method that is used for loading the JavaScript components asynchronously while a particular routing feature is activated.