AngularJS is an open-source JavaScript framework developed by Google.
It helps you to create single-page applications or one-page web applications that only require HTML,CSS, and JavaScript on the client side.
It is based on MV-* pattern and allow you to build well structured, easily testable, and maintainable front-end applications.
AngularJS has changed the way to web development.
It is not based on jQuery to perform its operations.
In spite of using ASP.NET Web form, ASP.NET MVC, PHP, JSP, Ruby on Rails for web development,
you can do your complete web development by using most powerful and adaptive JavaScript Framework AngularJS.
There is no doubt, JavaScript frameworks like AngularJS, Ember etc. are the future of web development.
2.Why to use AngularJS?
There are following reasons to choose AngularJS as a web development framework:
1. It is based on MVC pattern which helps you to organize your web apps or web application properly.
2. It extends HTML by attaching directives to your HTML markup with new attributes or tags and expressions in order to define very powerful templates.
3. It also allows you to create your own directives, making reusable components that fill your needs and abstract your DOM manipulation logic.
4. It supports two-way data binding i.e. connects your HTML (views) to your JavaScript objects (models) seamlessly. In this way any change in model will update the view and vice versa without any DOM manipulation or event handling.
5. It encapsulates the behaviour of your application in controllers which are instantiated with the help of dependency injection.
6. It supports services that can be injected into your controllers to use some utility code to fulfil your need. For example, it provides $http service to communicate with REST service.
7. It supports dependency injection which helps you to test your angular app code very easily.
8. Also, AngularJS is mature community to help you. It has widely support over the internet.
3.Why this project is called "AngularJS"?
Html has angle brackets i.e. <,> and ng sound like Angular. That’s why it is called AngularJS.
4.What are the advantages of AngularJS?
?There are following advantages of AngularJS:
Data Binding - AngularJS provides a powerful data binding mechanism to bind data to HTML elements by using scope.
Customize & Extensible - AngularJS is customized and extensible as per you requirement. You can create your own custom components like directives, services etc.
Code Reusability - AngularJS allows you to write code which can be reused. For example custom directive which you can reuse.
Support – AngularJS is mature community to help you. It has widely support over the internet. Also, AngularJS is supported by Google which gives it an advantage.
Compatibility - AngularJS is based on JavaScript which makes it easier to integrate with any other JavaScript library and runnable on browsers like IE, Opera, FF, Safari, Chrome etc.
Testing - AngularJS is designed to be testable so that you can test your AngularJS app components as easy as possible. It has dependency injection at its core, which makes it easy to test.
5.How AngularJS is different from other JavaScript Framework?
Today, AngularJS is the most popular and dominant JavaScript framework for professional web development.
It is well suited for small, large and any sized web app and web application.
AngularJS is different from other JavaScript framework in following ways:
1. AngularJS mark-up lives in the DOM.
2. AngularJS uses plain old JavaScript objects (POJO).
3. AngularJS is leverage with Dependency Injection.
6.What IDEs you can use for AngularJS development?
AngularJS development can be done with the help of following IDEs:
1. Visual Studio 2012, 2013, 2015 or higher
2. Eclipse
3. WebStorm
4. Sublime Text
5. TextMate
7.Does AngularJS has dependency on jQuery?
AngularJS has no dependency on jQuery library. But it can be used with jQuery library.
8.How to use jQuery with AngularJS?
By default AngularJS use jQLite which is the subset of jQuery.
If you want to use jQuery then simply load the jQuery library before loading the AngularJS.
By doing so, Angular will skip jQLite and will started to use jQuery library.
9.Compare the features of AngularJS and jQuery?
The comparison of AngularJS and jQuery features are given below:
Features
jQuery
AngularJS
Abstract The DOM
Y
Y
Animation Support
Y
Y
AJAX/JSONP
Y
Y
Cross Module Communication
Y
Y
Deferred Promises
Y
Y
Form Validation
N
Y
Integration Test Runner
N
Y
Unit Test Runner
Y
Y
Localization
N
Y
MVC Pattern
N
Y
Template
N
Y
Two-way Binding
N
Y
One-way Binding
N
Y
Dependency Injection
N
Y
Routing
N
Y
Restful API
N
Y
10.What is jQLite or jQuery lite?
jQLite is a subset of jQuery that is built directly into AngularJS.
jQLite provides you all the useful features of jQuery.
In fact it provides you limited features or functions of jQuery.
Here is a table of supported jQuery methods by jQLite.
jQuery Method
Limitation, if any
addClass()
after()
append()
attr()
bind()
Does not support namespace, selectors and eventData
children
Does not support selectors
clone()
contents()
css()
data()
detach()
empty()
eq()
find()
Limited to lookups by tag name
hasClass()
html()
text()
Does not support selectors
on()
Does not support namespace, selectors and eventData
off()
Does not support namespace, selectors
one()
Does not support namespace, selectors
parent()
Does not support selectors
prepend()
prop
ready()
remove
removeAttr()
removeClass()
removeData()
replaceWith()
toggleClass()
triggerHandler()
Passes a dummy event object to handlers
unbind()
Does not support namespace
val()
wrap()
11.How to access jQLite or jQuery with AngularJS? OR
What is angular.element() in AngularJS?
jQuery lite or the full jQuery library if available, can be accessed via the AngularJS code by using the element() function in AngularJS.
Basically, angular.element() is an alias for the jQuery function i.e.
angular.element() === jQuery() === $()
For Example
<html>
<head>
<script src="lib/angular.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller("mainCtrl", function ($scope, $element)
{ $scope.clickme = function () {
var elem = angular.element(document.querySelector('#txtName'));
console.log(elem.val())// console the value of textbox
};
});
</script>
</head>
<body ng-app="app">
<div ng-controller="mainCtrl">
<input type="text" id="txtName" value="aarif mohammad" />
<button type="button" ng-click="clickme()">Click me</button>
</div>
</body>
</html>
12.Is AngularJS a library, framework, plugin or a browser extension?
AngularJS is a first class JavaScript framework which allows you to build well structured, easily testable, and maintainable front-end applications.
It is not a library since library provides you limited functionality or has dependencies to other libraries.
It is not a plugin or browser extension since it is based on JavaScript and compatible with both desktop and mobile browsers.
13.What browsers AngularJS support?
The latest version of AngularJS 1.3 support Safari, Chrome, Firefox, Opera 15+, IE9+ and mobile browsers (Android, Chrome Mobile, iOS Safari, Opera Mobile).
AngularJS 1.3 has dropped support for IE8 but AngularJS 1.2 will continue to support IE8.
14.What is the size of angular.js file?
The size of the compressed and minified file is < 36KB.
AngularJS provide following built-in protection from basic security holes:
1. Prevent HTML injection attacks.
2. Prevent Cross-Site-Scripting (CSS) attacks.
3. Prevent XSRF protection for server side communication.
Also, AngularJS is designed to be compatible with other security measures like Content Security Policy (CSP), HTTPS (SSL/TLS) and server-side authentication and authorization that greatly reduce the possible attacks.
17.What are Modules in AngularJS?
AngularJS modules are containers just like namespace in C#.
They divide an angular app into small, reusable and functional components which can be integrated with other angular app.
Each module is identified by a unique name and can be dependent on other modules.
In AngularJS, every web page (view) can have a single module assigned to it via ng-app directive.
Creating an AngularJS module
<script type="text/javascript">
// defining module
angular.module('myApp', []);
//OR defining module which has dependency on other modules
angular.module('myApp', ['dependentModule1', 'dependentModule2']);
</script>
Using an AngularJS module into your app
You can bootstrap your app by using your AngularJS module as given below:
18.What components can be defined within AngularJS modules?
You can define following components with in your angular module:
1. Directive
2. Filter
3. Controller
4. Factory
5. Service
6. Provider
7. Value
8. Config settings and Routes
19.What is core module in AngularJS?
ng is the core module in angular. This module is loaded by default when an angular app is started.
This module provides the essential components for your angular app like directives, services/factories, filters, global APIs and testing components.
20.How angular modules load the dependencies?
An angular module use configuration and run blocks to inject dependencies (like providers, services and constants)
which get applied to the angular app during the bootstrap process.
