AngularJS Introduction

AngularJS Introduction

AngularJS is Google's Super Heroic JavaScript framework. Angular has numerous features and advantages, which keeps it all above from other JavaScript frameworks. It is used to create single-page web applications (SPAs).

Why AngularJS is Super Heroic?

  • It is easy to learn, you can learn quickly in small time span.
  • Less coding and more functionality.
  • Wide documentation, examples and support is available on WEB.
  • MVW (Model-View-Whatever) architecture.
  • Work efficiently with Bootstrap and jQuery.

Main features

  1. AngularJS is two-way data binding.
  2. Can be easily integrated with HTML DOM controls for repeating, showing and hiding it.
  3. Good support for HTML form controls and form validations.
  4. Grouping of HTML into reusable components by using custom Directives.

Assuming, you may have knowledge of

  • HTML
  • CSS
  • JavaScript

Before proceed into real life adventure, look at some cool stuff.

Lets jump into AngularJS!

  1. Create new index.html page.
  2. We require AngularJS JavaScript framework to create browser based web app, And CDN is the handy way to use the JavaScript in modern web development. You can copy the latest version from https://angularjs.org and paste into index.html in header tag.
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  3. Add "ng-app" attribute to html tag. It is very important to tell AngularJS to initialize the framework. Note: It is single page application, so only one ng-app is used in a page. If using multiple the only first ng-app will be used as default, other will be ignored.
    <html ng-app>
  4. Add angular expression "{{ }}" for testing the angular app.
    <h1>{{'Hello World!'}}</h1>
    <h3>3+5 = {{3+5}}</h3>

Final code

<!DOCTYPE html>
<html ng-app>
<head>
  <title>AngularJS Introduction</title>
  <!-- AngularJS CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
  <!-- Hello World! example -->
  <h2>{{'Hello World!'}}</h2>
  <h3>3+5 = {{3+5}}</h3>
</body>
</html>

Hello World!

3+5 = 8