如何在AngularJS电影搜索项目中集成ngRoute实现页面导航

没问题，我来一步步教你怎么在现有AngularJS电影搜索项目里集成ngRoute实现导航菜单和页面跳转：

首先得确保项目中引入了AngularJS核心库和ngRoute模块，你可以用CDN或者本地文件：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>

然后在你的AngularJS应用模块中注入ngRoute依赖，修改现有模块声明：

// 假设你原来的模块叫movieApp，现在添加ngRoute依赖
var app = angular.module('movieApp', ['ngRoute']);

在你的JS文件中添加路由配置，使用$routeProvider定义每个导航项对应的视图模板和控制器：

app.config(function($routeProvider) {
  $routeProvider
    // 搜索影片路由
    .when('/search', {
      templateUrl: 'search.html', // 把现有搜索功能的HTML移到这个模板文件里
      controller: 'SearchController' // 保留你原来的搜索控制器
    })
    // 精选影片路由
    .when('/featured', {
      templateUrl: 'featured.html', // 新建精选影片的模板文件
      controller: 'FeaturedController' // 新建对应控制器
    })
    // 关于我们路由
    .when('/about', {
      templateUrl: 'about.html', // 新建关于我们的模板文件
      controller: 'AboutController' // 新建对应控制器
    })
    // 默认路由，访问根路径时跳转到搜索页面
    .otherwise({
      redirectTo: '/search'
    });
});

在你的主页面（比如index.html）中添加导航栏，用ng-href绑定路由（不要用普通的href，避免页面刷新），同时添加ng-view作为路由视图的占位符——所有路由对应的内容都会渲染到这个容器里：

<nav style="margin: 1rem 0; padding: 0.5rem; background: #f5f5f5;">
  <a ng-href="#/about" style="margin-right: 1rem;">关于我们</a>
  <a ng-href="#/featured" style="margin-right: 1rem;">精选影片</a>
  <a ng-href="#/search">搜索影片</a>
</nav>

<!-- 路由内容渲染容器 -->
<div ng-view></div>

关于我们模块 #

新建about.html模板：

<h2>关于我们</h2>
<p>这是一个基于OMDb API构建的AngularJS电影搜索应用，旨在为用户提供便捷的影片信息查询服务。</p>
<p>我们致力于打造简洁易用的影视检索工具，让你快速找到感兴趣的电影内容。</p>

在JS文件中添加对应的控制器：

app.controller('AboutController', function($scope) {
  // 这里可以添加关于页面的逻辑，比如动态加载团队信息等
});

精选影片模块 #

新建featured.html模板：

<h2>精选影片</h2>
<div ng-repeat="movie in featuredMovies" style="display: inline-block; margin: 1rem; text-align: center;">
  <img ng-src="{{movie.Poster !== 'N/A' ? movie.Poster : 'https://via.placeholder.com/200x300'}}" 
       alt="{{movie.Title}}" 
       style="width: 200px; height: 300px; object-fit: cover;" />
  <h4>{{movie.Title}}</h4>
  <p>{{movie.Year}}</p>
</div>

添加FeaturedController，可以调用OMDb API获取预设的精选影片：

app.controller('FeaturedController', function($scope, $http) {
  $scope.featuredMovies = [];
  // 示例：用几部经典电影的IMDb ID获取数据，记得替换成你的OMDb API密钥
  const apiKey = 'YOUR_OMDB_API_KEY';
  const featuredMovieIds = ['tt0111161', 'tt0068646', 'tt0468569'];
  
  featuredMovieIds.forEach(id => {
    $http.get(`https://www.omdbapi.com/?apikey=${apiKey}&i=${id}`)
      .then(response => {
        $scope.featuredMovies.push(response.data);
      })
      .catch(error => {
        console.error('获取精选影片失败：', error);
      });
  });
});

搜索影片模块 #

把你现有搜索功能的HTML代码全部移到search.html模板中，保留原来的SearchController逻辑即可——不需要做太多修改，只要确保控制器名称和路由配置里的一致。

• API密钥替换：一定要把代码中的YOUR_OMDB_API_KEY替换成你自己从OMDb官网申请的密钥，否则请求会失败；
• 跨域问题：如果本地直接打开HTML文件测试，可能会遇到跨域错误，建议用本地服务器（比如Node.js的http-server、Python的python -m http.server）来运行项目；
• 模板路径：确保所有模板文件（search.html、featured.html、about.html）的路径和你的项目结构匹配，避免加载失败。

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