Here my MVC controller
- public ActionResult Index()
- {
- return View();
- }
- public ActionResult home()
- {
- return PartialView();
- }
And related view is like this
- <!DOCTYPE html>
-
- <html >
- <head>
- <meta name="viewport" content="width=device-width" />
- <title>Index</title>
- <script src="~/Scripts/angular.min.js"></script>
- <script src="~/Scripts/angular-route.min.js"></script>
- <script src="~/Scripts/scripts.js"></script>
- </head>
- <body data-ng-app="myApp">
- <div>
- <div>
- <h1>Main Page</h1>
- <base href="/" />
- <a href="home">home</a>
- </div>
-
- <div ng-view></div>
- </div>
-
-
- </body>
- </html>
And my script or angular controller is something like this..
- var app = angular.module("myApp", ["ngRoute"])
-
- app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
- $routeProvider.when('/home', {
- templateUrl: 'Home/home',
- controller: 'homecontroller'
- })
- .controller("homecontroller", function ($scope, $location) {
- $scope.message = "home controller";
- $scope.Name = "Junaid";
- })
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....
- @{
- Layout = null;
- }
- <h1>{{message}}</h1>
- <input type="text" ng-model="Name" />
- <h1>home page</h1>
If Iam wrong please correct me.Thnak you...