AngularJS路由问题：URL中未显示'main'路径如何解决？

我来帮你排查下这个AngularJS路由的问题，看下来主要是几个配置细节和语法问题导致的，咱们一步步修正：

• 控制器配置错误：你在路由里写的controller: "ControllerFile.js"是错的！controller属性需要的是你定义的控制器名称，不是控制器文件的路径。比如你在ControllerFile.js里定义了叫MainController的控制器，这里就应该写controller: "MainController"。

• 自执行函数语法问题：你的代码最后一行的自执行函数括号写错了，正确的写法应该是})();，你多套了一层括号，这会导致整个路由配置代码根本执行不了。

• 页面基础配置缺失：别忘了在index.html里做这几件事：

  1. 引入angular-route.js脚本（版本要和你的AngularJS主文件匹配）
  2. 在页面里添加<ng-view></ng-view>标签，这是路由模板的渲染容器，没有它模板内容没法显示
  3. 确保根元素（比如<html>或者<body>）上加上了ng-app="plunker"指令，让AngularJS启动你的应用

下面是修正后的完整app.js代码示例：

(function() {
  var app1 = angular.module('plunker', ["ngRoute"]);
  
  app1.config(function($routeProvider) {
    $routeProvider
      .when("/main", {
        templateUrl: "main.html",
        controller: "MainController" // 替换成你实际的控制器名称
      })
      .otherwise({ redirectTo: "/main" });
  });
  
  // 举个控制器定义的例子，要和上面的名称对应上
  app1.controller('MainController', function($scope) {
    // 这里写你的控制器逻辑
  });
})();

把这些都调整好之后，再访问页面，路由就会自动跳转到/main路径，URL里也会显示这个路径，main.html的内容也会正确渲染到ng-view区域里啦。

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