AngularJS Phone Catalog 教程应用程序技术文档

1. 安装指南

1.1 安装 Git

• 确保你已经安装了 Git。如果尚未安装，可以从 Git 官网 下载并安装。

1.2 安装 Node.js

• 下载并安装 Node.js。安装完成后，确保可以通过命令行运行 node -v 和 npm -v 来验证安装是否成功。

1.3 安装项目依赖

• 克隆项目到本地：

  git clone https://github.com/angular/angular-phonecat.git
  

• 进入项目目录：

  cd angular-phonecat
  

• 安装项目依赖：

  npm install
  

2. 项目的使用说明

2.1 项目概述

• 该项目是一个基于 AngularJS 的教程应用程序，旨在帮助开发者学习如何使用 AngularJS 构建 Web 应用程序。项目内容参考了已不存在的 Google Phone Gallery，并通过一系列的步骤逐步讲解 AngularJS 的各个方面。

2.2 项目结构

• 项目文件结构基于 angular-seed 项目。
• 项目没有动态后端，而是通过加载静态 JSON 文件来模拟后端服务。

2.3 开发模式

• 运行开发服务器：

  npm start
  

• 打开浏览器访问 http://localhost:8000/ 即可查看应用程序。

3. 项目 API 使用文档

3.1 $http 服务

• 在 PhoneListController 和 PhoneDetailController 中，使用了 $http 服务来从静态 JSON 文件中加载数据。
• 示例代码：

  $http.get('phones/phones.json').then(function(response) {
    $scope.phones = response.data;
  });
  

3.2 $route 服务

• 使用 $route 服务来实现路由和深度链接。
• 示例代码：

  angular.module('phonecatApp', ['ngRoute'])
    .config(['$routeProvider', function($routeProvider) {
      $routeProvider
        .when('/phones', {
          template: '<phone-list></phone-list>'
        })
        .when('/phones/:phoneId', {
          template: '<phone-detail></phone-detail>'
        })
        .otherwise({
          redirectTo: '/phones'
        });
    }]);
  

3.3 自定义过滤器

• 实现了一个自定义的 checkmark 过滤器，用于在手机详情页面中显示布尔值的图标。
• 示例代码：

  angular.module('core.filter', [])
    .filter('checkmark', function() {
      return function(input) {
        return input ? '\u2713' : '\u2718';
      };
    });
  

4. 项目安装方式

4.1 克隆项目

• 使用 Git 克隆项目到本地：

  git clone https://github.com/angular/angular-phonecat.git
  

4.2 安装依赖

• 进入项目目录并安装依赖：

  cd angular-phonecat
  npm install
  

4.3 运行项目

• 启动开发服务器：

  npm start
  

• 打开浏览器访问 http://localhost:8000/ 即可查看应用程序。

通过以上步骤，你可以成功安装并运行 AngularJS Phone Catalog 教程应用程序，并深入了解 AngularJS 的各个功能模块。