角路由在asp.net mvc4中不起作用，为什么？

Question

I'm new with Angular & try to implement routing in asp.net mvc 4 application. 我是Angular的新手，并尝试在asp.net mvc 4应用程序中实现路由。 My controller is work & routing make an update but dont load information to the view. 我的控制器正在工作，并且进行路由更新，但不将信息加载到视图中。 Anybody know why? 有人知道为什么吗？

JobParsing.js 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 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 ) One.cshtml（Two.cshtml相同）

<h2>One</h2>

Answer 1

您需要在templateUrl引用文件

templateUrl: 'home/two.html'

Answer 2

I don't get why you use the .$inject. 我不明白为什么您使用。$ inject。 You can use the 'normal' injection 您可以使用“正常” 注射

Here you can see a solution using partialviews: 在这里，您可以看到使用partialviews的解决方案：

_Layout.cshtml _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 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 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 BundleConfig.cs

... ...

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

... ...

HomeController.cs HomeController.cs

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

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

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

Index.cshtml Index.cshtml

<h1>Index</h1>

One.cshtml One.cshtml

<h2>One</h2>

Two.cshtml Two.cshtml

<h2>Two</h2>

角路由在asp.net mvc4中不起作用，为什么？

问题描述

2 个解决方案

解决方案1
0 2014-10-21 13:35:11

解决方案2
0 已采纳 2014-10-22 09:35:59

角路由在asp.net mvc4中不起作用，为什么？

问题描述

2 个解决方案

解决方案1 0 2014-10-21 13:35:11

解决方案2 0 已采纳 2014-10-22 09:35:59

解决方案1
0 2014-10-21 13:35:11

解决方案2
0 已采纳 2014-10-22 09:35:59