AngularJS 应用
AngularJS 应用文档
简介
AngularJS 是一款基于 JavaScript 的前端框架,由 Google 开发。AngularJS 带来了强大的 MVVM(Model-View-ViewModel)性能、可测试性和模块化的方式,是前端开发的利器,具有以下特性:
- 双向绑定:使view和 model之间更加简单
- 指令:实现 Html 的功能强化
- 模块化:交互作用域,模块化开发
- 依赖注入:提供了依赖注入机制
- 测试性:更好的可测试性
- 过滤器:可以对指令和数据格式化等。
搭建AngularJS开发环境
要使用AngularJS,我们需要安装以下三个主要的软件:
- 安装编辑器:推荐 Visual Studio Code。
- 安装 Node.js。
- 安装 Angular CLI。
安装完以上三个软件后,就可以开始创建、编译和运行AngularJS应用了。
构建AngularJS 应用
创建一个 AngularJS 应用
- 打开Visual Studio Code软件,选择File->New Folder创建并打开一个新文件夹。
- 在terminal中运行以下命令安装angular/cli
npm install -g @angular/cli
- 在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应用了。