AngularJS | Overview

Hello folks! welcome to a brand new tutorial series on AngularJS. This tutorial is created for developers who want to learn the basics of AngularJS and it's programming concepts in simple and easy steps.

AngularJS is a open-source web application framework. It was created in 2009 by Misko Hevery and Adam Abrons. AngularJS is now maintained by Google and its latest version is 1.8.2.

Definition of AngularJS as put by its official documentation is as follows -

AngularJS is a structural framework for dynamic web applications. It lets you to utilize HTML as your template language and lets you extend HTML's syntax to express your application components clearly. Its data binding and dependency injection eliminates much of the code you currently have to write. And it all happens within the browser, making it an perfect patner with any server technology.

General Features of AngularJS

Following below are the general features of AngularJS -

• It is an open source, totally free, and used by thousands of web developers around the world. It is licensed under the Apache license version 2.0.

• It provides developers option to write client side applications via JavaScript in a clean Model View Controller way.

• It is a structured framework that can create Rich Internet Applications (RIA)

• Applications written in AngularJS are cross-browser compliance. AngularJS automatically handles all JavaScript code suitable for each browser.

Overall, AngularJS is a framework used for building large scale, high performance, and easy to maintain web applications.

Core Features of AngularJS

The following below are the core features of AngularJS -

• Controller - JavaScript functions that are bound to a particular scope.

• Scope - These are objects that refer to the model. They act as a glue between the controller and view.

• Routing - Concept of switching views.

• Data binding - It is an automatic data synchronization between model and view components.

• Dependency Injection - It has a built-in dependency injection subsystem that help the developer understand, create, and test the applications easily.

• Model View Whatever (MVW) - Model View Whatever is a design to divide an application into many parts known as Model, View, and Controller, each with distinct obligations. AngularJS doesn't implement MVC in a traditional sense, but rather something closer to MVVM that is Mode-View-ViewModel.

• Templates - These are rendered view with informations from the controller and model. These can be a single file (such as index.html) or multiple views in one page using partials.

• Filters - These selects subset of items from an array and returns a new array.

• Services - It comes with several built-in services such as the $http to make an XMLHttpRequest.

• Directives - These are makers of DOM elements like elements, attributes, css, etc. These can be used for developing custom HTML tags that serve as new, and custom widgets. AngularJS come with built-in directives like the ngBind, ngModel, etc.

• Deep Linking - 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.

Concepts

Following diagram below represents some vital parts of AngularJS which we are going to study in details in subsequent tutorials.

Advantages of AngularJS

The advantages of AngularJS are as follows -

• AngularJS code is unit testable.

• AngularJS makes available reusable components.

• In AngularJS, views are pure HTML pages, and controllers that are coded in JavaScript carries out the business processing.

• With AngularJS, developers can achieve more functionalities with short code.

• It provides capability to create Single Page Application in maintainable and clean way.

• It provides data binding capability to HTML. Thus it gives users a rich and responsive experience.

• AngularJS uses dependency injection and uses separation of concerns.

Overall, AngularJS applications can run on all major web browsers and smart phones, with android and IOS based phones/tablets included.

Disadvantages of AngularJS

Though AngularJS has a lot of advantages, here are few disadvantages -

• Not Secure - Being JavaScript only framework, applications written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.

• Not degradable - If JavaScript is disabled, then nothing would be visible, except the basic page.

AngularJS Directives

AngularJS can be divided into three major parts -

• ng-app - The ng-app directive defines and links an AngularJS application to HTML.

• ng-model - ng-model directive binds the values of AngularJS application data to HTML input controls.

• ng-bind - ng-bind directive binds the AngularJS application data to HTML tags.

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about AngularJS Environment Setup.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.