- Easily manipulate the contents of a webpage
- Apply styles to make UI more attractive
- Easy DOM traversal
- Effects and animation
- Simple to make AJAX calls
- Core functionality
1.Easily manipulate the contents of a webpage
Provides functions for editing and changing documents contents and working with CSS data such as positioning info.
Provides an official plug-in with commonly used interface widgets, like slider controls, progress bars, accordions and more..
Provides functions for finding content in documents and navigating amount the contents of the document.
<p id=“”foo>This is a paragraph of text with a
4.Effects and animation
Provides functions for creating basic animations and effects, such as hiding and showing elements and moving objects around.
Provides utilities for working with Ajax, such as loading contents from pages and dealing with JSON data.
Simplifies working with the modern DOM events and provides common event helper functions
Enables the construction of jQuery plug-ins that enhance the functionality of the base library.
Implements core jQuery functions as well as commonly used utilities.
$.trim( ” Extra whitespace here ” );
It’s returns “Extra whitespace here”.
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write.
- Two-Way data binding
- Dependency Injection
- Deep Linking
- MVC-based Pattern
- Full Testing Environment
- Single page application
- Form Validation
- REST friendly
- Server Communication
The Major features of AngularJs:
- One way data binding Vs Two way data binding.
One way data binding:
jQuery template system bind data in only one direction: they merge template and model components together into a view. After the merge occurs, changes to the model or related sections of the view are NOT automatically reflected in the view. Worse, any changes that the user makes to the view are not reflected in the model. This means that the developer has to write code that constantly syncs the view with the model and the model with the view.
One way data binding example:
Two-Way Data binding:
Data-binding in Angular apps is the automatic synchronization of data between model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. In two-way data binding, any change made in the view will reflect in model, similarly changes made in the model will reflect in the view. It is a two way process.
Angular ng-model directive to create a data binding process.
Two way binding example:
Dependency injection is one of AngularJS’s best patterns. It makes testing much simpler, as well as making it more clear upon which any particular object depends. AngularJS is very flexible on how things can be injected.
Angular ngRoute module provides routing and deep linking services and directives for angular app.
Deep linking allows to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.
The model is where your data are. Either the data we are talking about can be a static data or dynamically fetched from a data source, tucked in a server that is miles away from the client, using JSON.
In the above script, the $scope is an object in the model. See how it is encapsulated inside the controller() method.
In Angular, the view comprises of HTML elements and directives. This is the section of application, which is visible to users (using a browser). Other than markups, every view has as an expression (with curly braces), which is tied up to the scope object.
The above piece of markup, also known as Template in Angular, when bound, complied and loaded on the browser is then called the view.
The controller actually controls the entire business logic of your application. The initial stage is set here, that is, it initializes and registers the application by creating a new Angular Module.
Angular Directives are attributes applied in the View. Attached to HTML elements, the directives augment the elements with new behaviors. Did you see the above examples, each element has directives, prefixed with ng-. Whenever we attach a directive with an element, it tells AngularJS that it is a part of Angular app and Angular treats it that way.
SINGLE PAGE APPLICATION
The page does not reload at any point in the process,nor does control transfer to another page, although the location hash can be used to provide the perception and navigability of separate logical pages in the application.
- No page refresh
- When you are using SPA, you don’t need to refresh the whole page, just load the part of the page which needs to be changed. Angular allows you to pre-load and cache all your pages, so you don’t need extra requests to download them.
- Better user experience
- SPA feels like a native application: fast and responsive.
- Ability to work offline
Even if user loses internet connection, SPA can still work because all the pages are already loaded.
- More complex to build
- Initial load is slow
- SPA needs to download more resources when you open it.
Where to use jQuery and where to use AngularJS?
Most of the time, people fail to comprehend the real value of these technologies during application development. AngularJS is best suited for the web application development as it works on the HTML code and JSON data which helps in developing for interactive and robust applications but using the same for a simple website development results in slow loading and quite erratic websites.