Angular routing isnt work in asp.net mvc4, why?

Question

I'm new with Angular & try to implement routing in asp.net mvc 4 application. My controller is work & routing make an update but dont load information to the view. Anybody know why?

JobParsing.js

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

JobParsing.controller('LandingPageController', LandingPageController);

var configFunction = function($routeProvider) {
    $routeProvider.
        when('/routeOne', {
            templateUrl: 'home/one',
            controller: 'LandingPageController'
        })
        .when('/routeTwo', {
            templateUrl: 'home/two',
            controller: 'LandingPageController'
        });
};
configFunction.$inject = ['$routeProvider'];

JobParsing.config(configFunction);

LandingPageController.js

var LandingPageController = function($scope) {
    $scope.models = {
        helloAngular: 'I work! Hello!'
    };
};

LandingPageController.$inject = ['$scope'];

_Layout

<!DOCTYPE html>
<html lang="en" data-ng-app="JobParsing" data-ng-controller="LandingPageController">
<head>
    <meta charset="utf-8" />
    <title data-ng-bind="models.helloAngular"></title>
</head>
<body>
    @RenderBody()

    <input type="text" data-ng-model="models.helloAngular" />
    <h1>{{models.helloAngular}}</h1>

    <ul>
        <li><a href="/#/routeOne">Route One</a></li>
        <li><a href="/#/routeTwo">Route Two</a></li>
    </ul>

    <div data-ng-view=""></div>

    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    @Scripts.Render("~/bundles/JobParsing")
</body>
</html>

One.cshtml ( Two.cshtml identical )

<h2>One</h2>

I would suggest the use of partialviews. I tried it and works without problems. — blfuentes
– blfuentes, Commented Oct 21, 2014 at 13:50
If you define partialviews like this in the routeconfig: when('/myapp/:partialViewId', { templateUrl: function (params) { return '/MainController/Action/' + params.partialViewId; }, }) and your MainController defines the method with the PartialViewResult should work. — blfuentes
– blfuentes, Commented Oct 21, 2014 at 14:08

Community · Accepted Answer · 2017-05-23 10:26:00Z

I don't get why you use the .$inject. You can use the 'normal' injection

Here you can see a solution using partialviews:

_Layout.cshtml

<!DOCTYPE html >
<html ng-app="JobParsingApp" ng-controller="lpCtrl">
<head>
   <meta charset="utf-8" />
   <title></title>
</head>
<body>
    <div>
        <h1>{{test}}</h1>
        @RenderBody()
        <input type="text" ng-model="models.helloAngular"
            ng-model-options="{ getterSetter: true }" />
        <h1>{{models.helloAngular()}}</h1>
        <br />
        <ul>
            <li><a href="#/routeOne">Route One</a></li>
            <li><a href="#/routeTwo">Route Two</a></li>
        </ul>

        <div ng-view>

        </div>

    </div>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    @Scripts.Render("~/bundles/JobParsing")
</body>
</html>

JobParsing.js

var JobParsing = angular.module('JobParsingApp', ['ngRoute', 'JobParsingApp.LandingPageController']);

JobParsing.config(['$routeProvider', '$locationProvider',
    function ($routeProvider, $locationProvider) {
        $routeProvider.
        when('/routeOne', {
                templateUrl: '/Home/One'
                //controller: 'LandingPageController' <-- they are partial, you don't need
        }).
        when('/routeTwo', {
                templateUrl: '/Home/Two'
                //controller: 'LandingPageController' <-- same... adapt your routing when using complete views.
        }).
        otherwise({
            redirectTo: '/'
        });
    }
]);

LandingPageController.js

var LandingPageController = angular.module('JobParsingApp.LandingPageController', []);

LandingPageController.controller('lpCtrl', ['$scope', function ($scope) {
   $scope.test = 'test data';

   var _helloAngular = 'I work! Hello!';
   $scope.models = {
      helloAngular: function (newMsg) {
         if (angular.isDefined(newMsg)) {
           _helloAngular = newMsg;
         }
         return _helloAngular;
      }
   };
}]);

BundleConfig.cs

...

bundles.Add(new ScriptBundle("~/bundles/JobParsing").Include(
    "~/Scripts/JobParsing/LandingPageController.js",
    "~/Scripts/JobParsing/JobParsing.js"
));

...

HomeController.cs

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

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

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

Index.cshtml

<h1>Index</h1>

One.cshtml

<h2>One</h2>

Two.cshtml

<h2>Two</h2>

cbass · Accepted Answer · 2014-10-21 13:35:11Z

0

You need to reference a file in templateUrl

templateUrl: 'home/two.html'

answered Oct 21, 2014 at 13:35

cbass

2,5583 gold badges29 silver badges39 bronze badges

4 Comments

BorHunter Over a year ago

I cant because using HomeController.cs where have ActionResult One()

cbass Over a year ago

What is you controller returning?

BorHunter Over a year ago

asp.net mvc controller return One.cshtml

cbass Over a year ago

you need to return html.

Collectives™ on Stack Overflow

Angular routing isnt work in asp.net mvc4, why?

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related