Ans: AngularJS is a javascript framework used for creating single web page applications. It allows you to use HTML as your template language and enables you to extend HTML’s syntax to express your application’s components clearly
Ans: The key features of AngularJS are
Ans: Scope refers to the application model, it acts like glue between application controller and the view. Scopes are arranged in hierarchical structure and impersonate the DOM ( Document Object Model) structure of the application. It can watch expressions and propagate events.
Ans: In AngularJS services are the singleton objects or functions that are used for carrying out specific tasks. It holds some business logic and these function can be called as controllers, directive, filters and so on.
Ans: Like JavaScript, Angular expressions are code snippets that are usually placed in binding such as
The key difference between the JavaScript expressions and Angular expressions
Ans: You can initialize a select box with options on page load by using ng-init directive
Ans: A directive is something that introduces new syntax, they are like markers on DOM element which attaches a special behavior to it. In any AngularJS application, directives are the most important components.
Some of the commonly used directives are ng-model, ng-App, ng-bind, ng-repeat , ng-show etc.
Ans: AngularJS has several advantages in web development.
Ans: Angular js routes enable you to create different URLs for different content in your application. Different URLs for different content enables user to bookmark URLs to specific content. Each such bookmarkable URL in AngularJS is called a route
A value in Angular JS is a simple object. It can be a number, string or JavaScript object. Values are typically used as configuration injected into factories, services or controllers. A value should be belong to an AngularJS module.
Injecting a value into an AngularJS controller function is done by adding a parameter with the same name as the value
Ans: Automatic synchronization of data between the model and view components is referred as data binding in AngularJS. There are three ways for data binding
Ans: AngularJS was designed to highlight the power of dependency injection, a software design pattern that places an emphasis on giving components their dependencies instead of hard coding 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
Ans: Compilation of HTML process occurs in following ways
Different types of directives are
Ans: Link combines the directives with a scope and produce a live view. For registering DOM listeners as well as updating the DOM, link function is responsible. After the template is cloned it is executed.
Ans: An injector is a service locator. It is used to retrieve object instances as defined by provider, instantiate types, invoke methods and load modules. There is a single injector per Angular application, it helps to look up an object instance by its name.
Ans: For creating the directive, factory method is used. It is invoked only once, when compiler matches the directive for the first time. By using $injector.invoke the factory method is invoked.
Ans: ngModel adds these CSS classes to allow styling of form as well as control
Ans: 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 module gets loaded , the operation “config” uses dependency injection.
These are the ways that object uses to hold of its dependencies
Ans: Advantages of using Angular.js as framework are
Ans: Each angular application consist of one root scope but may have several child scopes. As child controllers and some directives create new child scopes, application can have multiple scopes. When new scopes are formed or created they are added as a children of their parent scope. Similar to DOM, they also creates a hierarchical structure.
Ans: AngularJS combines the functionalities of most of the 3rd party libraries, it supports individual functionalities required to develop HTML5 Apps. While Backbone.js do their jobs individually.
Ans: Data binding is the connection bridge between view and business logic (view model) of the application. Data binding in AngularJs is the automatic synchronization between the model and view. When the model changes, the view is automatically updated and vice versa. AngularJs support one-way binding as well as two-way binding.
AngularJS provides the following data binding directives:
1) <ng-bind>- It updates the text content of the specified HTML element with the value of the given expression. This text content gets updated when there is any change in the expression. It is very similar to double curly markup ( ) but less verbose.
It has the following Syntax.
| <ANY ELEMENT ng-bind="expression"> </ANY ELEMENT> |
2) <ng-bind-html>- It evaluates the expression and inserts the HTML content into the element in a secure way. To use this functionality, it has to use $sanitize service. For this, it is mandatory that $sanitize is available.
It has the following Syntax.
| <ANY ELEMENT ng-bind-html=" expression "> </ANY ELEMENT> |
3) <ng-bind-template>- It replaces the element text content with the interpolation of the template. It can contain multiple double curly markups.
It has the following Syntax.
| <ANY ELEMENT ng-bind-template=" … "> </ANY ELEMENT> |
4) <ng-non-bindable>- This directive informs AngularJS, not to compile or bind the contents of the current DOM element. It is useful in the case when the user wants to display the expression only and do not want to execute it.
It has the following Syntax.
| <ANY ELEMENT ng-non-bindable > </ANY ELEMENT> |
5) <ng-model>- This directive can be bound with input, select, text area or any custom form control. It provides two-way data binding. It also provides validation behavior. It also retains the state of the control (like valid/invalid, touched/untouched and so on).
It has the following Syntax.
| <input ng-bind="expression"/> |
Ans: The directives used to show and hide HTML elements in the AngularJS are <ng-show> and <ng-hide>. They do this based on the result of an expression.
Its syntax is as follows.
| <element ng-show="expression"></element> |
When the expression for <ng-show> evaluates to true, then HTML element(s) are shown on the page, otherwise the HTML element is hidden. Similarly, <ng-hide> directive hides the HTML element if the expression evaluates to true.
Let’s take the following example.
|
|
<div ng-controller="MyCtrl">
<div ng-show="data.isShow">ng-show Visible</div> <div ng-hide="data.isHide">ng-hide Invisible</div> </div> <script> var app = angular.module("app", []); app.controller("MyCtrl", function ($scope) { $scope.data = {}; $scope.data.isShow = true; $scope.data.isHide = true; }); </script> |
Ans: <Ng-If>.
This directive can add/remove HTML elements from the DOM based on an expression. If the expression is true, it adds a copy of HTML elements to the DOM. If the expression evaluates to false, this directive removes the HTML element from the DOM.
| <div ng-controller="MyCtrl">
<div ng-if="data.isVisible">ng-if Visible</div> </div> <script> var app = angular.module("app", []); app.controller("MyCtrl", function ($scope) { $scope.data = {}; $scope.data.isVisible = true; }); </script> |
This directive can add/remove HTML elements from the DOM conditionally based on scope expression.
Child elements with the <ng-switch-when> directive will be displayed if it gets a match, else the element and its children get removed. It also allows defining a default section, by using the <ng-switch-default> directive. It displays a section if none of the other sections match.
Let’s see the following example that displays the syntax for <ng-switch>.
| <div ng-controller="MyCtrl">
<div ng-switch on="data.case"> <div ng-switch-when="1">Shown when case is 1</div> <div ng-switch-when="2">Shown when case is 2</div> <div ng-switch-default>Shown when case is anything else than 1 and 2</div> </div> </div> <script> var app = angular.module("app", []); app.controller("MyCtrl", function ($scope) { $scope.data = {}; $scope.data.case = true; }); </script> |
This directive is used to iterate over a collection of items and generate HTML from it.
| <div ng-controller="MyCtrl">
<ul> <li ng-repeat="name in names"> Angularjs Interview Questions </li> </ul> </div> <script> var app = angular.module("app", []); app.controller("MyCtrl", function ($scope) { $scope.names = [ 'Mahesh', 'Raj', 'Diksha' ]; }); </script> |
Ans: The <ng-repeat> directive has a set of special variables that are useful while iterating the collection.
These variables are as follows.
The “$index” contains the index of the element being iterated. The variables $first, $middle and $last returns a boolean value depending on whether the current item is the first, middle or last element in the collection being iterated.
| <html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <head> <script> var app = angular.module("app", []); app.controller("ctrl", function ($scope) { $scope.employees = [ { name: 'A', gender: 'alphabet' }, { name: 'B', gender: 'number' }, { name: 'C', gender: 'alphanumeric' }, { name: 'D', gender: 'special character' }]; }); </script> </head> <body ng-app="app"> <div ng-controller="ctrl"> <ul> <li ng-repeat="employee in employees"> <div> is a . <span ng-if="$first"> <strong>(first element found)</strong> </span> <span ng-if="$middle"> <strong>(middle element found)</strong> </span> <span ng-if="$last"> <strong>(last element found)</strong> </span> </div> </li> </ul> </div> </body> </html> |
The output is as follows.
| 1
2 3 4 |
A is a alphabet. (first element found)
B is a number. (middle element found) C is a alphanumeric. (middle element found) D is a special character. (last element found) |
Ans: A factory is a simple function which allows you to add some logic before creating the object. In the end, it returns the created object.
| 1 | app.factory('serviceName',function(){ return serviceObj;}) |
| <script>
//creating module var app = angular.module('app', []); //define a factory using factory() function app.factory('MyFactory', function () { var serviceObj = {}; serviceObj.function1 = function () { //TO DO: }; serviceObj.function2 = function () { //TO DO: }; return serviceObj; }); </script> |
Ans: During the compilation process, AngularJS compiler matches text and attributes using interpolate service to see if it contains embedded expressions.
During normal, digest life cycle, these expressions are updated and registered as watches.
Ans: Understanding the life cycle of an AngularJS application makes it easier to learn about the way to design and implement the code. Apps life cycle consists of following three phases- bootstrap, compilation, and runtime.
These three phases of the life cycle occur each time a web page of an AngularJS application gets loaded in the browser. Let’s learn about each of the three phases in detail:
This shows that AngularJS behaves differently from traditional methods of binding data. The traditional methods combine a template with data, received from the engine and then manipulate the DOM each time there is any change in the data.
However, AngularJS compiles the DOM only once and then links the compiled template as necessary, making it much more efficient than the traditional methods.
Ans: After the angular app gets loaded into the browser, scope data passes through different stages called as its life cycle. Learning about this cycle helps us to understand the interaction between scope and other AngularJS components.
The scope data traverses through the following phases.
Ans: AngularJS initializes automatically upon the “DOMContentLoaded” event or when the browser downloads the angular.js script and at the same time document.readyState is set to ‘complete’. At this point, AngularJS looks for the ng-app directive which is the root of Angular app compilation process.
If the ng-app directive is located, then AngularJS will do the following.
This process is auto-bootstrapping.
Following is the sample code that helps to understand it more clearly:
| <html>
<body ng-app="myApp"> <div ng-controller="Ctrl">Hello !</div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <script> var app = angular.module('myApp', []); app.controller('Ctrl', function($scope) { $scope.msg = 'Welcome'; }); </script> </body> </html> |
Ans: Sometimes we may need to manually initialize Angular app in order to have more control over the initialization process. We can do that by using angular.bootstrap() function within angular.element(document).ready() function. AngularJS fires this function when the DOM is ready for manipulation.
The angular.bootstrap() function takes two parameters, the document, and module name injector.
Following is the sample code that helps to understand the concept more clearly.
| <html>
<body> <div ng-controller="Ctrl">Hello !</div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <script> var app = angular.module('myApp', []); app.controller('Ctrl', function($scope) { $scope.msg = 'Welcome'; }); //manual bootstrap process angular.element(document).ready(function () { angular.bootstrap(document, ['myApp']); }); </script> </body> </html> |
Ans: Bootstrap for multiple modules can be achieved by using following two methods.
Let’s take an example, suppose we have two modules: module1 and model2. To initialize the app automatically, based on these two modules following code is used:
| <html>
<head> <title>Multiple modules bootstrap</title> <script src="lib/angular.js"></script> <script> //module1 var app1 = angular.module("module1", []); app1.controller("Controller1", function ($scope) { $scope.name = "Welcome"; });
//module2 var app2 = angular.module("module2", []); app2.controller("Controller2", function ($scope) { $scope.name = "World"; });
//module3 dependent on module1 & module2 angular.module("app", ["module1", "module2"]); </script> </head> <body> <!--angularjs autobootstap process--> <div ng-app="app"> <h1>Multiple modules bootstrap</h1> <div ng-controller="Controller2"> </div> <div ng-controller="Controller1"> </div> </div> </body> </html> |
The above example can be rewritten for a manual bootstrap process as given below.
| <html>
<head> <title>Multiple modules bootstrap</title> <script src="lib/angular.js"></script> <script> //module1 var app1 = angular.module("module1", []); app1.controller("Controller1", function ($scope) { $scope.name = "Welcome"; });
//module2 var app2 = angular.module("module2", []); app2.controller("Controller2", function ($scope) { $scope.name = "World"; });
//manual bootstrap process angular.element(document).ready(function () { var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2');
//bootstrap div1 for module1 and module2 angular.bootstrap(div1, ['module1', 'module2']);
//bootstrap div2 only for module1 angular.bootstrap(div2, ['module1']); }); |
Ans:
AngularJS uses the compile function to change the original DOM before creating its instance and before the creation of scope.
Before discussing the Pre-Link and the Post-Link functions let’s see the Link function in detail.
Following is the Link syntax.
| link: function LinkFn(scope, element, attr, ctrl){} |
where each of the four parameters is as follows.
AngularJS allows setting the link property to an object also. The advantage of having an object is that we can split the link function into two separate methods called, pre-link and post-link.
It is good to use the pre-link function to implement the logic that runs when AngularJS has already compiled the child elements. Also, before any of the child element’s post-link functions have been called.
Let’s see an example that talks about Compile, Pre-Link, and Post-Link functions.
| <html>
<head> <title>Compile vs Link</title> <script src="lib/angular.js"></script> <script type="text/javascript"> var app = angular.module('app', []); function createDirective(name) { return function(){ return { restrict: 'E', compile: function(tElem, tAttrs){ console.log(name + ': compile'); return { pre: function(scope, iElem, iAttrs){ console.log(name + ': pre link'); }, post: function(scope, iElem, iAttrs){ console.log(name + ': post link'); } } } } } }
app.directive('levelOne', createDirective('levelOne')); app.directive('levelTwo', createDirective('levelTwo')); app.directive('levelThree', createDirective('levelThree')); </script> </head> <body ng-app="app"> <level-one> <level-two> <level-three> Hello Angularjs Interview Questions </level-three> </level-two> </level-one> </body> </html> |
||
| Output:
Hello |
||
Ans: A Controller is a set of JavaScript functions which is bound to a specified scope, the ng-controller directive. Angular creates a new instance of the Controller object to inject the new scope as a dependency. The role of the Controller is to expose data to our view via $scope and add functions to it, which contains business logic to enhance view behavior.
Declaring a Controller using ng-Controller directive.
| <div ng-app="mainApp" ng-controller="SampleController">
</div> |
Following code displays the definition of SampleController.
| <script>
function SampleController($scope) { $scope.sample = { firstSample: "INITIAL", lastSample: "Initial",
fullName: function() { var sampleObject; sampleObject = $scope.sample; return sampleObject.firstSample + " " + sampleObject.lastSample; } }; } </script> |
Ans: Services are functions that are bound to perform specific tasks in an application.
Two main execution characteristics of angular services are that they are Singleton and lazy instantiated.
It means that AngularJS instantiates a service only when a component of an application needs it. This is done by using dependency injection method, that makes the Angular codes, robust and less error prone.
Each application component dependent on the service, work with the single instance of the service created by the AngularJS.
Let us take an example of a very simple service that calculates the square of a given number:
| var CalculationService = angular.module('CalculationService', [])
.service('Calculation', function () { this.square = function (a) { return a*a}; }); |
AngularJS provides many built-in services. Each of them is responsible for a specific task. Built-in services are always prefixed with the $ symbol.
Some of the commonly used services in any AngularJS application are as follows:
Ans: There are 5 different ways to create services in AngularJS.
Let’s discuss, each of the above AngularJS service types one by one with code example:
It is the simplest service type supported by AngularJS that we can create and use. It is similar to a key-value pair or like a variable having a value. It can store only a single value. Let’s take an example and create a service that displays username:
| var app=angular.module("app",[]);
app.value("username","Madhav"); |
Code to use “Value”:
We can use this service anywhere by using dependency injection. Following example injects the service in a controller:
| app.controller("MainController",function($scope, username){
$scope.username=username; }); |
In the above example, we have created a Value service “username” and used it in MainController.
Value service may be very easy to write but, it lacks many important features. So, the next service type we will look at is “Factory” service. After its creation, we can even inject other services into it. Unlike Value service, we cannot add any dependency in it.
Let’s take an example to create a Factory service.
| app.factory("username",function(){
var name="John"; return { name:name } }); |
The above code shows that Factory service takes “function” as an argument. We can inject any number of dependencies or methods in this “function” as required by this service. This function must return some object. In our example, it returns an object with the property name. Now, let us look, as to how we can use this service:
Code to use “Factory”:
The function returns an object from service which has a property name so we can access it and use it anywhere. Let’s see how we can use it in the controller:
| app.controller("MainController",function($scope, username){
$scope.username=username.name; }); |
We are assigning the username from factory service to our scope username.
It works same as the “Factory” service. But, instead of a function, it receives a Javascript class or a constructor function as an argument. Let’s take an example. Suppose we have a function:
| 1
2 3 |
function MyExample(num){
this.variable="value"; } |
Now, we want to convert the function into a service. Let’s take a look at how we can do this with “Factory” method:
| app.factory("MyExampleService",["num" ,function(num){
return new MyExample(num); }]); |
Thus in this way, we will create its new instance and return it. Also, we have injected <num> as a dependency in Factory service. Now, let’s see how we can do this using Service type:
| 1 | app.service("MyExampleService",["num", MyExample]); |
Thus, we have called the service method on the module and provided its name, dependency, and the name of the function in an array.
It is the parent of all the service types supported by AngularJS, except the “Constant” that we will discuss in the next section. It is the core of all the service types. Thus we can say that other services work on top of it. It allows us to create a configurable service that must implement the <$get> method.
We use this service to expose the API that is responsible for doing the application-wide configuration. The configuration should complete before starting the application.
Let’s take an example.
| app.provider('authentication', function() {
var username = "John"; return { set: function(newUserName) { username = newUserName; }, $get: function() { function getUserName() { return username; } return { getUserName: getUserName }; } }; }); |
This example initializes a provider with its name as “authentication”. It also implements a <$get> function, which returns a method “getUsername” which in turn returns the private variable called username. This also has a setter, using it we can set the username on application startup as follows:
| app.config(["authenticationProvider", function(authenticationProvider) {
authenticationProvider.set("Mihir"); }]); |
As the name suggests, this service helps us to declare constants in our application. We can then use them wherever needed, just by adding it as a dependency. There are many places, where we use constants like some base URLs, application name, etc.
We just define them once and use them anywhere as per our need. Thus, this technique allows us to write the definition at one place. If there is any change in the value later, we have to do the modifications at one place only.
Here is an example of how we can create constants:
| app.constant('applicationName', 'Service Tutorials'); |
Ans: In AngularJS $scope object is having different functions like $watch(), $digest() and $apply() and we will call these functions as central functions. The AngularJS central functions $watch(), $digest(), and $apply() are used to bind data to variables in view and observe changes happening in variables.
The use of this function is to observe changes in a variable on the $scope. It triggers a function call when the value of that variable changes. It accepts three parameters: expression, listener, and equality object. Here, listener and equality objects are optional parameters.
| 1 | $watch(watchExpression, listener, [objectEquality]). |
Following is the example of using $watch() function in AngularJS applications.
| <html>
<head> <title>AngularJS Watch</title> <script src="lib/angular.js"></script> <script> var myapp = angular.module("myapp", []); var myController = myapp.controller("myController", function ($scope) { $scope.name = 'dotnet-tricks.com'; $scope.counter = 0; //watching change in name value $scope.$watch('name', function (newValue, oldValue) { $scope.counter = $scope.counter + 1; }); }); </script> </head> <body ng-app="myapp" ng-controller="myController"> <input type="text" ng-model="name" /> <br /><br /> Counter: </body> </html> |
This function iterates through all the watch list items in the $scope object, and its child objects (if it has any). When $digest() iterates over the watches, it checks if the value of the expression has changed or not. If the value has changed, AngularJS calls the listener with the new value and the old value.
The $digest() function is called whenever AngularJS thinks it is necessary. For example, after a button click, or after an AJAX call. You may have some cases where AngularJS does not call the $digest() function for you. In that case, you have to call it yourself.
Following is the example of using $digest() function in AngularJS applications:
| <html>
<head> <title>AngularJS Digest Example</title> <script src="lib/jquery-1.11.1.js"></script> <script src="lib/angular.js"></script> </head> <body ng-app="app"> <div ng-controller="Ctrl"> <button class="digest">Digest my scope!</button> <br /> <h2>obj value : </h2> </div> <script> var app = angular.module('app', []); app.controller('Ctrl', function ($scope) { $scope.obj = { value: 1 }; $('.digest').click(function () { console.log("digest clicked!"); console.log($scope.obj.value++); //update value $scope.$digest(); }); }); </script> </body> </html> |
AngularJS automatically updates the model changes which are inside AngularJS context. When you apply changes to any model, that lies outside of the Angular context (like browser DOM events, setTimeout, XHR or third party libraries), then you need to inform the Angular about the changes by calling $apply() manually. When the $apply() function call finishes, AngularJS calls $digest() internally, to update all data bindings.
Following are the key differences between $apply() and $digest().
Following is the example of using the $apply() function in AngularJS applications.
| <html>
<head> <title>AngularJS Apply Example</title> <script src="lib/angular.js"></script> <script> var myapp = angular.module("myapp", []); var myController = myapp.controller("myController", function ($scope) { $scope.datetime = new Date(); $scope.updateTime = function () { $scope.datetime = new Date(); } //outside angular context document.getElementById("updateTimeButton").addEventListener('click', function () { //update the value $scope.$apply(function () { console.log("update time clicked"); $scope.datetime = new Date(); console.log($scope.datetime); }); }); }); </script> </head> <body ng-app="myapp" ng-controller="myController"> <button ng-click="updateTime()">Update time - ng-click</button> <button id="updateTimeButton">Update time</button> <br />
</body> </html> |
Ans: When an error occurs in one of the watchers, $digest() cannot handle them via $exceptionHandler service. In that case, you have to handle the exception yourself. However, $apply() uses try catch block internally to handle errors. But, if an error occurs in one of the watchers, then it transfers the errors to $exceptionHandler service.
Code for $apply() function.
| $apply(expr) {
try { return $eval(expr); } catch (e) { $exceptionHandler(e); } finally { $root.$digest(); } } |
Ans: A) $Watch.
Its use is to observe the changes in the variable on the $scope. It accepts three arguments – expression, listener, and equality object. The listener and Equality object are optional parameters.
| $watch(watchExpression, listener, [objectEquality]) |
Here, <watchExpression> is the expression to be observed in the scope. This expression gets called on every $digest() and returns a value for the listener to monitor.
The listener defines a function which gets called when watchExpression changes its value. In case, its value does not change then the listener will not be called. The objectEquality is a boolean type to compare the objects for equality using angular.equals.
| scope.name = 'shailendra';
scope.counter = 0; scope.$watch('name', function (newVal, oldVal) { scope.counter = scope.counter + 1; }); |
This function was introduced in Angular1.3. It works in the same way as $watch() function except that the first parameter is an array of expressions.
| 1 | $watchGroup(watchExpression, listener) |
The listener is also an array containing the new and old values of the variables that are being watched. The listener gets called whenever any expression contained in the watchExpressions array changes.
| $scope.teamScore = 0;
$scope.time = 0; $scope.$watchGroup(['teamScore', 'time'], function(newVal, oldVal) { if(newVal[0] > 20){ $scope.matchStatus = 'win'; } else if (newVal[1] > 60){ $scope.matchStatus = 'times up'; }); |
This use of this function is to watch the properties of an object. It gets fired when there is any change in the properties. It takes an object as the first parameter and watches the properties of the object.
Javascript
| $watchCollection(obj, listener) |
The listener is called whenever there is any change in the obj.
Javascript
| $scope.names = ['shailendra', 'deepak', 'mohit', 'kapil'];
$scope.dataCount = 4; $scope.$watchCollection('names', function (newVal, oldVal) { $scope.dataCount = newVal.length; }); |
Ans: AngularJS allows form validation on the client-side in a simplistic way. First of all, it monitors the state of the form and its input fields. Secondly, it observes any change in the values and notifies the same to the user.
Let’s discuss the different input field validations along with examples.
By using “Required Field” validation we can prevent, form submission with a null value. It’s mandatory for the user to fill the form fields.
The syntax for required field validation is as follows.
Javascript
| <input type="text" required /> |
Example Code.
Javascript
| <form name="myForm">
<input name="myInput" ng-model="myInput" required> </form> <p>The input's valid state is:</p> <h1></h1> |
To prevent the user from providing less or excess number of characters in the input field, we use Minimum & Maximum length validation. The AngularJS directive used for Minimum & Maximum length validations are <ng-minlength> and <ng-maxlength>. Both of these attributes take integer values. The <ng-minlength> attribute is used to set the number of characters a user is limited to, whereas the <ng-maxlength> attribute sets the maximum numbers of characters that a user is allowed to enter.
It has the following syntax.
Javascript
| <input type="text" ng-minlength=5 />
<input type="text" ng-maxlength=10 /> |
Example code:
Javascript
| <label>User Message:</label>
<textarea type="text" name="userMessage" ng-model="message" ng-minlength="100" ng-maxlength="1000" required> </textarea> <div ng-messages="exampleForm.userMessage.$error"> <div ng-message="required">This field is required</div> <div ng-message="minlength">Message must be over 100 characters</div> <div ng-message="maxlength">Message must not exceed 1000 characters</div> </div> |
AngularJS provides a <ng-pattern> directive to ensure that input fields match the regular expressions that are passed into the attribute.
It has the following syntax.
Javascript
| <input type="text" ng-pattern="[a-zA-Z]" /> |
To activate the error message in <ng-pattern> we pass the value of pattern into ng-message.
Example code.
Javascript
| <label>Phone Number:</label>
<input type="email" name="userPhoneNumber" ng-model="phoneNumber" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/> <div ng-messages="exampleForm.userPhoneNumber.$error"> <div ng-message="required">This field is required</div> <div ng-message="pattern">Must be a valid 10 digit phone number</div> </div> |
In order to validate an email id, AngularJS provides ng-model directive. Using the following syntax we can validate an email id from any input field.
Javascript
| <input type="email" name="email" ng-model="user.email" /> |
Example code.
Javascript
| <label>Email Address:</label>
<input type="email" name="userEmail" ng-model="email" required /> <div ng-messages="exampleForm.userEmail.$error"> <div ng-message="required">This field is required</div> <div ng-message="email">Your email address is invalid</div> </div> |
To validate an input against Number we can use ng-model directive from AngularJS.
Its syntax is as follows.
Javascript
| <input type="number" name="personage" ng-model="user.age" /> |
To validate an input field for URL, we can use the following syntax.
| <input type="url" name="weblink" ng-model="user.facebook_url" /> |
Example Code.
Javascript
| <div ng-app="urlInputExample">
<form name="myForm" ng-controller="UrlController"> <label for="exampleInput">Enter Email</label> <input type="url" name="input" ng-model="example.url" required /> <p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;" ng-if='!myForm.input.$valid'>Enter Valid URL</p> </form> </div> |
Ans: There are a no. of ways in Angular to share data among modules. A few of them are as follows.
Ans: Using a service is the best practice in Angular to share data between controllers. Here is a step by step example to demonstrate data transfer.
We can prepare the data service provider in the following manner.
Javascript
| app.service('dataService', function() {
var dataSet = [];
var addData = function(newData) { dataSet.push(newData); };
var getData = function(){ return dataSet; };
return { addData: addData, getData: getData }; }); |
Now, we’ll inject the service dependency into the controllers.
Say, we have two controllers – pushController and popController.
The first one will add data by using the data service provider’s addData method. And the latter will fetch this data using the service provider’s getData method.
Javascript
| app.controller('pushController', function($scope, dataService) {
$scope.callToAddToProductList = function(currObj){ dataService.addData(currObj); }; });
app.controller('popController', function($scope, dataService) { $scope.dataSet = dataService.getData(); }); |
Ans: We can call the $broadcast method using the $rootScope object and send any data we want.
Javascript
| $scope.sendData = function() {
$rootScope.$broadcast('send-data-event', data); } |
To receive data, we can use the $scope object inside a controller.
Javascript
| $scope.$on('send-data-event', function(event, data) {
// process the data. }); |
Ans: By using the $location service from the Controller function, we can traverse across multiple views. Here is an example to explain.
In the below index.html file, we are calling the Controller functions to switch to different views.
XHTML
| <div ng-controller="viewController">
<div ng-click="showView('edit')"> Edit </div> <div ng-click="showView('search')"> Search </div> </div> |
Below is the code from the viewController.js file implementing the showView method.
JavaScript
| function view Controller ($scope, $location) {
$scope.showView = function(view){ $location.path(view); // Show the view } } |
Ans: By prefixing the “::” operator to the scope variable. It’ll make sure the candidate is aware of the available variable bindings in AngularJS.
Ans: The main difference between one-way binding and two-way binding is as follows.
Ans: It is the conditional ngIf Directive which we can apply to an element. Whenever the condition becomes false, the ngIf Directive removes it from the DOM.
Ans: It is just a collection of functions, like a class. Hence, it can be instantiated in different controllers when you are using it with a constructor function.