Routing with angularjs in Mvc application

Question

I have been continously trying to implement routing in Angularjs with Mvc 4.0 project but I am not able to do it. I have created a empty MVC 4.0 project and added a controller "HomeController". Then I added a folder in Views with name Home having three views. One is index which opens when we run application as in route config we have route for homecontroller and Index Action.So, basically assuming the index page as the main page in Singlepage application, I have defined some code in the index page as given in 6oish book enter link description here.

Index. CShtml

@{
    ViewBag.Title = "Index";
}
<style>
    .container {
        float: left;
        width: 100%;
    }
</style>
<script src="~/Scripts/angular.min.js"></script>

<h2>Practising Angular</h2>

    <a href="#/">List</a>
<a href="#/Edit">Edit</a>
<div ng-app="demoApp">
    <div class="container">
        <div ng-view=""></div>
    </div>
</div>


<script>
    var demoApp = angular.module('demoApp', []);

    demoApp.config(function ($routeProvider) {
        $routeProvider.when('/', { controller: 'SimpleController', templateUrl: 'Home/List' })
                      .when('/Edit', { controller: 'SimpleController', templateUrl: 'Home/Edit' })
                      .otherwise({ redirectTo: '/' });
    });

    demoApp.controller('SimpleController', function ($scope) {
        $scope.customers = [{ name: 'Dave jones', city: 'Phoenix' },
                            { name: 'Jhon Dena', city: 'Mexico' },
                            { name: 'Bradshaw', city: 'WashingTon' },
                            { name: 'Rey Mysterio', city: 'Brazil' },
                            { name: 'Randy', city: 'California' }, ];
    });

    $scope.addCustomer = function () {
        $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city })
    };
</script>

Now, I need two more Views which are defined in the above route and they are as follows:

List.cshtml

@{
    ViewBag.Title = "List";
}

<h2>Listing the users in order </h2>

<div class="container">
    Name:&nbsp;<input type="text" ng-model="filter.name" />
    <ul>
        <li ng-repeat="objCust in customers | filter:filter.name">{{objCust.name }}-{{objCust.city}}
        </li>
    </ul>
    Customer Name:<br />
    <input type="text" ng-model="newCustomer.name" /><br />
    Customer city:<br />
    <input type="text" ng-model="newCustomer.city" /><br />
    <button ng-click="addcustomer()">Add customer</button>
</div>

and Last one is

Edit.cshtml

@{
    ViewBag.Title = "Edit";
}

<h2>Edit  the particular user. Things are under construction</h2>


<h2>Listing the users in order </h2>

<div class="container">
    Name:&nbsp;<input type="text" ng-model="city" />
    <ul>
        <li ng-repeat="objCust in customers | filter:city">{{objCust.name }}-{{objCust.city}}
        </li>
    </ul>

</div>

Here is the home controller

namespace Routing_Angular.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult List()
        {
            return PartialView();
        }
        public ActionResult Edit()
        {
            return PartialView();
        }
    }
}

I am attaching a image to show the Project structure.

I ma running the application, I can see the empty page where it is written "Practising Angular" with two anchor tags "List" and "Edit". I am not getting any change on changing the url.I added "/" in the url and It is not changed . then I added a "/Edit". then also I found no change. I have added anchor tags at the top in index page then also there is no change. only url gets changed. Please guide me where I am doing wrong.

Answer 1

There are a few things you need to fix in your views and angular code. First of all, when defining the SimpleController, you have defined the addCustomer function outside the controller.

You should have the following controller definition:

demoApp.controller('SimpleController', function ($scope) {
    $scope.customers = [{ name: 'Dave jones', city: 'Phoenix' },
        { name: 'Jhon Dena', city: 'Mexico' },
        { name: 'Bradshaw', city: 'WashingTon' },
        { name: 'Rey Mysterio', city: 'Brazil' },
        { name: 'Randy', city: 'California' }, ];

    $scope.addCustomer = function () {                
        $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
    };
});

Then in your list view, the function declared for the "Add Customer" button is wrong, as it is case sensitive. You should have addCustomer instead of addcustomer (with capital C, as defined in your SimpleController):

<button ng-click="addCustomer()">Add customer</button>

Also, I am not sure which version of angular you are using, but from version 1.2.0, routing needs to be loaded as a separate module (see this error). You can install it following these instructions, adding the script angular-route.min.js and declaring your module as:

var demoApp = angular.module('demoApp', ['ngRoute']);

You will know that you need to load the routing module because you will see an exception in the browser console when the initial Index view loads. (It's always a good idea to check the browser console for JS errors anyway)

That should be everything, hope it helps!