AngularJS 项目搭建图文教程

AngularJS 是一款流行的前端 JavaScript 框架，它可以帮助开发者快速构建单页应用程序。本文将演示如何在自己的电脑上搭建 AngularJS 项目的环境并进行开发。

1. 安装 Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。安装了 Node.js，就可以使用 npm 这个包管理器安装依赖包了。在官网下载对应操作系统的 Node.js 安装包，安装时选择默认选项，安装完成后运行以下命令检查是否安装成功：

node -v
npm -v

如果命令行可以输出相应的版本号，则说明成功安装 Node.js。

2. 安装 Angular CLI

Angular CLI 是一个命令行工具，它可以帮助我们创建 AngularJS 项目，并提供了大量与项目相关的命令。使用 npm 安装 Angular CLI：

npm install -g @angular/cli

安装完成后可以运行以下命令验证是否安装成功：

ng version

如果命令行输出相应的版本号，则说明成功安装 Angular CLI。

3. 创建 AngularJS 项目

使用 Angular CLI 来创建 AngularJS 项目：

ng new my-project

命令执行完成后，进入 my-project 目录。使用 npm 安装项目所需依赖：

cd my-project
npm install

使用以下命令编译和启动项目：

ng serve

在浏览器中打开 http://localhost:4200/，就可以看到项目的主页。

4. 开始开发

使用编辑器打开 my-project 目录，编辑 src/app/app.component.ts 文件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>{{ title }}</h1>',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public title = 'Hello, Angular World!';
}

保存文件后，浏览器将会自动重新编译并刷新，可以看到界面上显示了“Hello, Angular World!”这段文字。

5. 添加新组件

创建一个新的组件，使用以下命令：

ng generate component my-component

执行命令后，在 src/app/my-component 目录下创建了一个包含了组件代码的目录和文件。打开 src/app/app.component.ts 文件，把刚生成的组件插入到页面中：

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component/my-component.component';

@Component({
  selector: 'app-root',
  template: '<h1>{{ title }}</h1><app-my-component></app-my-component>',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public title = 'Hello, Angular World!';
}

保存文件后，浏览器将会自动重新编译并刷新，可以看到新的组件显示在了页面上。

结语

本文演示了如何在自己的电脑上搭建 AngularJS 项目环境，并创建了一个简单的页面和一个新的组件。通过这篇文章，你可以在本地开始使用 AngularJS 开发自己的单页应用了。