Tutorialspoint

Angularjs Programming Examples

CIS360 Class Assignment

<!doctype html>
<html ng-app="demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script type="text/javaScript">
    angular.module('demo', [])
    .controller('Hello', function($scope, $http) {
        
        
      $scope.buttonTranslate = function(event) {
       $http.get('https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=' + $scope.tl + '&dt=t&q=' + $scope.textToTranslate).
       then(function(response) {
          $scope.tranlation = response.data[0][0][0];
       });
      }
    });

</script>
</head>
<body>
<div ng-controller="Hello">

Text to Translate:  <input ng-model="textToTranslate" /><br /><br />
Target Language: <select name="users" ng-model="tl">
<option value="fr">French</option>
<option value="de">German</option>
<option value="ja">Japanese</option>
<option value="es">Spanish</option>
</select><br/><br/>


<button ng-click="buttonTranslate()">Translate</button>


<h1>{{tranlation}}</h1>
</div>
</body>
</html>

Online AngularJS Editor

<!doctype html>
<html ng-app="demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script type="text/javaScript">
angular.module('demo', [])
.controller('Hello', function($scope, $http) {
$scope.buttonTranslate = function(event) {
$http.get('https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=' + $scope.t1 +'&dt=t&q=' +$scope.textToTranslate).
then(function(response) {
$scope.greeting = response.data[0][0][0];
});
}
});

</script>
</head>
<body>
<div ng-controller="Hello">

Text to translate: <input ng-model="textToTranslate" /><br />
<button ng-click="buttonTranslate()">translation</button>
Target Language: <select name="users" ng-model="t1">
    <option value="fr">French</option>
    <option value="de">German</option>
    <option value="ja">Japanese</option>
    <option value="es">Spanish</option>
    <option value="ru">Russian</option>
</select> <br/> <br/>
<h1>{{greeting}}</h1>
</div>
</body>
</html>

Online AngularJS Editor

<!doctype html>
<html ng-app>
  <head>
    <script src="C:\Users\Ольга\Documents\Visual Studio 2010\Projects\курсач Тригуб\js.html"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>

</div>
    <!--область действия контроллера-->
        <div ng-controller='myController'>
 
         <table class='table'>
             <thead>
                 <tr>
                     <th>Номер зачетки</th>
                     <th>Фамилия</th>
                     <th>Имя</th>
                     <th>Отчество</th>
                 </tr>
             </thead>
             <tbody>
                 <tr ng-repeat='student in students'>
                     <td>{{student.[Номер зачетки]}}</td>
                     <td>{{student.[Фамилия]}}</td>
                     <td>{{student.[Имя]}}</td>
                     <td>{{student.[Отчество]}}</td>
                 </tr>
             </tbody>   
         </table>
    
        </div>
 
    <!--подключение фреймворка AngularJS-->
    <script src="angular/angular.min.js"></script>
    <!--подключение скрипта-->
    <script src='script.js'></script>
  </body>
</html>

Online AngularJS Editor

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
      <h2>Angular Js sample application</h2>
      <div ng-app>
          <table border="0">
              <tr>
                  <td> <input type="checkbox" ng-model="enableDisableButton">Disable Button </td>
                  <td><button ng-disabled="enableDisableButton">click me </button> </td>
                  
              </tr>
          </table>
          
      </div>
    
  </body>
</html>

Online AngularJS Editor

<!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

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  <script type="text/javascript">
		var m1 =angular.module("AppModule",[]);

		m1.controller("c1", f1);

		function f1($scople){
			$scope.message ="raj kumar";
		}


	</script>
</head>
<body ng-controller="c1">
 {{message}}
</body>
</html>

Online AngularJS Editor

<!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 place name here">
      <hr>
      <h1>welcome to {{yourName}} !{{yourName}}</h1>
    </div>
  </body>
</html>

Online AngularJS Editor

<!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

<!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 Name">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

Online AngularJS Editor

<!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>

1 2 3 4 5 6 7 ... 63 Next
Advertisements
Loading...

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