Wednesday, September 6, 2017

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="Shailendra Chauhan" /> <button type="button" ng-click="clickme()">Click me</button>

</div>

</body>
</html>




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
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()




addClass()

after()

append()

attr()

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



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.

Does AngularJS has dependency on jQuery?

AngularJS has no dependency on jQuery library. But it can be used with jQuery library.

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

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 leverages with Dependency Injection.

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.

Why this project is called "AngularJS"?

Html has angle brackets i.e. <,> and ng sound like Angular. That’s why it is called AngularJS.

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.

What is AngularJS?

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.

What is restrict option in directive?

The restrict option in angular directive, is used to specify how a directive will be invoked in your angular app i.e. as an attribute, class...