AngularJS the ease and fun library

JavaScript itself is an interesting client-side scripting language, however its popular and biggest library JQuery adds more fun and quality in learning and working with JavaScript. AngularJS is another JavaScript framework or a library for JavaScript which is very special and useful for the SPAs (Single Page Applications), on-time calculations and awesome routing between pages.

Application

AngularJS is awesome for making custom and easy-to-use applications like a To-Do list or a NotePad, Client-side validations, add more fun in tables with it and etc. AngularJS extends HTML with new attributes and adds more fun while designing web application. For learning or starting AngularJS, you should know the three web designing technologies, HTML, CSS and JavaScript.

Support

AngularJS by google
AngularJS by google

AngularJS is almost new and is about 6 years old. It was first released in 2012, though Miško Hevery started to work with it in 2009 who is a google employee. Now this cool JavaScript library or framework is officially supported by google.


Easy to use

AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions. AngularJS is a JavaScript framework. It is a library written in JavaScript. It is distributed as a JavaScript file, and can be added to a web page with a script tag: <script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>

Or you can download it and add it to your files.

How it works

AngularJS extends HTML with ng-directives. The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view. As an example concentrate on the simple and sample below codes:

Example explained:

AngularJS starts automatically when the web page has loaded. The ng-app directive tells AngularJS that the <div> element is the “owner” of an AngularJS application. The ng-model directive binds the value of the input field to the application variable name. The ng-bind directive binds the innerHTML of the <p> element to the application variable name.

Or in simple words: whatever you type or enter inside the input-element, would be shown under that in the <p> tag.


AngularJS includes:

Its basic titles can contain directives, expressions, filters, modules, and controllers. The next step or advanced part includes working with Events, DOM, Forms, Input, Validation, Http, and more.

More fun with Angular…

Validation

AngularJS provides client-side form validation. It checks the states of the form and input fields (input, textarea, select) , and lets you notify the user about the current state. It can tell you whether the field is touched, modified or not.

Tables

The ng-repeat directive is perfect for displaying tables. Add different styles to odd and even rows with ng-if directive and many more fun.  orderBy is another fun with ng-repeat directive, look at the example below:

Routing

If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module. The ngRoute module routes your application to different pages without reloading the entire application. In addition, you need to include the routing library in your files.

Conclusion




AngularJS is fun for me and it makes thing like on-time calculation, routing between pages without loading, getting data from MySQL or SQL Server, creating effective and friendly form validations. It supports many APIs that makes your work with CSS and HTML easier.

Thanks for being in CODEJOW, stay tuned with us for more interesting articles.

Leave a Reply