Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • How to create an angularJs application

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 878
    Comment on it

    AngularJS is used to make web apps in a simple way which can be  easily maintained, In this blog i am going to share a simple example by which you will learn how to create an AngularJS Applications.
    Before you go through an example,you must have a clear concept about the following:
    1)In angularJs Modules is the one which contains different components of an AngularJS appilcation and it is called a container of an application  data
    2)In angularJS controllers are the one which is used to control AngularJS applications.
    3)ng-app(defines the module name) and ng-controllers(defines the controller) are the two most important directives used when we create an angularJs application.
    How to create an angularJs application?

    1)Firstly we will create a new module named anything you want(like i will name it as "firstApp"),  it will contain different components of an AngularJS app.

    var app = angular.module("firstApp", []);


    2)Now we will add ng-app="firstApp" in the outermost html tag(body tag,div tag etc), which is used to define that the 'firstApp' module will live within the outermost html element and it will define the application scope.

     <body ng-app="firstApp">
      content inside the ng-app


    3)Once the module is created and ng-app is defined,we will create a new controller named anything you want(like i will name it as "firstController"), it will manage and control AngularJS applications.

    app.controller('firstControllerr', ['$scope', function($scope) { 
       $scope.firstName= "John";



    4)In this step we will add a class in a html tag and define a ng-controller directive which will define the controller scope by which firstController become available to use within <div class="mainBody">.

     <div class="mainBody" ng-controller="firstController">.


    5)Inside <div class="mainBody"> $scope.expression accessed  using {{ expression }}. This is called an expression.



    <p>Try to change the names.</p>
    <div ng-app="firstApp" ng-controller="firstController">
    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    Full Name: {{firstName + " " + lastName}}
    <h3>Note:app name n controller can be anything.</h3>
    var app = angular.module('firstApp', []);
    app.controller('firstController', function($scope) {
      $scope.firstName= "John";
      $scope.lastName= "Doe";

    Try to change the names.
    First Name:
    Last Name:

    Full Name: John Doe
    Note:app name n controller can be anything.

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: