The output URL is shown as follows: localhost/Home/Index#/test1
Question:
Do I need to define Actions in HomeController and why? I thought I need just the ActionResult Index because I use PartialView()... And how can I achieve the following URL: localhost/test1 when I click on the Menu Test1?
解决方案
In addition to what @Andiih stated in his answer. The Angular routing library is meant to handle your Angular routes E.G. between front end controllers.
You seem to have mixed Angular and ASP.NET MVC routing in the way you're expecting the 2 to work. Your base route is localhost/Home/Index# from that point onward Angular appends its own (sub) routes to the base URL, resulting in the output URL that you're seeing.
Even though it might be feasible jumping between MVC and Angular routes and controllers as needed, it would be a more complicated scenario than what I'm assuming you're aiming to achieve. Also I've never needed to go to that extent in the past.
In summary what would currently happen:
If you had to navigate away from your Index.cshtml "Root" page you'd in effect navigate away from your current Angular app.. or navigate to a different app... depending on solution structure you could even use different JavaScript MV* framework for each a separate page... but that's just madness.
...but I doubt it is what you want at this stage, so for simplicity sake lets stick to assuming you only have the one ASP.Net MVC Route / Page, and you just purely want to navigate between Angular routes and supply data to the Angular routes or pages from your back end .NET services somehow.
Thus it seems that you could potentially be missing a link between what roles each of the frameworks are meant to play in the stack you currently have. (I'll try clarify)
For example:
If you look at a (very generic) overall solution structure that could look something like this below.
- css
- bootstrap.css // all 3rd party css here
- libs
- angular.js // all 3rd party js libs here
- angular-ui-router.js
- controllers
- RootController.cs // This is your HomeController.
// It's effectively used to "deliver" the root view which is
// your core/base page for lack of a better term
- views
- RootView.cshtml // see code RootView.cshtml below,
// this defines your app "layout"
// as well as where you deliver your bundles,
// make use of server side auth, etc..
- webapi
- test1Api.cs // access to test1 data or serverside process
- test2Api.cs // etc..
- app
- pages
- home
- test1
- test1Ctrl.js
- test1View.html
- test1.css
- test2
- test2Ctrl.js
- test2View.html
- test2.css
- services
- someRandomSvc.js
- resourceSvc.js // this is where you consume your
// .NET back end API. E.G: test1Api & test2Api, etc..
- app.js
- app.routes.js
- etc...
The RootView.cshtml gets constructed server-side, thus allowing you to use .NET bundling, Asp.NET Auth etc.. Anyhow, this whole page will act as a shell for the Angular app, the whole "front end app", thus runs within the context of that page.
You'll only need a single ASP.Net MVC Route, as I've stated before, you won't be navigating away from it (for this app at-least)
RootController.cs
namespace Tests.Controllers
{
public class RootController : Controller
{
public ActionResult RootView()
{
// as I've mentioned previously in another post,
// we're returning a partial to avoid the usage of _layout.cshtml
// as our RootView is acting as the layout in for the angular app.
// (it would introduce another level of not needed nesting)
return PartialView();
}
}
}
You would then expose the other server-side logic or calls via WebAPI endpoints that you would need to consume via something like ngResource, which you will then utilize in your Angular controllers.
testXView.html
<div ng-controller="testXCtrl as test">{{ test.something }}</div>
testXCtrl.js
var app = angular.module('Test');
app.controller('testXCtrl',['resourceSvc', function(resourceSvc) {
resourceSvc.getSomeData().then(function(data) {
this.something = data; //.. or whatever floats your boat :P
})
}]);
Note.
Using this convention with angular .something(['service', function(service) { }]); is to make the code min safe. (So don't be too scared when you see it)
I used a routing library called angular-ui-router in my example, I suggest that you have a look at it, if you have the freedom to choose at this stage... but the same principals would apply to an ngRoute solution.
这篇关于如何在 ASP.NET MVC 中定义 Angular Routing的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！