Angularjs Programming Examples

Angular Material Dialogs

angularjs

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('dialogController', dialogController);

         function dialogController ($scope, $mdDialog) {
            $scope.status = '';
            $scope.items = [1,2,3,4,5];
            $scope.showAlert = function(ev) {
               $mdDialog.show (
                  $mdDialog.alert()
                     .parent(angular.element(document.querySelector('#dialogContainer')))
                     .clickOutsideToClose(true)
                     .title('TutorialsPoint.com')
                     .textContent('Welcome to TutorialsPoint.com')
                     .ariaLabel('Welcome to TutorialsPoint.com')
                     .ok('Ok!')
                     .targetEvent(ev)
               );
            };
			
            $scope.showConfirm = function(event) {
               var confirm = $mdDialog.confirm()
                  .title('Are you sure to delete the record?')
                  .textContent('Record will be deleted permanently.')
                  .ariaLabel('TutorialsPoint.com')
                  .targetEvent(event)
                  .ok('Yes')
                  .cancel('No');
               $mdDialog.show(confirm).then(function() {
                  $scope.status = 'Record deleted successfully!';
               }, function() {
                  $scope.status = 'You decided to keep your record.';
               });
            };
			
            $scope.showCustom = function(event) {
               $mdDialog.show ({
                  clickOutsideToClose: true,
                  scope: $scope,        
                  preserveScope: true,           
                  template: '<md-dialog>' +
                              '  <md-dialog-content>' +
                              '     Welcome to TutorialsPoint.com' +
                              '  </md-dialog-content>' +
                              '</md-dialog>',
                  controller: function DialogController($scope, $mdDialog) {
                     $scope.closeDialog = function() {
                        $mdDialog.hide();
                     }
                  }
               });
            };
         }                 
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "dialogContainer" ng-controller = "dialogController as ctrl"
         layout = "row" ng-cloak>
         <md-content>
            <h4>Standard Alert</h4>
            <md-button class = "md-primary md-raised"
               ng-click = "showAlert($event)" flex = "100"  flex-gt-md = "auto">
               Alert
            </md-button>
            
            <h4>Confirm Dialog Box</h4>
            <md-button class = "md-primary md-raised" ng-click = "showConfirm($event)"
               flex = "100"  flex-gt-md = "auto">
               Confirm
            </md-button>
            
            <h4>Custom Dialog Box</h4>
            <md-button class = "md-primary md-raised" ng-click = "showCustom($event)"
               flex = "100"  flex-gt-md = "auto">
               Custom
            </md-button>
            
            <div ng-if = "status">
               <br/>
               <b layout = "row" layout-align = "center center" class = "md-padding">
                  {{status}}
               </b>
            </div>
            
         </md-content>	 
      </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>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
      {{ angular.isArray([2,2,2]) ? 'Correcto' : 'No es un array'  }}
    </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>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

AngularJS Includes

angularjs

<!--you can include HTML content using the ng-include directive:-->
<!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>
        <!--Include html File-->
        <div ng-include="'myFile.htm'"></div> 
        
        <!--Include AngularJS File-->
        <div ng-app="myApp" ng-controller="customersCtrl"> 
          <div ng-include="'myTable.htm'"></div>
        </div>
        
        <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function($scope) {
            $scope.names = [
                {Name: 'Dj', Country: 'India'},
                {Name: 'SJ', Country: 'Canada'}
            ];
        });
        </script>
    </div>
  </body>
</html>

Angular API - lowercase, uppercase, String , Number

angularjs

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{x1}}</p>
        <p>{{x2}}</p>
    </div>
    
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope){
            $scope.x1 = "DJosh";
           // $scope.x2 = angular.lowercase($scope.x1); //Check Lowercase!
           // $scope.x2 = angular.uppercase($scope.x1); //Check Uppercase!
           // $scope.x2 = angular.isString($scope.x1); //Check String or not!
        // $scope.x2 = angular.isNumber($scope.x1); //Check Number or not!
        });
        
    </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">
      <hr>
      <h1>Hello {{yourName}}!</h1>
    </div>
  </body>
</html>

ng-disabled directives DOM

angularjs

<!--The ng-disabled directive binds AngularJS application data to the disabled attribute of HTML elements.-->
<!-- ng-disabled -->
<!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 ng-app="myApp" ng-init="mySwitch=true">-->
    <!--    <button ng-disabled="mySwitch">Click Me</button>-->
    <!--    <input type="checkbox" ng-model="mySwitch"/>Button</div>-->
        
    <!--    <p>{{ mySwitch }}</p>-->
    
<!-- ng-show-> The ng-show directive shows or hides an HTML element -->
<div ng-app="" ng-init="switch=true">
    <p ng-show="switch">i am visible</p>
    <!--<p ng-show="switch:false">i am invisible</p>-->
    <p ng-hide="true">i am invisible</p>
    <input type="checkbox" ng-model="switch">Check1
    
</div>
<!-- ng-hide directive->The ng-hide directive hides or shows an HTML element. -->

  </body>
</html>

angular select and dropdown-(ng-options)

angularjs

<!doctype html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
  </head>
  <body>
      
<!-- Angular Dropdown by ng-options-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
<!--    <select ng-model="selectname" ng-options="x for x in names"></select>-->
<!--</div>-->

<!-- Angular Dropdown by ng-repeat-->
<!--<div ng-app="myApp" ng-controller="myCtrl">-->
<!--    <select>-->
<!--        <option>Select</option>-->
<!--        <option ng-repeat="x in names">{{x}}</option>-->
<!--    </select>-->
<!--</div>-->
<!--<script>-->
<!--    var app = angular.module('myApp', []);-->
<!--    app.controller('myCtrl', function($scope){-->
<!--        $scope.names = ["EMIL","APNS","NEON"]-->
<!--    });-->
<!--</script>-->

<!--data binding with select options. -->

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

<p>Select a car:</p>

<!--<select ng-model="selectedCar">-->
<!--<option ng-repeat="x in cars">{{x.model}}&nbsp;{{x.color}}</option>-->
<!--</select>-->

<!--Use Of object as data source for dropdown list -->
<!--<select ng-model="selectedCar" ng-options="x for (x, y) in cars">-->
<!--</select>-->

<!--dropdown list can also be a property of the value object-->
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>


<h1>You selected: {{selectedCar.brand}}</h1>
<h2>Model: {{selectedCar.model}}</h2>
<h3>Color: {{selectedCar.color}}</h3>

</div>

<!--<script>
// var app = angular.module('myApp', []);
// app.controller('myCtrl', function($scope) {
//     // $scope.cars = [
//     //     {model : "Ford Mustang", color : "red"},
//     //     {model : "Nissan GTR", color : "white"},
//     //     {model : "RangeRover", color : "black"}
//     // ];
//      $scope.cars = {
//         carA : "Ford Mustang",
//         carB : "Nissan GTR",
//         carC : "Range Rover"
//     }
// });
 </script>-->

<!--dropdown list can also be a property of the value object-->
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", color : "red"},
        car02 : {brand : "Fiat", model : "500", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
});
</script>

  </body>
</html>

Online AngularJS Editor

angularjs

<html>
   <head>
      <title>Angular JS Filters</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 = "new" ng-controller = "studentctrl">
         <table border = "0">
             
<tr>
    <td> Enter the First Name :</td>
    <td><input type="text" ng-model="student.firstname"</td>
    
</tr>
<tr>
    <td>Enter the Second Name :</td>
    <td><input type="text" ng-model="student.secondname"</td>
</tr>
<tr>
    <td>Enter Fees :</td>
    <td><input type="text" ng-model="student.fee"</td>
</tr>
<tr>
    <td>Enter Subject :</td>
    <td><input type="text" ng-model="subject"</td>
</tr>
</table>
<br/>
<table border="1">
<tr>
    <td>Uppercase:</td><td>{{student.FullName() | uppercase</td>
</tr>
<tr>
    <td>Lowercase:</td><td>{{student.FullName() | lowercase</td>
</tr>
</table>
</div>
<script>
    var neww=angular.module("new",[]);
    neww.controller('studentctrl',function($scope)
    {
        $scope.student={
            firstname: "ranjith",
            secondname: "kumar",
            fee="100",
            
        subject:[
            {name:'maths', mark:60}
            {name:'phy', mark:70}
            {name:'chm',mark:80}],
            
            
        FullName:function()
        {
            var stnd ;
            stnd= $scope.student;
            return stnd.firstname+""+stnd.secondname;
        }
        };
    });
</script>

            
      
   </body>
</html>

Online AngularJS Editor

angularjs

<html>
   <head>
      <title>Angular JS Filters</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 = "new" ng-controller = "studentctrl">
         <table border = "0">
             
<tr>
    <td> Enter the First Name :</td>
    <td><input type="text" ng-model="student.firstname"</td>
    
</tr>
<tr>
    <td>Enter the Second Name :</td>
    <td><input type="text" ng-model="student.secondname"</td>
</tr>
<tr>
    <td>Enter Fees :</td>
    <td><input type="text" ng-model="student.fee"</td>
</tr>
<tr>
    <td>Enter Subject :</td>
    <td><input type="text" ng-model="subject"</td>
</tr>
</br>
<script>
    var neww=angular.module("new",[]);
    neww.controller('studentctrl',function($scope)
    {
        $scope.student={
            firstname: "ranjith",
            secondname: "kumar",
            fee="100",
            
        subject:[
            {name:'maths', mark:60}
            {name:'phy', mark:70}
            {name:'chm',mark:80}],
            
            Full Name:
        function()
        {
            var stnd ;
            stnd= $scope.student;
            return stnd.firstname+""+stnd.secondname;
        }
        };
    });

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

Follow

Newsletter