Q1) What is AngularJS?
It is javasScript framework which is written in javascript.
It is Best for Single Page Applications.
It is open source (free to use).
It extend the html with new attributes which makes it more useful for UI Developer.
It was first released in 2009.
Misko Hevery started to work on AngularJS in 2009. He was employee of Google.
Q2) what are the key features of Angular.js?
Scope, Controller, Model, View, Services, Data Binding, Directives, Filters, Testable. Routing etc.
Q3) What are Controllers in AngularJS?
Controllers are Javascript functions which provide data and logic to HTML UI.
As the name suggests, they control how data flows from the server to HTML UI.
Controller is constructor function in Angular Controller.
When a Controller is attached to the DOM with use the ng-controller, Angular will instantiate a new Controller object using constructor function.
<div ng-app="" ng-controller="StrControllerExample">
String 1: <input ng-model="str1" type="text" /><br />
String 2: <input ng-model="str2" type="text" /><br />
Full String <b> {{fullString()}}</b>
</div>
<script>
function StrControllerExample($scope) {
$scope.str1 = "Web",
$scope.str2 = "Technology",
$scope.fullString = function() {
return $scope.str1+ " " + $scope.str2;
}
}
</script>
Q4) what are directives?
Directives are used to add new attributes of HTML.
It is something that introduces new syntax, they are like markers on DOM element which attaches a special behavior to it.
Some of the commonly used directives are ng-model, ng-App, ng-bind, ng-repeat , ng-show etc.
Directives are attributes that allow you to invent new HTML syntax, specific to your application.
They are essentially functions that execute when the Angular compiler finds them in the DOM.
Some of the most commonly used directives are ng-app,ng-controller and ng-repeat.
The different types of directives are: Element directives, Attribute directives, CSS class directives, Comment directives
On which types of component can we create a custom directive?
-------------------------------------------------------------
AngularJS provides support to create custom directives for the following:
Element directives − Directive activates when a matching element is encountered.
Attribute − Directive activates when a matching attribute is encountered.
CSS − Directive activates when a matching css style is encountered.
Comment − Directive activates when a matching comment is encountered.
Q5) what is scope in AngularJS ?
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.
Q6) what is services in AngularJS ?
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.
Q7) what is data binding in AngularJS ?
Automatic synchronization of data between the model and view components is referred as data binding in AngularJS. There are two ways for data binding
Data mining in classical template systems
Data binding in angular templates
Q8) what Angular JS routes does ?
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
It is a five-step process to implement routing in AngularJS :
Step 1: – Add the “Angular-route.js” file to your view.
Step 2: – Inject “ngroute” functionality while creating Angular app object.
Step 3: – Configure the route provider.
Step 4: – Define hyperlinks.
Step 5: – Define sections where to load the view.
Q9) what is linking function and type of linking function?
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.
Pre-linking function: Pre-linking function is executed before the child elements are linked. It is not considered as the safe way for DOM transformation.
Post linking function: Post linking function is executed after the child elements are linked. It is safe to do DOM transformation by post-linking function
Q10) what is factory method in AngularJS?
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.
Factory method is used for creating a directive. It is invoked when the compiler matches the directive for the first time. We can invoke the factory method using $injector.invoke.
Syntax: module.factory( 'factoryName', function );
Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.
Q11) what are the styling form that ngModel adds to CSS classes ?
ngModel adds these CSS classes to allow styling of form as well as control
ng- valid
ng- invalid
ng-pristine
ng-dirty
Q12) what are the characteristics of “Scope”?
To observer model mutations scopes provide APIs ($watch)
To propagate any model changes through the system into the view from outside of the Angular realm
A scope inherits properties from its parent scope, while providing access to shared model properties, scopes can be nested to isolate application components
Scope provides context against which expressions are evaluated
Q13) what is DI (Dependency Injection ) and how an object or function can get a hold of its dependencies ?
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
Typically using the new operator, dependency can be created
By referring to a global variable, dependency can be looked up
Dependency can be passed into where it is required
Q14) What is ng-app, ng-init and ng-model?
ng-app : Initializes application.
ng-model : Binds HTML controls to application data.
ng-Controller : Attaches a controller class to view.
ng-repeat : Bind repeated data HTML elements. Its like a for loop.
ng-if : Bind HTML elements with condition.
ng-show : Used to show the HTML elements.
ng-hide : Used to hide the HTML elements.
ng-class : Used to assign CSS class.
ng-src : Used to pass the URL image etc.
Q15) Can AngularJS have multiple ng-app directives in a single page?
No. Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. If another ng-app directive has been placed then it will not be processed by AngularJS and we will need to manually bootstrap the second app, instead of using second ng-app directive.
Q16) Can angular applications (ng-app) be nested within each other?
No. AngularJS applications cannot be nested within each other.
Q17) Does Angular use the jQuery library?
Yes, Angular can use jQuery if it’s present in the app when the application is being bootstrapped. If jQuery is not present in the script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.
Q18) Can we have nested controllers in AngularJS?
Yes, we can create nested controllers in AngularJS. Nested controllers are defined in hierarchical manner while using in View.
Q19) What does SPA (Single Page Application) mean? How can we implement SPA with Angular?
Single Page Applications (SPAs) are web apps that load a single HTML page and dynamically update that page as the user interacts with the app. In an SPA the page never reloads, though parts of the page may refresh. This reduces the round trips to the server to a minimum.
It’s a concept where we create a single shell page or master page and load the webpages inside that master page instead of loading pages from the server by doing post backs. We can implement SPA with Angular using Angular routes. You can read up about SPAs here.
Q20) What is bootstrapping in AngularJS?
Bootstrapping in AngularJS is nothing but initializing, or starting the Angular app. AngularJS supports automatic and manual bootstrapping.
Automatic Bootstrapping: this is done by adding ng-app directive to the root of the application, typically on the tag or tag if you want angular to bootstrap your application automatically. When angularJS finds ng-app directive, it loads the module associated with it and then compiles the DOM.
Manual Bootstrapping: Manual bootstrapping provides you more control on how and when to initialize your angular App. It is useful where you want to perform any other operation before Angular wakes up and compile the page.
Q21) Explain $q service, deferred and promises.
‘Promises’ are post processing logics which are executed after some operation/action is completed whereas ‘deferred’ is used to control how and when those promise logics will execute.
We can think about promises as “WHAT” we want to fire after an operation is completed while deferred controls “WHEN” and “HOW” those promises will execute.
“$q” is the angular service which provides promises and deferred functionality.
Q22) What is internationalization and how to implement it in AngularJS?
Internationalization is a way in which you can show locale specific information on a website. AngularJS supports inbuilt internationalization for three types of filters: currency, date and numbers. To implement internalization, we only need to incorporate corresponding js according to locale of the country. By default it handles the locale of the browser.
Q23) what is injector in AngularJS?
An injector is a service locator, used to retrieve object instance as defined by provider, instantiate types, invoke methods, and load modules.
Q24) difference between link and compile in Angular.js?
Compile function is used for template DOM Manipulation and to collect all the directives.
Link function is used for registering DOM listeners as well as instance DOM manipulation and is executed once the template has been cloned.
Q25) What is Angular Expression? How do you differentiate between Angular expressions and JavaScript expressions?
Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript.
The main differences between Angular expressions and JavaScript expressions are:
Context : The expressions are evaluated against a scope object in Angular, while Javascript expressions are evaluated against the global window
Forgiving: In Angular expression, the evaluation is forgiving to null and undefined whereas in JavaScript undefined properties generate TypeError or ReferenceError
No Control Flow Statements: We cannot use loops, conditionals or exceptions in an Angular expression
Filters: In Angular unlike JavaScript, we can use filters to format data before displaying it
Q26) what are the advantages of using AngularJS ?
AngularJS has several advantages in web development.
AngularJS lets us extend HTML vocabulary for our application resulting in an expressive, readable, and quick to develop environment
It helps you to structure and test your JavaScript code.
It extends HTML using directives, expression and data binding techniques to define a powerful HTML template.
Supports two way data-binding
Supports MVC pattern
Supports routing supports, inbuilt services
Support static template and angular template
Can add custom directive
Supports REST full services
Supports form validations
Support both client and server communication
Support dependency injection
Applying Animations
Event Handlers
It supports both client server communication
Q27) What makes AngularJS better ?
Registering Callbacks: There is no need to register callbacks . This makes your code simple and easy to debug.
Control HTML DOM programmatically: All the application that are created using Angular never have to manipulate the DOM although it can be done if it is required
Transfer data to and from the UI: AngularJS helps to eliminate almost all of the boiler plate like validating the form, displaying validation errors, returning to an internal model and so on which occurs due to flow of marshalling data
No initilization code: With AngularJS you can bootstrap your app easily using services, which auto-injected into your application in Guice like dependency injection style.
Q28) Is AngularJS compatible with all browsers?
Yes AngularJS is compatible with the following browsers: Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).
Q29) What are the steps for the compilation process of HTML happens?
Compilation of HTML process occurs in following ways
Using the standard browser API, first the HTML is parsed into DOM
By using the call to the $compile () method, compilation of the DOM is performed. The method traverses the DOM and matches the directives.
Link the template with scope by calling the linking function returned from the previous step.
Q30) what is string interpolation in Angular.js ?
In Angular.js the compiler during the compilation process matches text and attributes using interpolate service to see if they contains embedded expressions. As part of normal digest cycle these expressions are updated and registered as watches.
Q31) Different imp Questions based on programs.
a) Example of AngularJS Object?
<div ng-app="" ng-init="myobj={Str1:'Web',Str2:'Technology'}">
String Display: <b>{{ myobj.Str2 }}</b></div>
b) Example of AngularJS Strings?
<div ng-app="" ng-init="Str1='Web';Str2='Technology'">
Full String is : <b>{{ Str1 + " " + Str2 }}</b>
</div>
c) How to initiate variable in AngularJS?
<div ng-app="" ng-init="quantity=10;cost=5">
<b>Total Cost: {{ quantity * cost }}</b>
</div>
OR
<div ng-app="" ng-init="quantity=1;cost=5">
<b>Total Cost: <span ng-bind="quantity * cost"></span></b>
</div>
d) How to Write Expression in AngularJS?
<div ng-app="">
<b>Expression: {{ 15 + 55 }}</b>
</div>
e) What is Looping in AngularJs and Give an Example?
It is used to display the data in loop same as foreach in PHP
Example:
<div data-ng-app="" data-ng-init="names=['Web','Technology','Experts','Notes']">
<b>Loop Example:</b>
<br />
<ul>
<li data-ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
f) Give an Example of Data-Binding in AngularJS?
<div ng-app="" ng-init="quantity=10;cost=5">
<b>Total Cost: {{ quantity * cost }}</b>
</div>
g)
It is javasScript framework which is written in javascript.
It is Best for Single Page Applications.
It is open source (free to use).
It extend the html with new attributes which makes it more useful for UI Developer.
It was first released in 2009.
Misko Hevery started to work on AngularJS in 2009. He was employee of Google.
Q2) what are the key features of Angular.js?
Scope, Controller, Model, View, Services, Data Binding, Directives, Filters, Testable. Routing etc.
Q3) What are Controllers in AngularJS?
Controllers are Javascript functions which provide data and logic to HTML UI.
As the name suggests, they control how data flows from the server to HTML UI.
Controller is constructor function in Angular Controller.
When a Controller is attached to the DOM with use the ng-controller, Angular will instantiate a new Controller object using constructor function.
<div ng-app="" ng-controller="StrControllerExample">
String 1: <input ng-model="str1" type="text" /><br />
String 2: <input ng-model="str2" type="text" /><br />
Full String <b> {{fullString()}}</b>
</div>
<script>
function StrControllerExample($scope) {
$scope.str1 = "Web",
$scope.str2 = "Technology",
$scope.fullString = function() {
return $scope.str1+ " " + $scope.str2;
}
}
</script>
Q4) what are directives?
Directives are used to add new attributes of HTML.
It is something that introduces new syntax, they are like markers on DOM element which attaches a special behavior to it.
Some of the commonly used directives are ng-model, ng-App, ng-bind, ng-repeat , ng-show etc.
Directives are attributes that allow you to invent new HTML syntax, specific to your application.
They are essentially functions that execute when the Angular compiler finds them in the DOM.
Some of the most commonly used directives are ng-app,ng-controller and ng-repeat.
The different types of directives are: Element directives, Attribute directives, CSS class directives, Comment directives
On which types of component can we create a custom directive?
-------------------------------------------------------------
AngularJS provides support to create custom directives for the following:
Element directives − Directive activates when a matching element is encountered.
Attribute − Directive activates when a matching attribute is encountered.
CSS − Directive activates when a matching css style is encountered.
Comment − Directive activates when a matching comment is encountered.
Q5) what is scope in AngularJS ?
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.
Q6) what is services in AngularJS ?
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.
Q7) what is data binding in AngularJS ?
Automatic synchronization of data between the model and view components is referred as data binding in AngularJS. There are two ways for data binding
Data mining in classical template systems
Data binding in angular templates
Q8) what Angular JS routes does ?
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
It is a five-step process to implement routing in AngularJS :
Step 1: – Add the “Angular-route.js” file to your view.
Step 2: – Inject “ngroute” functionality while creating Angular app object.
Step 3: – Configure the route provider.
Step 4: – Define hyperlinks.
Step 5: – Define sections where to load the view.
Q9) what is linking function and type of linking function?
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.
Pre-linking function: Pre-linking function is executed before the child elements are linked. It is not considered as the safe way for DOM transformation.
Post linking function: Post linking function is executed after the child elements are linked. It is safe to do DOM transformation by post-linking function
Q10) what is factory method in AngularJS?
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.
Factory method is used for creating a directive. It is invoked when the compiler matches the directive for the first time. We can invoke the factory method using $injector.invoke.
Syntax: module.factory( 'factoryName', function );
Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory.
Q11) what are the styling form that ngModel adds to CSS classes ?
ngModel adds these CSS classes to allow styling of form as well as control
ng- valid
ng- invalid
ng-pristine
ng-dirty
Q12) what are the characteristics of “Scope”?
To observer model mutations scopes provide APIs ($watch)
To propagate any model changes through the system into the view from outside of the Angular realm
A scope inherits properties from its parent scope, while providing access to shared model properties, scopes can be nested to isolate application components
Scope provides context against which expressions are evaluated
Q13) what is DI (Dependency Injection ) and how an object or function can get a hold of its dependencies ?
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
Typically using the new operator, dependency can be created
By referring to a global variable, dependency can be looked up
Dependency can be passed into where it is required
Q14) What is ng-app, ng-init and ng-model?
ng-app : Initializes application.
ng-model : Binds HTML controls to application data.
ng-Controller : Attaches a controller class to view.
ng-repeat : Bind repeated data HTML elements. Its like a for loop.
ng-if : Bind HTML elements with condition.
ng-show : Used to show the HTML elements.
ng-hide : Used to hide the HTML elements.
ng-class : Used to assign CSS class.
ng-src : Used to pass the URL image etc.
Q15) Can AngularJS have multiple ng-app directives in a single page?
No. Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. If another ng-app directive has been placed then it will not be processed by AngularJS and we will need to manually bootstrap the second app, instead of using second ng-app directive.
Q16) Can angular applications (ng-app) be nested within each other?
No. AngularJS applications cannot be nested within each other.
Q17) Does Angular use the jQuery library?
Yes, Angular can use jQuery if it’s present in the app when the application is being bootstrapped. If jQuery is not present in the script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.
Q18) Can we have nested controllers in AngularJS?
Yes, we can create nested controllers in AngularJS. Nested controllers are defined in hierarchical manner while using in View.
Q19) What does SPA (Single Page Application) mean? How can we implement SPA with Angular?
Single Page Applications (SPAs) are web apps that load a single HTML page and dynamically update that page as the user interacts with the app. In an SPA the page never reloads, though parts of the page may refresh. This reduces the round trips to the server to a minimum.
It’s a concept where we create a single shell page or master page and load the webpages inside that master page instead of loading pages from the server by doing post backs. We can implement SPA with Angular using Angular routes. You can read up about SPAs here.
Q20) What is bootstrapping in AngularJS?
Bootstrapping in AngularJS is nothing but initializing, or starting the Angular app. AngularJS supports automatic and manual bootstrapping.
Automatic Bootstrapping: this is done by adding ng-app directive to the root of the application, typically on the tag or tag if you want angular to bootstrap your application automatically. When angularJS finds ng-app directive, it loads the module associated with it and then compiles the DOM.
Manual Bootstrapping: Manual bootstrapping provides you more control on how and when to initialize your angular App. It is useful where you want to perform any other operation before Angular wakes up and compile the page.
Q21) Explain $q service, deferred and promises.
‘Promises’ are post processing logics which are executed after some operation/action is completed whereas ‘deferred’ is used to control how and when those promise logics will execute.
We can think about promises as “WHAT” we want to fire after an operation is completed while deferred controls “WHEN” and “HOW” those promises will execute.
“$q” is the angular service which provides promises and deferred functionality.
Q22) What is internationalization and how to implement it in AngularJS?
Internationalization is a way in which you can show locale specific information on a website. AngularJS supports inbuilt internationalization for three types of filters: currency, date and numbers. To implement internalization, we only need to incorporate corresponding js according to locale of the country. By default it handles the locale of the browser.
Q23) what is injector in AngularJS?
An injector is a service locator, used to retrieve object instance as defined by provider, instantiate types, invoke methods, and load modules.
Q24) difference between link and compile in Angular.js?
Compile function is used for template DOM Manipulation and to collect all the directives.
Link function is used for registering DOM listeners as well as instance DOM manipulation and is executed once the template has been cloned.
Q25) What is Angular Expression? How do you differentiate between Angular expressions and JavaScript expressions?
Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript.
The main differences between Angular expressions and JavaScript expressions are:
Context : The expressions are evaluated against a scope object in Angular, while Javascript expressions are evaluated against the global window
Forgiving: In Angular expression, the evaluation is forgiving to null and undefined whereas in JavaScript undefined properties generate TypeError or ReferenceError
No Control Flow Statements: We cannot use loops, conditionals or exceptions in an Angular expression
Filters: In Angular unlike JavaScript, we can use filters to format data before displaying it
Q26) what are the advantages of using AngularJS ?
AngularJS has several advantages in web development.
AngularJS lets us extend HTML vocabulary for our application resulting in an expressive, readable, and quick to develop environment
It helps you to structure and test your JavaScript code.
It extends HTML using directives, expression and data binding techniques to define a powerful HTML template.
Supports two way data-binding
Supports MVC pattern
Supports routing supports, inbuilt services
Support static template and angular template
Can add custom directive
Supports REST full services
Supports form validations
Support both client and server communication
Support dependency injection
Applying Animations
Event Handlers
It supports both client server communication
Q27) What makes AngularJS better ?
Registering Callbacks: There is no need to register callbacks . This makes your code simple and easy to debug.
Control HTML DOM programmatically: All the application that are created using Angular never have to manipulate the DOM although it can be done if it is required
Transfer data to and from the UI: AngularJS helps to eliminate almost all of the boiler plate like validating the form, displaying validation errors, returning to an internal model and so on which occurs due to flow of marshalling data
No initilization code: With AngularJS you can bootstrap your app easily using services, which auto-injected into your application in Guice like dependency injection style.
Q28) Is AngularJS compatible with all browsers?
Yes AngularJS is compatible with the following browsers: Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).
Q29) What are the steps for the compilation process of HTML happens?
Compilation of HTML process occurs in following ways
Using the standard browser API, first the HTML is parsed into DOM
By using the call to the $compile () method, compilation of the DOM is performed. The method traverses the DOM and matches the directives.
Link the template with scope by calling the linking function returned from the previous step.
Q30) what is string interpolation in Angular.js ?
In Angular.js the compiler during the compilation process matches text and attributes using interpolate service to see if they contains embedded expressions. As part of normal digest cycle these expressions are updated and registered as watches.
Q31) Different imp Questions based on programs.
a) Example of AngularJS Object?
<div ng-app="" ng-init="myobj={Str1:'Web',Str2:'Technology'}">
String Display: <b>{{ myobj.Str2 }}</b></div>
b) Example of AngularJS Strings?
<div ng-app="" ng-init="Str1='Web';Str2='Technology'">
Full String is : <b>{{ Str1 + " " + Str2 }}</b>
</div>
c) How to initiate variable in AngularJS?
<div ng-app="" ng-init="quantity=10;cost=5">
<b>Total Cost: {{ quantity * cost }}</b>
</div>
OR
<div ng-app="" ng-init="quantity=1;cost=5">
<b>Total Cost: <span ng-bind="quantity * cost"></span></b>
</div>
d) How to Write Expression in AngularJS?
<div ng-app="">
<b>Expression: {{ 15 + 55 }}</b>
</div>
e) What is Looping in AngularJs and Give an Example?
It is used to display the data in loop same as foreach in PHP
Example:
<div data-ng-app="" data-ng-init="names=['Web','Technology','Experts','Notes']">
<b>Loop Example:</b>
<br />
<ul>
<li data-ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
f) Give an Example of Data-Binding in AngularJS?
<div ng-app="" ng-init="quantity=10;cost=5">
<b>Total Cost: {{ quantity * cost }}</b>
</div>
g)
No comments:
Post a Comment