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
    • 271
    Comment on it

    Hii,
    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
    ...
    </body>

     

    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.


     $scope.firstName


    Example:

    <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}}
    
    </div>
    <h3>Note:app name n controller can be anything.</h3>
    <script>
    var app = angular.module('firstApp', []);
    app.controller('firstController', function($scope) {
      $scope.firstName= "John";
      $scope.lastName= "Doe";
    });
    </script>
    
    </body>

    Output:
    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
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
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: