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

Online AngularJS Editor

angularjs 

<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
  <script type="text/javascript">
    var app = angular.module("sample",[]);
    app.controller("employee",function() {
      this.Name = "Sibani";
      this.Age = 25;
     this.Salary = 24000;
    });
  </script>
</head>

<body ng-app="sample" ng-controller="employee as emp">
  
    Hello {{emp.Name}}, Your age is {{emp.Age}} and you are earning as a salary {{emp.Salary}}!!
 
</body>

</html>

myangular

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>

name

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="Name" placeholder="Enter a name here">
      <hr>
      Hello {{Name}}!
    </div>
  </body>
</html>

Demo Project

angularjs 

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

google

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>

jawad

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="w4">
  <head>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    
    <style>
       *{

border: 1px solid red;
font-family: Lato;
padding: 0px;
}

html , body{

  height: 100%;


}

.labels{

 color: black;
 font-size: 16px;
 font-weight:bold;

 }

.header-text{
color: white;

font-family: Lato;
}
 

  input{

    border-color: white;

    border-width: 0px;
    
    border-radius:4%;

    width: 40%;

   

    margin-left: 130px;

    margin-top: 50px;

    margin-bottom: 50px;

   

   

  }

 

  input:focus {

        border-color: #e6e6e6;

        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgb(217, 217, 217);

        

    }

 .result-pane{

  margin-top:250px;
  border-color: green;
  height: 32%;
 }



.col-results{

height:190px;

margin-left: -10px;

margin-right: -10px;

margin-top: 10px;

background-color:rgba(230, 230, 230,0.8);

border-color:white;

border-radius: 2%;

}


.col-results:hover{


  border-color: rgba(230, 230, 230,0.8);

  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgb(204, 204, 204);




}
 

.inner-disp{

height: 80px;
border-color:green;
margin-left: -15px;
margin-right: -15px;

}

.inner-disp  span{
 font-size: 13px;
 padding:0px;

}
  
  .service-fields{
        
        display:table;
    
        background-color:#3e7ab6;
        
        border:0px solid #3e7ab6;
        
        border-radius: 3px;
         
        box-shadow:2px 2px 2px #03101d;
        
        margin-top:5px;
        
        font-size: 15px;
       color:white;
        
        
    }
.btn-darkblue{
margin-left: 0px;
background-color:#264d73;

}

.btn-darkblue:hover{

  background-color:#3e7ab6;
}
 
 
        
        
    </style>
    <script>
        
            var app=angular.module("w4",[]);
            
            app.run(function($rootScope){
                
                $rootScope.profiles=[{name:'Lourens'},{name:'Cody'},{name:'Miss Brentford'},];
                
            });
            
           app.controller('miniProfile', function($scope){
               
               
              // alert($scope.profiles);
               
               
           });
        
        
        app.directive('profilePaneDirective', function(){
            
            controller=function($scope){};
            
            return{
                
                
                template='<div class="col-md-3" ng-repeat="x in profiles"> '+
                
               '<div class="container-fluid col-results">' +
            
            '<div class="row">'+
             ' <div class="col-md-4">'+
      
              '</div>'+
      
              '<div class="col-md-8">'+
                '<div class="inner-disp">'+
                  '<div>'+ 
                    '<span class="col-md-8"><b class="labels">Distance:</b> 0.6 miles</span>'+
                    '<span class="col-md-4"><button type="button" class=" btn-sm btn-info btn-darkblue ">Profile</button></span>'+
                  '</div>'+
                  '<span style="display: block;"><b class="labels">Active: {{x.name}}</b> 5mins ago</span>'+
                  '<span style="display: block;"><b class="labels">Ratings:</b> Stars</span>'+
                                                    
                '</div>'+
                
              '</div>'+
      
      
            '</div>'+
           
          
            
            '<div class="row">'+
      
              '<b class="labels">Popular Services</b>'+
              '<div>'+
                '<div class="service-fields" draggable="true"> Hairdressing Its me </div>' +
                '<div class="service-fields"> Waxing </div>'+
                '<div class="service-fields"> Blow drying</div>'+
              '</div>'+
            '</div>'+
          '</div>'+


    '</div>'
    
    ,
    
                
                
                
            }
            
        });
    </script>
    
    
  </head>
  <body ng-controller="miniProfile">
    
    <div class="row result-pane" > 


    <div class="col-md-3">

        <div class="container-fluid col-results">
            
            <div class="row">
              <div class="col-md-4">
      
              </div>
      
              <div class="col-md-8">
                <div class="inner-disp">
                  <div> 
                    <span class="col-md-8"><b class="labels">Distance:</b> 0.6 miles</span>
                    <span class="col-md-4"><button type="button" class=" btn-sm btn-info btn-darkblue ">Profile</button></span>
                  </div>
                  <span style="display: block;"><b class="labels">Active:</b> 5mins ago</span>
                  <span style="display: block;"><b class="labels">Ratings:</b> Stars</span>
                                                    
                </div>
                
              </div>
      
      
            </div>
           
          
            
            <div class="row">
      
              <b class="labels">Popular Services</b>
              <div>
                <div class="service-fields" draggable="true"> Hairdressing It's me </div> 
                <div class="service-fields"> Waxing </div>
                <div class="service-fields"> Blow drying</div>
              </div>
            </div>
          </div>


    </div>

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

rrrrrr

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>

Practica1

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>
    <div>
      <label>Student Name: </label>
      <input type="text" ng-model="yourName"></br>
      </div>
      <div>
        <label>subject-1 Mark: </label> 
        <input type="text" ng-model="number">
      </div>
      <div>
        <label>subject-2 Mark: </label> 
        <input type="text" ng-model="number">
      </div>
      <div>
        <label>subject-3 Mark: </label>   
         <input type="text" ng-model="number">
      </div>
      
  </body>
</html>

Previous 1 ... 54 55 56 57 58 59 60 ... 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.