AngularJS 应用

AngularJS 应用文档

简介

AngularJS 是一款基于 JavaScript 的前端框架，由 Google 开发。AngularJS 带来了强大的 MVVM（Model-View-ViewModel）性能、可测试性和模块化的方式，是前端开发的利器，具有以下特性：

  • 双向绑定：使view和 model之间更加简单
  • 指令：实现 Html 的功能强化
  • 模块化：交互作用域，模块化开发
  • 依赖注入：提供了依赖注入机制
  • 测试性：更好的可测试性
  • 过滤器：可以对指令和数据格式化等。

搭建AngularJS开发环境

要使用AngularJS，我们需要安装以下三个主要的软件：

  1. 安装编辑器：推荐 Visual Studio Code。
  2. 安装 Node.js。
  3. 安装 Angular CLI。

安装完以上三个软件后，就可以开始创建、编译和运行AngularJS应用了。

构建AngularJS 应用

创建一个 AngularJS 应用

  1. 打开Visual Studio Code软件，选择File->New Folder创建并打开一个新文件夹。
  2. 在terminal中运行以下命令安装angular/cli npm install -g @angular/cli
  3. 在terminal中进入到打开的文件夹内，并运行以下命令： ng new my-app

以上操作完成后，angular/cli 将会为我们创建一个新的 Angular 应用，并且会自动安装所需要的依赖包。

运行AngularJS 应用

在打开的文件夹下，运行下面的命令启动应用：

$ cd my-app
$ ng serve --open

上面的命令将启动一个本地web服务器，并自动打开浏览器。

目录结构

AngularJS 应用有一些特定的目录结构，如下所示：

|-- node_modules/             // 依赖包
|-- src/                      // 应用源文件目录
    |-- app/
       |-- app.component.ts  // 根组件
       |-- app.module.ts     // 根模块
       |-- app.component.html// 根组件html文件
    |-- index.html 
    |-- main.ts
|-- package.json              // 包管理文件
|-- angular.json              // 传统模式下的项目配置文件
|-- .editorconfig             // 编辑器设置文件
|-- tsconfig.json             // Typescript 配置文件
|-- README.md                 // 项目说明文档

组件

组件是 AngularJS 应用的一个重要概念，所有 AngularJS 应用都是基于组件的。组件是可复用的控件，通常用于在多个视图中创建UI。组件是由以下三部分组成：

  • HTMLTemplate：定义UI
  • Class：管理组件的逻辑
  • Metadata：元数据，描述，数据变化时组件状态的变化

下面是一个 AngularJS 组件的示例：

import { Component } from '@angular/core';
 
@Component({        
   selector: 'app-root', // 选择器，在页面中表现为<app-root></app-root>
   template: '<h1>{{title}}</h1><h2>Hello {{name}}!</h2>', // 组件html
})
export class AppComponent { 
   title = 'Welcome to AngularJS'; 
   name = 'World'; 
}

指令

通过AngularJS指令，开发人员可以为渲染HTML视图提供更多的功能。常用的指令有 *ngIf、*ngFor、*ngSwitch等，以 *ngIf 为例：

<div *ngIf="showHelloWorld">
  Hello World!
</div>

上面的代码将渲染一个包含 “Hello World!” 的 div 元素，但在 showHelloWorld 的条件不成立的情况下，该元素将不显示在DOM中。

服务

服务是用于支持应用程序所需功能的单例对象。这意味着共享状态在多个视图和组件间完全是隔离的。服务可以通过以下两种方式创建：

  • 手动创建一个单例对象。
  • 使用 Angular 的依赖注入机制自动创建。

依赖注入

依赖注入（DI）是 Angular 中的一个重要概念，使用 DI 可以让开发者无需通过硬编码来访问依赖。通过 DI 我们可以将依赖注入到一个类或组件中，而不需要自己实例化或查找依赖。

例如，我们可以使用 Angular 的 DI 机制将 Http 模块注入到我们的代码中示例：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
//使用api获取数据，并将数据格式化后返回（我们针对Facebook API做获取数据api）
@Injectable()
export class FacebookService {
  constructor(private http: Http) { }

  getData(): Observable<any> {
    let accessToken = 'abc'; // Facebook 访问令牌
    let url = `https://graph.facebook.com/v2.11/me?access_token="${accessToken}"`;
    return this.http.get(url) // GET 请求数据
      .map(res => res.json()) // 格式化返回的 JSON 数据
      .catch((error:any) => Observable.throw(error.json().error || 'Server error')); // 错误处理
  }
}

总结

AngularJS是一个功能强大的前端框架，具有丰富的模块化和依赖注入机制，这让开发者能够快速构建复杂的Web应用程序。在开始使用前，您需要先搭建好开发环境，并了解概念及核心特性。然后创建组件、指令、服务并使用依赖注入将它们连接起来，就可以开始构建高效、可复用和易于扩展的AngularJS应用了。

AngularJS 实例 AngularJS 指令