AngularJS 1.5能否在已加载的局部视图中嵌套加载其他视图？

没问题！针对你想在局部视图里嵌套加载其他视图、实现类似独立网站的需求，我给你两种可行的方案，适配你当前使用的AngularJS 1.5和ngRoute：

方案一：基于ngRoute + ng-include实现（原生无需额外库） #

AngularJS的原生ngRoute本身不支持直接嵌套路由，但我们可以通过路由参数+动态ng-include的方式模拟嵌套效果，步骤如下：

1. 调整局部视图模板（user模板） #

在你的user模板里添加一个子视图容器，用来动态加载子页面，同时修改导航的href路径，统一归到父路由下：

<script type="text/ng-template" id="user">
  <nav>
    <ul>
      <!-- 把原href改成带父路径的格式，方便路由捕获参数 -->
      <li><a href="#/user/profile">个人资料</a></li>
      <li><a href="#/user/settings">设置</a></li>
      <li><a href="#/user/gallery">相册</a></li>
    </ul>
  </nav>
  <!-- 子视图加载容器：通过ng-include动态绑定模板路径 -->
  <div ng-include="currentSubView"></div>
</script>

2. 修改路由配置 #

更新$routeProvider，新增一个父路由来匹配/user开头的路径，并捕获子视图名称作为参数：

angular.module("PageRouting", ["ngRoute"])
.config(function ($routeProvider) {
  $routeProvider
    // 父路由：匹配/user路径，支持可选的子视图参数
    .when("/user/:subView?", {
      templateUrl: "user", // 对应ng-template的id
      controller: "UserController" // 新增控制器处理子视图逻辑
    })
    // 保留原有的子路由（可选，用来兼容旧路径）
    .when("/userProfile", {
      templateUrl: "sample1.html"
    })
    .when("/userSettings", {
      templateUrl: "sample2.html"
    })
    .when("/userGallery", {
      templateUrl: "sample3.html"
    });
})

3. 创建处理子视图的控制器 #

新增UserController，根据路由参数动态设置要加载的子视图模板：

angular.module("PageRouting")
.controller("UserController", function($scope, $routeParams) {
  // 定义子视图名称和模板路径的映射关系
  var viewMapping = {
    "profile": "sample1.html",
    "settings": "sample2.html",
    "gallery": "sample3.html"
  };
  // 默认加载个人资料视图
  $scope.currentSubView = viewMapping[$routeParams.subView] || "sample1.html";
})

这样点击导航时，路由会匹配父路由/user/:subView，加载你的user局部视图，然后控制器根据参数把对应的子模板加载到ng-include容器里，实现局部嵌套的效果。

方案二：使用ui-router实现优雅的嵌套路由（推荐复杂场景） #

如果你后续需要更复杂的嵌套层级，AngularJS生态里的ui-router专门用来解决嵌套路由问题，比ngRoute更直观，步骤如下：

1. 引入ui-router脚本 #

AngularJS 1.5对应ui-router的0.4.x版本（比如0.4.2），在你的页面里引入该脚本（注意和AngularJS的加载顺序）。

2. 修改模块依赖和路由配置 #

把模块依赖改成["ui.router"]，然后用**状态（state）**替代ngRoute的路由，配置嵌套状态：

angular.module("PageRouting", ["ui.router"])
.config(function($stateProvider, $urlRouterProvider) {
  // 设置默认路由，打开页面自动加载个人资料
  $urlRouterProvider.otherwise("/user/profile");

  $stateProvider
    // 父状态：user，对应你的局部视图
    .state("user", {
      url: "/user",
      templateUrl: "user", // 对应ng-template的id
      controller: "UserController"
    })
    // 子状态：user.profile，继承父状态的模板和控制器
    .state("user.profile", {
      url: "/profile",
      templateUrl: "sample1.html"
    })
    .state("user.settings", {
      url: "/settings",
      templateUrl: "sample2.html"
    })
    .state("user.gallery", {
      url: "/gallery",
      templateUrl: "sample3.html"
    });
})

3. 调整局部视图模板 #

把导航的href改成ui-router专属的ui-sref指令，同时用ui-view作为子视图容器：

<script type="text/ng-template" id="user">
  <nav>
    <ul>
      <!-- 使用ui-sref直接指定子状态名称 -->
      <li><a ui-sref="user.profile">个人资料</a></li>
      <li><a ui-sref="user.settings">设置</a></li>
      <li><a ui-sref="user.gallery">相册</a></li>
    </ul>
  </nav>
  <!-- ui-view会自动加载对应子状态的模板 -->
  <div ui-view></div>
</script>

ui-router会自动识别嵌套状态，父状态模板里的ui-view会精准加载子状态的模板，完全符合你想要的“在局部视图内嵌套独立网站”的效果，结构更清晰，适合后续扩展。

新手提示 #

• 如果你刚接触AngularJS，先从方案一入手，理解路由参数和ng-include的结合逻辑；
• 确保你的主页面（someURL.aspx）里已经正确初始化了ng-app，并且有一个ng-view用来加载初始的user视图（如果user不是直接嵌入主页面的话）；
• 测试时注意路径的hash值变化，确保路由能正确匹配。

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