AngularJS Routing and ASP.net MVC

Question

I'm learning angular, I'm trying to use routes for the first time but something is wrong with it, this is not working:

This is my main view(UsingDirectivesWithDataBinding.cshtml):

@{
    Layout = null;
}

<html>
<head>    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script type="text/javascript" src="~/Scripts/angular-route.js"></script>
    <script type="text/javascript" src="~/Scripts/AngularFile.js"></script>
    <title>
        Using AngularJS Directives and Data Binding
    </title>
</head>
<body>

    <div data-ng-app="myApp" data-ng-controller="SimpleController">       
        <a href="#/view1"> View 1</a>
        <a href="#/view2"> View 2</a>
        <div data-ng-view=""></div>
    </div>

</body>
</html>

As you can see I have two links that call this route : '#/view2' or this one: '#/view1' but it's taking me to the Index page of Home Controller instead of stay in the same page and show the Partial Views I want to display. This is the code I have in Home Controller:

public ActionResult UsingDirectivesWithDataBinding()
        {
            return View();
        }

        public PartialViewResult View1()
        {
            return PartialView();
        }

        public PartialViewResult View2()
        {
            return PartialView();
        }

This is my Javascript file(AngularFile.js):

var app = angular.module("myApp", ["ngRoute"]);
app.controller("SimpleController", function ($scope) {
    $scope.firstName = "John";
    $scope.lastname = "Doe";
    $scope.customers = [
        { name: "Dave Jones", city: "Phoenix" },
        { name: "Jamie Riley", city: "Atlanta" },
        { name: "Heedy Rowt", city: "Memphis" },
        { name: "Thomas Winter", city: "Seattle" }
    ];
});

app.config(function ($routeProvider) {
    $routeProvider.when("/view1", {
        templateUrl: "/Home/View1",
        controller: "SimpleController"
    })
    .when("/view2", {
        templateUrl: "/Home/View2",
        controller: "SimpleController"
    })
    .otherwise({redirectTo : "/view1"})
})

Why is not working?

Possible duplicate of [URL hash-bang (#!/) prefix instead of simple hash (#/)](http://stackoverflow.com/questions/41226122/url-hash-bang-prefix-instead-of-simple-hash) — Mistalis, Jan 25 '17 at 12:46

score 1 · Accepted Answer · answered Jan 23 '17 at 06:42

1

Angular 1.6 uses a new hashPrefix, in your hrefs try to change #/view1 to #!/view1.

answered Jan 23 '17 at 06:42

darron614

893
7
15

score 0 · Answer 2 · edited May 23 '17 at 10:29

I think you are confusing between server-side(ASP.net) routing and client-side(Angular.js) routing. Not sure if you are trying to render the view from ASP.net and serve that to angular router. If yes, then unfortunately, this will not work. Angular router will not make a server call for getting the view. The view has to be readily available on client-side as a template (HTML static files) and angular will render the data (after fetching from API) on the template.

So basically this line templateUrl: "/Home/View1" will become templateUrl: "/Home/View1.html" where View1.html is a static file (angular template).

For more details check this out > AngularJs routing with Asp.Net Mvc

AngularJS Routing and ASP.net MVC

2 Answers2