AngularJS中如何使用路由（含控制器与方法名）及JS函数@Url.Action失效问题

我来帮你一步步解决这两个开发中常见的问题，咱们一个个来：

首先得确保你已经引入了AngularJS的路由模块ngRoute，如果用CDN的话要加上对应脚本，然后在主模块里依赖它：

var app = angular.module('myApp', ['ngRoute']);

1. 基础路由关联控制器 #

用$routeProvider配置路由，指定每个路径对应的模板和控制器，举个直观的例子：

app.config(function($routeProvider) {
  $routeProvider
    // 首页路由，关联HomeController
    .when('/home', {
      templateUrl: 'views/home.html', // 你的模板文件路径
      controller: 'HomeController',   // 绑定的控制器
      controllerAs: 'vm'              // 可选，用controllerAs语法更清晰，避免$scope混乱
    })
    // 带参数的用户详情路由
    .when('/user/:userId', {
      templateUrl: 'views/user-profile.html',
      controller: 'UserProfileController'
    })
    // 默认跳转路径
    .otherwise({
      redirectTo: '/home'
    });
});

然后定义对应的控制器：

app.controller('HomeController', function($scope) {
  // 控制器内的业务逻辑
  $scope.welcomeMsg = 'Hello from Home Controller!';
  $scope.loadData = function() {
    console.log('加载首页数据');
  };
});

2. 路由触发时调用指定控制器方法 #

如果你想在路由加载完成后自动执行控制器里的某个方法，有几种实用方式：

方式一：用$onInit初始化方法（AngularJS 1.5+支持）

如果用controllerAs语法，控制器里的$onInit方法会在路由加载完成后自动执行：

app.controller('HomeController', function() {
  var vm = this;
  
  // 路由加载完成后自动触发
  vm.$onInit = function() {
    vm.loadHomeData();
  };
  
  vm.loadHomeData = function() {
    // 这里写你的业务逻辑，比如请求后端数据
    console.log('首页数据加载完成');
  };
});

方式二：通过路由resolve提前执行方法

resolve可以在路由加载前完成异步操作（比如获取数据），结果会注入到控制器中，适合需要预加载数据的场景：

app.config(function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'views/home.html',
      controller: 'HomeController',
      resolve: {
        // 提前请求首页数据，promise完成后才会加载路由
        homeData: function($http) {
          return $http.get('/api/home').then(res => res.data);
        }
      }
    });
});

// 控制器注入resolve的结果
app.controller('HomeController', function(homeData) {
  console.log('预加载的首页数据：', homeData);
  // 可以在这里调用方法处理数据
});

方式三：监听路由变化事件

在全局run块或者主控制器里监听$routeChangeSuccess事件，根据当前路由触发对应方法：

app.run(function($rootScope) {
  $rootScope.$on('$routeChangeSuccess', function(event, currentRoute) {
    // 根据当前路由判断要执行的方法
    if (currentRoute.controller === 'HomeController') {
      console.log('首页路由加载完成，执行对应方法');
      // 这里可以调用全局方法或者获取控制器实例执行方法
    }
  });
});

这个问题的核心原因很直白：@Url.Action是ASP.NET Razor的服务器端语法，只有在.cshtml文件里才会被服务器解析成实际URL；如果这段代码写在单独的.js文件里，服务器不会处理Razor语法，最终赋值的是字符串@Url.Action("Redirect", "Dashboard")，而非正确的跳转路径。

给你几个可行的解决办法：

方法一：在.cshtml中存储解析后的URL #

在你的.cshtml页面里，先让服务器解析出正确URL，存到全局变量或DOM属性中，再让JS文件引用：

<!-- 在cshtml页面的头部或底部 -->
<script>
  // 定义全局变量存储跳转URL
  window.dashboardRedirectUrl = '@Url.Action("Redirect", "Dashboard")';
</script>
<!-- 再引入你的JS文件 -->
<script src="scripts/my-custom.js"></script>

然后在JS文件里直接使用：

window.location.href = window.dashboardRedirectUrl;

也可以把URL存在DOM元素的data属性里：

<button id="redirectBtn" data-url='@Url.Action("Redirect", "Dashboard")'>跳转到仪表盘</button>

JS中获取：

const redirectUrl = document.getElementById('redirectBtn').dataset.url;
window.location.href = redirectUrl;

方法二：手动拼接URL（适合简单场景） #

如果你的应用用的是ASP.NET MVC默认路由规则（/控制器/方法），可以直接手动拼接URL，不用依赖Razor：

window.location.href = '/Dashboard/Redirect';

如果部署在虚拟目录下，需要加上应用根路径：

<!-- 在cshtml里先获取根路径 -->
<script>
  window.appRoot = '@Url.Content("~/")';
</script>

JS中拼接：

window.location.href = window.appRoot + 'Dashboard/Redirect';

方法三：确保代码在.cshtml的script标签内 #

如果你的JS代码是直接写在.cshtml的<script>标签里（不是单独的JS文件），检查Razor语法是否正确，比如有没有拼写错误：

<script>
  function redirectToDashboard() {
    // 服务器会直接解析@Url.Action为正确URL
    window.location.href = '@Url.Action("Redirect", "Dashboard")';
  }
</script>

如果还是不生效，打开浏览器F12开发者工具，看控制台的错误信息，或者Network面板里的跳转URL是否正确，就能快速定位问题。

内容的提问来源于stack exchange，提问作者Purvesh Shah