AngularJS: A Complete Client Side Solution

AngularJS: A complete client-side solution

With JavaScript being in the spotlight, many JavaScript libraries have been released and have gained popularity among web developers. Among all the libraries and frameworks (like BackboneJS and EmberJS) these days AngularJS is trending due to its powerful features that assist in building a proper architecture and maintenable web applications. AngularJS was officially introduced by Google in 2012 with version 1.0.

                       

AngularJS is a MVC framework that defines many concepts to build properly architectured and maintainable web applications. It also extends HTML by attaching directives to web pages with new attributes tags and expressions that gives a powerful template directly into HTML.

Official input on AngularJS from https://angularjs.org/

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 need to write. And it all happens within the browser, making it an ideal partner with any server technology.

A Complete Client-side Solution

AngularJS is a complete client-side solution that presents a higher level of abstraction for developers that is fit for CRUD apps. AngularJS probably might not be fit for apps (like games and GUI editors) that require intensive and tricky DOM manipulation. In that case it is better to use a library with a lower level of abstraction.

Concepts in AngularJS

AngularJS comes up with many powerful features and concepts.

Template

Templates are basically written in HTML. Angular combines the information from a model and controller then renders it to a dynamic view in the browser. Templates contain Angular-specific elements and attributes.

Angular specific elements and attributes are:

• Directives: It represents DOM components.
• Markup: used to bind expression.
• Filter: basically formats data for display like lowercase, uppercase and so on.
• Form controls: validates inputs.

Directives

Directives tell AngularJS's HTML compiler ($compiler) to to attach a behavior to a DOM element. Directives may be used as attributes, element names, comments or CSS classes. There are various types of built-in directives such as ng-app, ng-model, ng-bind, ng-init and so on.

Controllers

Controllers are regular JavaScript objects that control the data of AngularJS applications. The Application controller is defined by ng-controller. The behavior of the application is located in the Controller.

Module

AngularJS applications are structured in modules that can contain controllers, directives, filters and services. The operation "config" configures some of the services of our application as well. It helps us to separate our application in small components by which testing is easy.

Dependency Injection

Components (services, directives, filters and animation) hold their dependencies in the software design pattern that is dealt by dependency injection. Dependency injection also deals with how objects and functions are created.

Filter

A Filter basically formats data for a view. IAngular offers some commonly used filters like uppercase, lowercase, currency, orderby and so on.

Expression

AngularJS provides expressions for binding data to HTML. AngularJS are defined inside double braces {{ expression define here}}. They acts just like a ng-bind directive. They can be literals, operators and variables.

We will discuss every concept of AngularJS in details. Before that let's create an environment setup for AngularJS.

We can download a library file of AngularJS from https://angularjs.org/



On clicking Download you will get:



Before moving into Angularjs, we first download the Angularjs library file. We refer to the Content Distribution Network (CDN) and from there we can add the library directly into our web page with a script tag in the project.



After setting up the environment for AngularJS we are now in a position to take a dive into the world of building powerful web apps using AngularJS. We will learn every concept in AngularJS one by one in future tutorials.

Summary

In this very first tutorial on AngularJS we learn a basic introduction and terms (concepts) used in AngularJS.