Please note, this is a STATIC archive of website www.tutorialspoint.com from 11 May 2019, cach3.com does not collect or store any user information, there is no "phishing" involved.
Tutorialspoint
Home
Q/A
Tools
Coding Ground
Current Affairs
UPSC Notes
Online Tutors
Code Examples
Whiteboard
Net Meeting
Articles
Library
Videos
eBooks

AngularJS Column

angularjs 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table>
  <tr >
    <td>Name </td>
    <td>Country</td>
  </tr>
<tr >
    <td>Name </td>
    <td>Country</td>
  </tr>
<tr >
    <td>Name </td>
    <td>Country</td>
  </tr>
</table>

</div>



</body>
</html>

Angular Service,factory and providers

angularjs 

<!doctype html>
<html ng-app="angular-app2">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script>
        
        var app=angular.module("angular-app2",[]);
        // app.controller('emp',["$scope",function($scope,calcFactory){
        //     $scope.a=67;
        //     $scope.b=89;
        //     $scope.doSum=function(){
        //       $scope.sum=parseInt($scope.a)+parseInt($scope.b);  
        //     };
            
        // }]);
        
        
        app.controller('emp',["$scope",'calcFactory',function($scope,calcFactory){
            $scope.a=67;
            $scope.b=89;
            $scope.doSum=function(){
                //$scope.sum=calcFactory.getSum($scope.a,$scope.b);
               calcFactory.getSum($scope.a,$scope.b,function(result){
                 $scope.sum=result;
                });
                
            };
            
        }]);
        
        app.factory('calcFactory',['$http','$log',function($http,$log){
            $log.log('instantiating calcFactory..');
            var oCalcService={};
            // oCalcService.getSum=function(a,b){
            //     return parseInt(a)+parseInt(b);
            // };
            
           //or
           // oCalcService.getSum=function(a,b,cb){
           //  var s=parseInt(a)+parseInt(b);
           //  cb(s);
           // };
           
           
           //Rest Service
           
           
           
            return oCalcService;
            
        }]);
    </script>
  </head>
  <body>
    <div ng-controller='emp'>
      value of a is {{a}}, Change here <input type="text" ng-model="a"><br>
      value of b is {{b}}, Change it to <input type="text" ng-model="b"><br>
      
      <hr>
      
      Sum is {{sum}}
      <button type="button" ng-click="doSum()">Calculate Sum</button>
    </div>
  </body>
</html>

One way One Time and Two Way binding

angularjs 

<!doctype html>
<html ng-app="angular-app1">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    
    
    <script>
        
    var app =angular.module("angular-app1",[]);
        app.controller('student',["$scope",function($scope){
            $scope.x=50;
            $scope.y=45;
        }]);
        
        app.controller('calcSum',["$scope",function($scope){
            $scope.doSum=function(){
                $scope.sum=parseInt($scope.x)+parseInt($scope.y);
            }
        }]);
        
    </script>
    
  </head>
  <body>
    <div ng-controller="student">
        The value of x is {{x}}, <input type="text" ng-model="x"> and <br>
        The value of y is {{y}} <input type="text" ng-model="y"> and <br>
        <hr>
        
        The value of x is <span ng-bind="x"></span><br>
        The value of y is <span ng-bind="y"></span>
        <div ng-controller="calcSum">
           <div><button type="button" ng-click="doSum()">Calculate Sum</button></div> 
            The Sum of X and Y is {{sum}}
            
            <hr>
            Intial value of x and y are {{::x}} and {{::y}}
        </div>
        
    </div>
  </body>
</html>

Angular name input

angularjs 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
 
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>

</div>

</body>
</html>

Angular

angularjs 

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

Online AngularJS Editor

angularjs 

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
<body ng-app="myApp">
<h1>Book your Tickets</h1>
<h>From:<input type="text" ng-model="frm"><br>
<br><h>To:<input type="text" ng-model="dest"><br>
<br><h>Date:<input type="date" ng-model="date">


<p><a href="#/!book">Book</a></p>


<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/book", {
        templateUrl : "bookdet.htm"
    
    });
});
</script>

</body>
</html>
</html>

Online AngularJS Editor

angularjs 

<html>
   
   <head>
      <title>Angular JS Controller</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "studentController">
         Enter first name: <input type = "text" ng-model = "student.firstName"><br><br>
         Enter last name: <input type = "text" ng-model = "student.lastName"><br>
         <br>
         
         You are entering: {{student.fullName()}}
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

Online AngularJS Editor

angularjs 

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
       <input type="text" ng-model="yourName" placeholder="Enter a name here" required>
      <hr>
      <label>password:</label>
      <input type="password" ng-model="password" placeholder="Enter password" required>
      <hr>
      
      <input type="Submit" value="Submit">
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

Angular v1.3.3 Practive

angularjs 

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope) {
            $scope.records = [
                "Alfreds Futterkiste",
                "Berglunds snabbköp",
                "Centro comercial Moctezuma",
                "Ernst Handel"
            ]
            
            $scope.values = [
                {
                    myvalue: 1,
                    mytext: "hello",
                    myjob: "UI"
                },
                {
                    myvalue: 2,
                    mytext: "hello friend",
                    myjob: "UI Dev"
                }
            ]
        })
    </script>
  </head>
  <body ng-app="myApp" ng-controller="myCtrl">
    <div>
      <label>Name:</label>
      <h1 ng-repeat="x in records">{{x}}</h1>
      <p ng-repeat="y in values">{{y.mytext}}</p>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

sahithitest

angularjs 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
}

* {
    box-sizing: border-box;
}

/* Add padding to containers */
.container {
    padding: 16px;
    background-color: white;
}

/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}

/* Overwrite default styles of hr */
hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}

/* Set a style for the submit button */
.registerbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}

.registerbtn:hover {
    opacity: 1;
}

/* Add a blue text color to links */
a {
    color: dodgerblue;
}

/* Set a grey background color and center the text of the "sign in" section */
.signin {
    background-color: #f1f1f1;
    text-align: center;
}
</style>
</head>
<body>

<form action="/action_page.php">
  <div class="container">
    <h1>Personal Details</h1>
    <p>Please fill in this form to create an account.</p>
    <hr>

    <label for="Name"><b>Name</b></label>
    <input type="text" placeholder="Name" name="Name" required>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="Mobile"><b>Mobile</b></label>
    <input type="Num" placeholder="Enter Mobile" name="Mobile" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
    <hr>
    <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>

    <button type="submit" class="registerbtn">Register</button>
  </div>
  
  <div class="container signin">
    <p>Already have an account? <a href="#">Sign in</a>.</p>
  </div>
</form>

</body>
</html>

Previous 1 ... 4 5 6 7 8 9 10 ... 64 Next
Advertisements
Loading...
img img img img img img

Follow

© Copyright 2019. All Rights Reserved.

Newsletter

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.