在asp.net mvc4角路由心不是工作，为什么？ [英] Angular routing isnt work in asp.net mvc4, why?
本文介绍了在asp.net mvc4角路由心不是工作，为什么？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新与角＆安培;努力实现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;
解决方案
我不知道为什么你使用。$注射。您可以使用正常<一个href=\"http://stackoverflow.com/questions/18698963/use-of-inject-in-angular-js-in-controllers\">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
<h1>Index</h1>
One.cshtml
<h2>One</h2>
Two.cshtml
<h2>Two</h2>
这篇关于在asp.net mvc4角路由心不是工作，为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
