新手求教：如何使用Backendless创建并初始化Angular 2项目？

作为刚接触Backendless和Angular 2的新手，我来一步步带你完成项目的初始搭建，过程很直观，跟着做就行：

1. 先搞定环境依赖 #

首先得确保你的电脑上装了这些工具：

• Node.js & npm：Angular 2依赖Node环境，打开终端输入 node -v 和 npm -v 检查是否安装，如果没装，选Angular 2支持的Node版本（比如6.x-8.x区间）下载安装。
• Angular CLI 1.x：因为要创建Angular 2项目，得装对应版本的CLI，终端运行：

  npm install -g @angular/cli@1.x
  

  安装完后用 ng -v 确认版本，确保是1.x系列。

2. 创建Angular 2基础项目 #

打开终端，选一个你喜欢的目录，运行以下命令创建项目：

ng new backendless-angular2-demo

这个命令会自动生成Angular 2的基础项目结构并安装所有依赖。创建完成后进入项目目录：

cd backendless-angular2-demo

3. 集成Backendless SDK #

接下来安装Backendless的JavaScript SDK和TypeScript类型定义（Angular 2用TypeScript开发，类型定义能帮你获得代码提示）：

npm install backendless --save
npm install @types/backendless --save-dev

4. 配置Backendless初始化 #

首先你需要去Backendless控制台创建一个应用，拿到两个关键信息：APP ID 和 REST API Key（在应用的"Manage" -> "App Settings"里能找到）。

为了让Backendless在Angular应用启动时就初始化，咱们最好创建一个专门的服务来封装Backendless操作：

ng generate service backendless

打开生成的 src/app/backendless.service.ts，修改成这样：

import { Injectable } from '@angular/core';
import * as Backendless from 'backendless';

@Injectable()
export class BackendlessService {
  constructor() {
    // 替换成你自己的APP ID和API Key
    const APP_ID = '你的Backendless应用ID';
    const REST_API_KEY = '你的Backendless REST API Key';
    
    Backendless.initApp(APP_ID, REST_API_KEY);
  }
}

然后打开 src/app/app.module.ts，把这个服务加入到providers数组里，确保整个应用都能使用它：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BackendlessService } from './backendless.service'; // 导入服务

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [BackendlessService], // 添加到providers
  bootstrap: [AppComponent]
})
export class AppModule { }

5. 测试基础功能是否正常 #

现在咱们来测试一下Backendless是否能正常工作，打开 src/app/app.component.ts，修改成这样：

import { Component, OnInit } from '@angular/core';
import { BackendlessService } from './backendless.service';
import * as Backendless from 'backendless';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private backendlessService: BackendlessService) {}

  ngOnInit() {
    // 创建一个测试数据对象并保存到Backendless
    const TestTable = Backendless.Data.of('TestTable');
    const testData = {
      title: '我的第一条测试数据',
      content: 'Backendless + Angular 2 测试成功！'
    };

    TestTable.save(testData)
      .then(savedData => {
        console.log('数据保存成功：', savedData);
        alert('数据已成功保存到Backendless，去控制台看看吧！');
      })
      .catch(error => {
        console.error('保存失败：', error);
        alert('保存失败，看看控制台的错误信息');
      });
  }
}

然后启动Angular开发服务器：

ng serve

打开浏览器访问 http://localhost:4200，如果一切正常，你会看到弹窗提示保存成功，打开浏览器控制台也能看到返回的数据，同时去Backendless控制台的"Data"页面，就能看到新建的TestTable表和里面的数据了。

一些注意事项 #

• 如果你遇到TypeScript编译错误，可能是Backendless类型定义的问题，可以尝试调整tsconfig.json里的types配置，确保包含backendless。
• Angular 2比较老旧，建议如果可以的话考虑升级到较新的Angular版本，但如果必须用Angular 2，确保所有依赖版本兼容。
• 不要把APP ID和API Key硬编码到代码里，生产环境建议用环境变量或者配置文件管理。

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