Junaid Syed

Junaid Syed

  • NA
  • 485
  • 130.8k

how to bind Data to HTML control in angularjs with routing.

Sep 6 2017 3:19 AM
Here my MVC controller
 
  1. public ActionResult Index()  
  2.       {  
  3.           return View();  
  4.       }  
  5.       public ActionResult home()  
  6.       {  
  7.           return PartialView();  
  8.       } 
 And related view is like this
  1. <!DOCTYPE html>  
  2.   
  3. <html >  
  4. <head>  
  5.     <meta name="viewport" content="width=device-width" />  
  6.     <title>Index</title>  
  7.      <script src="~/Scripts/angular.min.js"></script>  
  8.     <script src="~/Scripts/angular-route.min.js"></script>  
  9.     <script src="~/Scripts/scripts.js"></script>  
  10. </head>  
  11. <body data-ng-app="myApp">     
  12.     <div>  
  13.         <div>  
  14.             <h1>Main Page</h1>  
  15.             <base href="/" />  
  16.             <a href="home">home</a>  
  17.         </div>  
  18.   
  19.        <div ng-view></div>  
  20.     </div>  
  21.   
  22.   
  23. </body>  
  24. </html> 
 And my script or angular controller is something like this..
  1. var app = angular.module("myApp", ["ngRoute"])  
  2.      
  3.                  app.config(["$routeProvider""$locationProvider"function ($routeProvider, $locationProvider) {  
  4.                      $routeProvider.when('/home', {  
  5.                          templateUrl: 'Home/home',  
  6.                          controller: 'homecontroller'  
  7.                      })  
  8. .controller("homecontroller"function ($scope, $location) {  
  9.                      $scope.message = "home controller";  
  10.                      $scope.Name = "Junaid";  
  11.                  }) 
 In above code iam trying to bind $scope.Name into my html control in home page.And home page is partial page in mvc something like this....
  1. @{  
  2.     Layout = null;  
  3. }  
  4. <h1>{{message}}</h1>  
  5. <input type="text" ng-model="Name" />  
  6. <h1>home page</h1> 
 
 If Iam wrong please correct me.Thnak you...
 
 

Answers (3)