AngularJs路由无法正常工作 [英] AngularJs routing not working
本文介绍了AngularJs路由无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在学习mvc
i下载的代码试图实现相同的但是在我的应用程序中点击锚标记它重定向到页面
但是当我是同样的代码js在下载的解决方案中粘贴它正在工作
所以是否有任何DLL或相同的想法需要添加到角度Js工作路由
索引。 html
@ {
ViewBag.Title =Index;
}
< script type = text / javascript src = @ Url.Content（ 〜/ Scripts / angular.js） > < / script >
< 脚本 类型 = text / javascript src = @ Url.Content（ 〜/脚本/ angular-route.min.js） > < / script >
< script src = 〜/ Scripts / Home / Module.js > < / script >
< script src = 〜/ Scripts / Home / Services.js > < / script >
< script src = 〜/ Scripts /Home/ManageUserController.js\"> < / 脚本 >
< body data- ng-app = UserModule >
< h2 > 管理用户< / h2 >
< a href = ManageUser > 管理< / a >
< div data-ng-view < span class =code-keyword>> < / div >
< / body >
ManageUser.cstml
< table >
< tr >
< th > 名字< / th >
< th > 姓氏< / th < /跨度> >
< th > 角色< / th < span class =code-keyword>>
< th > 编辑< / th < span class =code-keyword>>
< / tr >
< tr data-ng-repeat = 用户中的用户 >
< td >
{ {user.FirstName}}
< / td >
< td >
{{user.LastName}}
< / td >
< td >
{{user.RoleName}}
< / td >
< td > < / td >
< / tr >
< / table >
Module.js
var app = angular.module（ UserModule，[ ngRoute]）;
app.factory（ ShareData， function （）{
return {value： 0 }
}）;
app.config（[' $ routeProvider'， $ locationProvider'， function （$ routeProvider，$ locationProvider ）{
$ routeProvider.when（' / ManageUser'，
{
templateUrl：' Home / ManageUser'，
controller：< span class =code-string>' ManageUserController'
}）;
$ routeProvider.otherwise（
{
redirectTo：' /'
}
）;
$ locationProvider.html5Mode（ true ）。hashPrefix（' ！'）
}]）;
Services.js
app.service（' SPAUserServices'， function （$ http）{
此 .getUsers = function （）{
返回 $ http.get（' / Home / GetUsers'）
};
}）;
ManageUserController.js
app.controller（' ManageUserController'， function （$ scop，$ location，SPAUserServices，ShareData）{
getUserbind（）;
function getUserbind（）{
var dataload = SPAUserServices.getUsers（）;
dataload.then（函数（pl）{ console .write（pl.data）; $ scop.Users = pl.data}，
function （errorpl）
{
$ scop.error = errorpl;
console 。写（errorpl）;
}
）;
}
}）;
HomeController.cs
public class HomeController：Controller
{
public ActionResult Index（）
{
return View（）;
}
public JsonResult GetUsers（）
{
return Json（ new 列表< UserModel> {
new UserModel {UserID = 1 ，FirstName = Sushant ，RoleName = 管理员}
，新 UserModel {UserID = 2 ，FirstName = Nilesh，RoleName = 用户}
}，JsonRequestBehavior.AllowGet）;
}
public ActionResult ManageUser（）
{
return PartialView（ ManageUser）;
}
}
public class UserModel
{
public int UserID {获得; set ; }
public string FirstName { get ; set ; }
public string LastName { get ; set ; }
public int strRoleID { get ; set ; }
public string RoleName { get ; set ; }
}
解决方案
routeProvider'，'
locationProvider'， function （
routeProvider，
i am learning mvc
i downloaded code tried to implement same but in my application on click in anchor tag it is redirecting to page
but same code js when I am pasting in downloaded solution it is working
so is there any DLL or same think need to added to work routing in angular Js
Index.html
@{
ViewBag.Title = "Index";
}
<script type="text/javascript" src="@Url.Content("~/Scripts/angular.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/angular-route.min.js")"></script>
<script src="~/Scripts/Home/Module.js"></script>
<script src="~/Scripts/Home/Services.js"></script>
<script src="~/Scripts/Home/ManageUserController.js"></script>
<body data-ng-app="UserModule">
<h2>Manage User</h2>
<a href="ManageUser">Manage</a>
<div data-ng-view></div>
</body>
ManageUser.cstml
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Role</th>
<th>Edit</th>
</tr>
<tr data-ng-repeat="user in users">
<td>
{{user.FirstName}}
</td>
<td>
{{user.LastName}}
</td>
<td>
{{user.RoleName}}
</td>
<td></td>
</tr>
</table>
Module.js
var app = angular.module("UserModule", ["ngRoute"]);
app.factory("ShareData", function () {
return { value: 0 }
});
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/ManageUser',
{
templateUrl: 'Home/ManageUser',
controller: 'ManageUserController'
});
$routeProvider.otherwise(
{
redirectTo: '/'
}
);
$locationProvider.html5Mode(true).hashPrefix('!')
}]);
Services.js
app.service('SPAUserServices', function ($http) {
this.getUsers = function () {
return $http.get('/Home/GetUsers')
};
});
ManageUserController.js
app.controller('ManageUserController', function ($scop, $location, SPAUserServices, ShareData) {
getUserbind();
function getUserbind() {
var dataload=SPAUserServices.getUsers();
dataload.then(function (pl) { console.write(pl.data); $scop.Users=pl.data},
function (errorpl)
{
$scop.error = errorpl;
console.write(errorpl);
}
);
}
});
HomeController.cs
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public JsonResult GetUsers()
{
return Json(new List<UserModel> {
new UserModel { UserID = 1, FirstName = "Sushant", RoleName = "Admin" }
, new UserModel { UserID = 2, FirstName = "Nilesh", RoleName = "User" }
},JsonRequestBehavior.AllowGet);
}
public ActionResult ManageUser()
{
return PartialView("ManageUser");
}
}
public class UserModel
{
public int UserID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public int strRoleID { get; set; }
public string RoleName { get; set; }
}
解决方案
routeProvider', '
locationProvider', function (
routeProvider,
这篇关于AngularJs路由无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
