在asp.net mvc4角路由心不是工作，为什么？路由、不是、工作、asp

2023-09-14 00:19:50 作者：此女丶有点萌

我是新与角＆安培;努力实现asp.net的MVC应用4路由。我的控制器是工作和放大器;路由进行更新，但不负载信息视图。任何人都知道为什么吗？

JobParsing.js

  VAR JobParsing = angular.module（'JobParsing'，[]）;JobParsing.controller（'LandingPageController'，LandingPageController）;VAR configFunction =功能（$ routeProvider）{    $ routeProvider。        当（'/ RouteOne公司'，{            templateUrl：家/一个人，            控制器：'LandingPageController        }）        。当（'/ routeTwo'，{            templateUrl：家/二'，            控制器：'LandingPageController        }）;};。configFunction $注射='$ routeProvider'];JobParsing.config（configFunction）;

LandingPageController.js

  VAR LandingPageController =功能（$范围）{    $ scope.models = {        helloAngular：我的工作！你好！'    };};。LandingPageController $注射='$范围'];

_layout

 ＆LT;！DOCTYPE HTML＆GT;＆LT; HTML LANG =EN数据-NG-应用=JobParsing数据-NG-控制器=LandingPageController＆GT;＆LT; HEAD＆GT;    ＆LT;间的charset =UTF-8/＆GT;    ＆LT;标题数据-NG-绑定=models.helloAngular＆GT;＆LT; /标题＆GT;＆LT; /头＆GT;＆LT;身体GT;    @RenderBody（）    ＆LT;输入类型=文本数据-NG-模式=models.helloAngular/＆GT;    ＆LT; H1＆GT; {{models.helloAngular}}＆LT; / H1＆GT;    ＆LT; UL＆GT;        ＆LT;立GT;＆LT; A HREF =/＃/ RouteOne公司＆GT;路线的One＆LT; / A＆GT;＆LT; /李＆GT;        ＆LT;立GT;＆LT; A HREF =/＃/ routeTwo＆GT;路线二＆LT; / A＆GT;＆LT; /李＆GT;    ＆LT; / UL＆GT;    ＆LT; DIV数据-NG-视图=＆GT;＆LT; / DIV＆GT;    ＆LT;脚本SRC =〜/脚本/ angular.js＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本SRC =〜/脚本/角route.js＆GT;＆LT; / SCRIPT＆GT;    @ Scripts.Render（〜/包/ JobParsing）＆LT; /身体GT;＆LT; / HTML＆GT;

One.cshtml（Two.cshtml相同）

 ＆LT; H2＆GT;的One＆LT; / H＆GT;

解决方案

我不知道为什么你使用。$注射。您可以使用正常injection

在这里，您可以用partialviews看到一个解决方案：

_Layout.cshtml

 ＆LT;！DOCTYPE HTML＆GT;＆LT; HTML NG-应用=JobParsingAppNG控制器=lpCtrl＆GT;＆LT; HEAD＆GT;   ＆LT;间的charset =UTF-8/＆GT;   ＆LT;标题＆GT;＆LT; /标题＆GT;＆LT; /头＆GT;＆LT;身体GT;    ＆LT; DIV＆GT;        ＆LT; H1＆GT; {{}测试}＆LT; / H1＆GT;        @RenderBody（）        ＆LT;输入类型=文本NG模型=models.helloAngular            NG-模式选项={getterSetter：真正}/＆GT;        ＆所述; H1＆GT; {{models.helloAngular（）}}＆下; / H1＆GT;        ＆LT; BR /＆GT;        ＆LT; UL＆GT;            ＆LT;立GT;＆LT; A HREF =＃/ RouteOne公司＆GT;路线的One＆LT; / A＆GT;＆LT; /李＆GT;            ＆LT;立GT;＆LT; A HREF =＃/ routeTwo＆GT;路线二＆LT; / A＆GT;＆LT; /李＆GT;        ＆LT; / UL＆GT;        ＆LT; DIV NG-视图＆gt;        ＆LT; / DIV＆GT;    ＆LT; / DIV＆GT;    ＆LT;脚本SRC =〜/脚本/ angular.js＆GT;＆LT; / SCRIPT＆GT;    ＆LT;脚本SRC =〜/脚本/角route.js＆GT;＆LT; / SCRIPT＆GT;    @ Scripts.Render（〜/包/ JobParsing）＆LT; /身体GT;＆LT; / HTML＆GT;

JobParsing.js

  VAR JobParsing = angular.module（'JobParsingApp'，['ngRoute'，'JobParsingApp.LandingPageController']）;JobParsing.config（['$ routeProvider'，'$ locationProvider'，    功能（$ routeProvider，$ locationProvider）{        $ routeProvider。        当（'/ RouteOne公司'，{                templateUrl：'/主页/单                //控制器：'LandingPageController'＆LT;  - 他们是局部的，你不需要        }）。        当（'/ routeTwo'，{                templateUrl：'/主页/双'                //控制器：'LandingPageController'＆LT;  - 一样的...用完整发表意见的时候调整你的路由。        }）。        除此以外（{            redirectTo：'/'        }）;    }]）;

LandingPageController.js

  VAR LandingPageController = angular.module（'JobParsingApp.LandingPageController'，[]）;LandingPageController.controller（'lpCtrl'，['$范围'，函数（$范围）{   $ scope.test ='测试数据';   VAR _helloAngular ='我的工作！你好！';   $ scope.models = {      helloAngular：功能（newMsg）{         如果（angular.isDefined（newMsg））{           _helloAngular = newMsg;         }         返回_helloAngular;      }   };}]）;

BundleConfig.cs

...

  bundles.Add（新ScriptBundle（〜/包/ JobParsing）。包括（    〜/脚本/ JobParsing / LandingPageController.js    〜/脚本/ JobParsing / JobParsing.js））;

...

HomeController.cs

 公共类HomeController的：控制器{    公众的ActionResult指数（）    {        返回查看（）;    }    公共PartialViewResult一（）    {        返回PartialView（）;    }    公共PartialViewResult二（）    {        返回PartialView（）;    }}

Index.cshtml

 ＆LT; H1＆GT;指数＆LT; / H1＆GT;

One.cshtml

 ＆LT; H2＆GT;的One＆LT; / H＆GT;

Two.cshtml

 ＆LT; H2＆GT;二＆LT; / H＆GT;

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 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