1. What is AngularJs?
AngularJs is a JavaScript framework which
we use to create highly scalable client application & simplifies the
binding of JS object with HTML elements. It extends the syntax of HTML to
express application components. It extends the HTML extension using the
attributes e.g. ng-
<div
ng-app>
Angular JS provides many attributes which
extend the feature but all of them start with ng-.
2. What is the key features of AngularJs
AngularJs come with lots of flexibility and
features like:
a.
Two way data bindings
b.
Scope
c.
Follow MVC patterns
d.
Injectable Types (like Service, factory,
Providers)
e.
Directive
To see the description of above features please see the next
questions.
3. What is 2 way databindings in AngularJS?
There are two way of data binding the binding
the model from view to controller and Controller to view.
E.g.
<script type="text/javascript">
// Setter method
var demoApp = angular.module('demoApp', []);
// Getter method
demoApp.controller('DemoController', function( $scope ){
$scope.dep = "Software";
});
</script>
Binding it to model by:
<input name="test" type=”text” ng-model="dep" />
4.
What is
Directives in AngularJS ?
Directives are declared in the HTML
elements. All directive start with the “ng”.
e.g. Simple ng-model.
<input name="test" type=”text” ng-model="dep" />
5. What is Scope in AngularJs?
$scope is work like“glue” between
Controller and View.
It provides observers to watch for model changes.
6. What is MVC pattern in AngularJS?
AngularJS works under MVW patterns (Model,
View and whatever patterns). Now if you will see the model, vmiew and
controller part than, it is like you are defining Model with Module and Controller as
//
Defing Modules
var demoApp = angular.module('demoApp', []);
demoApp.controller('DemoController', function( $scope ){
$scope.dep = "Software";
});
7. What is Modules?
A module is work as global namespace. It helps to
bootstrap the application. It works as
container for different part of our app.
//
Defing Modules
var demoApp = angular.module('demoApp', []);
Module will bind to view
using ng-app=”myapp”
<html ng-app="demoApp">
8.
What is
controller?
A controller is defined by JavaScript Constructor
function. Controller is a function that binds objects to the particulars
storage or containers.
Controller is attached to DOM via the ng-controller
directives.
Initializing the controller with in JavaScript with module
as
demoApp.controller('DemoController', function( $scope ){
$scope.dep = "Software";
});
Use the controller for:
a. Setup
the initial state & $scope object.
b. Add Behavior
for $scope object.
9. Can we have Nested Controller?
Yes we can derive nested controller.
You can use the nested controller like:
<div class="cont"
ng-controller="CarController">
My name is {{ name }} and I am a {{ type }}
<div
ng-controller="BMWController">
My name is {{ name }} and I am a {{
type }}
<div
ng-controller="BMWMotorcycleController">
My name is {{ name }} and I am a {{
type }}
</div>
</div>
</div>
10. What is the application flow of AngularJs?
Make the use of special directive of ng-app in HTML
attributes. Once it find the ng-app in the html page it start treating the
application into special manner and treating the page as AngularJs page than it
will check for ng-controller which will defined the scope for an object.
Now after words it will check with other ng- attributes in
the application and change the behavior based on the logic of ng- attributes
use in the html tags.
11. What is AngularJS service?
Service, Factories and
providers are all injectable types.
An AngularJs service
encapsulates specific business logic & exposes an API to be used by other
components to invoke this logic.
e.g. $timeout service executes
function after specifies interval. $http service encapsulates the logic
required to interact with REST backbends.
AngularJS service is always
Singleton.
Service is registered using
service function of angular.module().
The Second argument to
service() is a constructor function to inject the service.
e.g.
var myApp = angular.module('myApp', []);
//service
style, probably the simplest one
myApp.service('helloWorldFromService', function() {
this.sayHello
= function()
{
return "Hello, World!"
};
});
12. What is factory method ?
Factory method is same as service method but it is more robust
than service and you can expose only that logic which you want to expose.
//factory
style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
return {
sayHello: function() {
return "Hello, World!"
}
};
});
Difference between factory and service is factory exposes
logic on return type but in service you will access logic directly by service
name and function name.
13. What is provider method in AngularJs?
A provider is most configurable
and verbose version of service because its based on prior setting and logic.
e.g. the built in $route
service may behave differently based on Mode(Html mode or hashbag mode) you can
configured in $route.Provider
//provider
style, full blown, configurable version
myApp.provider('helloWorld', function() {
this.name = 'Default';
this.$get = function() {
var name = this.name;
return {
sayHello: function() {
return "Hello, " + name + "!"
}
}
};
this.setName
= function(name)
{
this.name =
name;
};
});
//we can
configure a provider!
myApp.config(function(helloWorldProvider){
helloWorldProvider.setName('World');
});
14. What is value and constant in AngularJs?
Value
is an injectable type that is used to register simple service which can be
a string, number, array or function.
e.g. you want to give a version number for
website use value service using the value(0 function of angular.Module()
angular.module("myapp").value("appvesrion", "1.0");
Constant:
A constant is an injectable type that is the same as a value except that it can
be injected into Module.Config(). Register constant by calling Constant().
angular.module("myapp").constant("Data_Source", "a String here");
15. What is main core directive of AngularJs ?
Ng-app : which will bootstrap the
application as angular application.
Ng-Model : It bind the model or value to
the html input controls
Ng-Bind : it bind the Model or value to the
Html Tag.
16. What is ng-init directive?
It initializes the model value for your
view.
<div
ng-init="qty=1;cost=2">
17. What is ng-repeat?
It is using for repeating the object
collection and bind to the view.
<ul>
<li data-ng-repeat="customer in customers">
{{ customer.name }} - {{
customer.city}}
</li>
</ul>
18. What is ng-if directive do?
Ng-if
directive removes or recreate a portion of the DOM tree based on an {expression}.
If ng-if is false than the control not
create the DOM.
<div ng-if="show">
<h1>Dynamic DOM based on
condition</h1>
Data is : {{ sdata.val }}
<input ng-model="data
" type="text" />
</div>
19.
What is Ng-Show?
Ng-show directives shows or hides the given
HTML elements based on expression provided to ng-show attributes.
e.g.
<div ng-show="show"> show the value </div>
20. What is difference in ng-if and ng-show?
Ng-if completely removes and recreates the
elements in the DOM rather than changing its visibility via the display CSS
property.
21. What is ng-disabled?
It used to make control enable and disabled
based on the expression.
<button ng-disabled=”isSubmittable” >
Click Me </button>
22. What is ng-option?
The ng-options
attributes can be used to dynamically generated list of <option> elements for the <select> element using array of object.
Here, select as will bind the result of the
select expression to the model.
e.g. $scope.items = [{
id =1,
label = ‘Satya’},
id = 2
label =’rathore’}];
<select ng-option=”item as item.label
for item in items track by item.id ></select>
Or
<select ng-option=”item.Label for item
in items /></select>
23. What is ng-class ?
Ng-class directive allows you to
dynamically set the css – class on and Html element based o the expression.
24. What is ng-href ?
Using angular markup like {{#}} as in href
cause issue and redirect to 4040 error as it treat as new url. To resolve that
problem need to use ng-href
< a href=”#”> Link 1 </a> //
wrong
<a ng-href=”#”>Link 2 </a> //
correct
25. What is ng-include?
Fetches, compile and includes an external
HTML fragment.
We can embedded it into HTML page using
ng-include.
<div
ng-include=”main.html”></div>
In addition the browser same origin policy
and cross domain resource sharing policy may further restrict whether the
template is success fully loaded.
e.g. ng-include won’t work for cross domain
request on all browser.
26. What is ng-click?
It is used to fire the click event of any
control in AngularJs.
<button
ng-click="sendDown()">Send Down</button>
scope.sendDown = function() {
Window.Alert(“I am clicked”);
};
27. What is ng-blur?
Blur event fires when an elements has lost
its focus.
28. How to use ng-switch ?
As switch is just the extension of if and
else condition on the same line we can use ng-switch in AngularJs.
The ng-switch directive is used to
conditionally swap DOM structure on your template based on condition of scope
object.
<div ng-switch on=”value” >
<div ng-switch-when=”Home”>Home
</div>
<div ng-switch-when=”About”>About
</div>
<div ng-switch-when=”Contact”>Contact
</div>
</div>
29. What is template in Angular?
Templates are written with HTML that
contains Angular specific elemets and attributes.
That will renders to your dynamic view and
it can be see by user in browser.
It contains below attributes as
-
Directive
-
Markup
-
Filters
-
Form Control
30 What are filters?
Angularjs provide many built in filters which will enhance
the output. E.g.
Lowercase – which converts your output string to lowercase.
Uppercase – which converts your output string to uppercase
Currency – it converts into currency.
.Greetings Mate,
ReplyDeleteLove it absolutely! So crystalline. No mumbo jumbo. No non-sense. Straight and simple. You guys need a standing ovation for your good work.
how to fix this problem ?
"because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled"
Once again thanks for your tutorial.
Thank you,
Irene Hynes