Tutorial 30 - AngularJS works via Bootstrap example

AngularJS works via Bootstrap example

This example will help you know about using Bootstrap in AngularJS page. Ok the same with HTML page, to use Bootstrap you must refer to css library of Bootstrap

Of course you must refer AngularJS also:

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

Following directives will be used in this example.

ng-controller
ng-submit
ng-pattern
ng-model
ng-trim
ng-minlength
ng-maxlength
required

and use class="col-md-4" in Bootstrap

 <!doctype html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <title>How to build a form in angularjs</title>  
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>  
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">  
   <style>  
     .ng-invalid {  
       color: red;  
     }  
     td {  
       padding-right: 30px;  
     }  
   </style>  
   <script>  
     angular.module('myapp', [])  
         .controller('ExampleController', ['$scope', function ($scope) {  
           $scope.login = function () {  
             if ($scope.username == 'admin' && $scope.password == '123456') {  
               alert('Login successfully!');  
             }  
             else {  
               alert('Login failed!');  
             }  
           };  
         }]);  
   </script>  
 </head>  
 <body ng-app="myapp">  
   <h1>AngularJS form via bootstrap example</h1>  
   <form ng-controller="ExampleController" name="myForm" ng-submit="login()">  
     <div class="container">  
       <!-- Example row of columns -->  
     <div class="row">  
       <div class="col-md-4">  
         <h2>Login form</h2>  
         User name: <br/>  
         <input type="text" name="userName" ng-pattern="/^([a-zA-Z0-9]+)$/" ng-model="username" ng-trim="true" required ng-minlength="3" ng-maxlength="10"/> <br/>  
         Password: <br/>  
         <input type="text" name="userPass" ng-model="password" required ng-minlength="3" ng-maxlength="10" ng-trim="true"> <br/><br/>  
         <input type="submit" value='Login'/>  
       </div>  
       <div class="col-md-4">  
         <h2>Column 2</h2>  
         <p>Column 2 content</p>  
         <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>  
         </p>  
       </div>  
       <div class="col-md-4">  
         <h2>Column 3</h2>  
         <p>Column 3 content</p>  
         <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a>  
         </p>  
       </div>  
     </div>  
 </form>  
 </body>  
 </html>

AngularJS Tutorials

Pages

Tutorial 30 - AngularJS works via Bootstrap example

AngularJS works via Bootstrap example

1 comment:

AngularJS tags

Popular Posts