Angular组件内容切换实现咨询：侧边栏点击切换右侧对应内容

Hey there! 作为AngularJS新手，搭建这种左侧菜单+右侧内容切换的单页应用其实非常常见，我给你拆解两种实用方案，你可以根据自己的需求来选：

方案一：用官方ngRoute路由（推荐用于复杂单页应用） #

这是AngularJS官方提供的路由方案，适合需要给不同页面配置独立控制器、模板的场景，步骤如下：

1. 引入并依赖ngRoute模块
   ngRoute不是AngularJS核心模块，需要单独引入脚本，然后在你的应用模块中依赖它：

   <!-- 先引入AngularJS核心，再引入ngRoute -->
   <script src="angular.js"></script>
   <script src="angular-route.js"></script>
   

   // 定义你的应用，并注入ngRoute依赖
   var myApp = angular.module('myApp', ['ngRoute']);
   

2. 配置路由规则
   在应用中配置每个菜单项对应的路由、模板和控制器：

   myApp.config(function($routeProvider) {
     $routeProvider
       // 首页路由
       .when('/home', {
         templateUrl: 'templates/home.html', // 对应内容模板路径
         controller: 'HomeController'       // 对应控制器
       })
       // 个人中心路由
       .when('/profile', {
         templateUrl: 'templates/profile.html',
         controller: 'ProfileController'
       })
       // 默认路由：如果URL不匹配任何规则，跳转到首页
       .otherwise({
         redirectTo: '/home'
       });
   });
   

3. 编写页面布局
   左侧侧边栏用ng-href绑定路由，右侧用<ng-view>作为内容切换的容器：

   <div ng-app="myApp" style="display: flex; height: 100vh; margin: 0;">
     <!-- 左侧侧边栏菜单 -->
     <div style="width: 200px; background: #f5f5f5; padding: 20px;">
       <a ng-href="#!/home" style="display: block; margin: 10px 0;">首页</a>
       <a ng-href="#!/profile" style="display: block; margin: 10px 0;">个人中心</a>
     </div>
     <!-- 右侧内容区域 -->
     <div style="flex: 1; padding: 20px;">
       <ng-view></ng-view> <!-- 这里会动态加载对应路由的模板 -->
     </div>
   </div>
   

4. 编写对应模板和控制器
   比如templates/home.html：

   <h1>首页</h1>
   <p>{{ welcomeMsg }}</p>
   

   对应的控制器：

   myApp.controller('HomeController', function($scope) {
     $scope.welcomeMsg = '欢迎来到我的单页网站！';
   });
   

方案二：用ng-include+变量控制（适合简单内容切换） #

如果你的内容不需要独立控制器，只是简单的静态或轻量内容切换，用这种方式更快捷：

1. 在控制器中定义切换变量

   var myApp = angular.module('myApp', []);
   myApp.controller('MainController', function($scope) {
     // 默认显示首页内容
     $scope.currentContent = 'templates/home.html';
   });
   

2. 编写布局和切换逻辑
   侧边栏用ng-click切换变量值，右侧用<ng-include>加载对应模板：

   <div ng-app="myApp" ng-controller="MainController" style="display: flex; height: 100vh; margin: 0;">
     <!-- 左侧侧边栏 -->
     <div style="width: 200px; background: #f5f5f5; padding: 20px;">
       <button ng-click="currentContent = 'templates/home.html'" style="width: 100%; margin: 10px 0;">首页</button>
       <button ng-click="currentContent = 'templates/profile.html'" style="width: 100%; margin: 10px 0;">个人中心</button>
     </div>
     <!-- 右侧内容区域 -->
     <div style="flex: 1; padding: 20px;">
       <ng-include src="currentContent"></ng-include>
     </div>
   </div>
   

小提示 #

• 如果不想URL里出现#，可以用$locationProvider.html5Mode(true)，但需要服务器端配合配置（比如Apache、Nginx的重写规则）。
• 样式部分可以把内联样式移到CSS文件中，让代码更整洁。
• 刚入门的话，推荐先从ngRoute开始，能帮你更好理解单页应用的路由概念。

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