Wednesday, 22 March 2017

Loading

Angular Js Example 1 :


1. Data binding with many text inputs in Angular JS.
    <html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
  </head>
  <body>
    Name:<input ng-model="name" type="text"/>
    <br>
    Name:<input ng-model="name" type="text"/>
    <br>
    Name:<input ng-model="name" type="text"/>
    <br>
    Hello {{name}}
  </body>
</html>

2. First name and last name in Angular JS.

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
  </head>
  <body>
    First name:<input ng-model="firstName" type="text"/>
    <br>
    Last name:<input ng-model="lastName" type="text"/>
    <br>
    Hello {{firstName}} {{lastName}}
  </body>
</html>
3. Initializing the model using an Angular controller, defined with a global function.
   <html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
    <script>
      function NameCtrl($scope){
        $scope.firstName = 'John';
        $scope.lastName = 'Smith';
      }
    </script>
  </head>
  <body ng-controller="NameCtrl">
    First name:<input ng-model="firstName" type="text"/>
    <br>
    Last name:<input ng-model="lastName" type="text"/>
    <br>
    Hello {{firstName}} {{lastName}}
  </body>
</html>

No comments:

Post a Comment