AngularJS Tutorials

AngularJS Introduction

AngularJS is Client side MVC java script framework and used for single page applications(SPA).  AngularJS can be injected into HTML in script tag like other java script framework.

Let’s get start with Hello world tutorial for this, you no need to have NodeJS initially to learn.

AngularJS has following versions:

Angular 1.x version:

  • Angular 1 is designed around directives, ng-app and controllers,
  • two way data binding via $scope element
  • Angular 1 is modular based language

Angular 2:

  • Angular 2 is not extended version of Angular 1
  • It completely rewritten and its type script language based on ECMAScript 6 specification.
  • Angular 2 is designed around Component, Object Oriented  and Templates

Installations:

  1. Angularjs version 1.5.7
  2. WebServer for Chrome Browser Plugin
  3. Node++ or Sublime Editor

AngularJS Tutorial:

AngularJS is MVC Framework designed around

ng-app

ng-app directive initializes an AngularJS application and every  html page must define only one ng-app as root element closely in html or body element. You must include angular.js file and it will look for ng-app element and start angular application.

<body ng-app="myApp">
</body>
<script>
 var app = angular.module("myApp",[]);
</script>

Controller

Controllers in AngularJS applications provides functions  or DOM manipulations on DOM elements via ng-controller. Applications are required to define ng-controller on the DOM element, so that all operations in the DOM scope are  controlled by Angular JS controllers.

<body ng-app="myApp">
   <div ng-controller="LoginController">
   </div>
</div>

Data Binding

 AngularJS supports two way data binding i.e  automatically updates view when modal changes and also updates modal when view changes

<body ng-app="myApp">
   <div ng-controller="LoginController">
      <input name="email" ng-model="email" />
   </div>
</div>

 

AngularJS Tutorial:

  • ng-app directive is added body tag and angular js will bootstrap the angular application
  • angular.module will create angular application module that will available to create controllers, config and services etc
  • ng-controller directive is added to div, which is created via app.controller(). Every controller will have $scope element and you can define variables and functions which will be accessible to inside of  <div ng-controller=”LoginController”></div> only
Angular Tutorial

Angular Tutorial

Lets create a sample tutorial to understand:

  • Download Chrome Web Server plugin in chrome browser and start it. For quick start, It is easy to start the web server rather NodeJS or apache and this server is enough to learn basic JS applications
  • Click on Choose folder and give the path where your html applicationsChrome Web Server
  • Create index.html file
  • Include angular js file under after html
  • In this example
    • LoginController, Signup Controller are created using module “MyApp”.
    • LoginController has scope of models email, pass and function login() which are defined inside of it
    • email and pass are variables bind to inputs. When ever user enter value into these variables then it automatically and displays on “Hello {{email}}”.
    •  {{email}} looks for model inside of LoginController and displays the value. This is called two way binding
    • Submit button is binded with ng-click and it will call the login() function defined in the LoginController
    • {{title}} displays model defined in SignUp Controller
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<body ng-app="MyApp">
  <div ng-controller="LoginController">
      <input type="text" name="emailAddress" ng-model="email">
      <input type="password" name="password" ng-model="pass">
     <input type="submit" ng-click="login()"/>
                 Hello {{email}}
 </div>

   <div ng-controller="SingupController">
     {{title}}
    </div>
</body>
<script>
var app = angular.module('MyApp', []);
var loginController = app.controller("LoginController", function ($rootScope,$scope) {
 $scope.email = "";
 $scope.pass="";
 $scope.login = function(){
     console.log("Email"+ $scope.email)
     alert("Email:"+$scope.email)
    }
 });
var singupCtrl = app.controller("SingupController", function ($rootScope,$scope) {
    $scope.title = "SingUp Here";
 });
</script>
</html>

Result:  Now access the application with http://localhost:887/index.html

Angular JS Tutorial

 

 

 

Hope this helps!!!