Post
Ask Question

Create Controller in AngularJS with Routing

You search using Name textbox on both view1 and view2.

Route.html

  1. <!DOCTYPE html>  
  2. <html >  
  3.     <head >  
  4.         <title>Factory</title>  
  5.     </head>  
  6.     <body data-ng-app="myApp">  
  7.         <div >  
  8.             <ul class="nav">  
  9.                 <li>  
  10.                     <a href="#View11"> view1 </a>  
  11.                 </li>  
  12.                 <li>  
  13.                     <a href="#View22"> view2 </a>  
  14.                 </li>  
  15.             </ul>  
  16.             <!-- placeholder forview -->  
  17.             <div data-ng-view=""></div>  
  18.         </div>  
  19.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>  
  20.         <script>  
  21. var demoApp = angular.module('myApp', []);  
  22. //Routing 
  23. demoApp.config(['$routeProvider',  
  24. function ($routeProvider)   
  25. {  
  26.     $routeProvider.  
  27.     when('/View11',   
  28.     {  
  29.         templateUrl: 'View1.html',  
  30.         controller: 'SimpleController'  
  31.     }).  
  32.     when('/View22',   
  33.     {  
  34.         templateUrl: 'View2.html',  
  35.         controller: 'SimpleController'  
  36.     }).  
  37.     otherwise({  
  38.         redirectTo: '/View11'  
  39.     });  
  40. }]);  
  41.   
  42. //Controller  
  43. demoApp.controller('SimpleController', function ($scope)   
  44. {  
  45.     $scope.customers = [  
  46.       { name: 'jahanzaib', city: 'Lahore' },  
  47.       { name: 'Aslam', city: 'Faislabad' },  
  48.       { name: 'Ali', city: 'Karachi' }  
  49.     ];  
  50.     $scope.addCustomer = function ()   
  51.     {  
  52.         $scope.customers.push(  
  53.         {  
  54.             name: $scope.newCustomer.name,  
  55.             city: $scope.newCustomer.city  
  56.         });  
  57.     };  
  58. });  
  59. </script>  
  60.     </body>  
  61. </html> 

View1.html

  1. <!DOCTYPE html>  
  2. <html  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <title></title>  
  6.     </head>  
  7.     <body>  
  8.         <h1>View1</h1>  
  9. Name:  
  10.   
  11.         <br />  
  12.         <input type="text" data-ng-model="name"/>  
  13.         <br />  
  14.         <ul>  
  15.             <li data-ng-repeat="cust in customers">{{cust.name | uppercase}} - {{cust.city}}</li>  
  16.         </ul>  
  17.     </body>  
  18. </html> 

View2.html

  1. <!DOCTYPE html>  
  2. <html  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <title></title>  
  6.     </head>  
  7.     <body>  
  8.         <h1>View2</h1>  
  9. Name:  
  10.   
  11.         <br />  
  12.         <input type="text" data-ng-model="name"/>  
  13.         <br />  
  14.         <ul>  
  15.             <li data-ng-repeat="cust in customers| filter : name">{{cust.name | uppercase}} - {{cust.city}}</li>  
  16.         </ul>  
  17.         <br />  
  18. Customer name :  
  19.   
  20.         <input type="text" data-ng-model="newCustomer.name"/>  
  21.         <br />  
  22. Customer City:  
  23.   
  24.         <input type="text" data-ng-model="newCustomer.city"/>  
  25.         <br />  
  26.         <button data-ng-click="addCustomer()">Add Customer</button>  
  27.     </body>  
  28. </html>