美文网首页angular
angular 配置 AngularFire

angular 配置 AngularFire

作者: 王义杰 | 来源:发表于2018-06-12 09:00 被阅读35次

    Include AngularFire

    包含 AngularFire

    Firebase is a mobile and web application platform with tools and infrastructure designed
    to help developers build high-quality apps. AngularFire2 is the official
    Angular library to use Firebase in your apps.
    Firebase是一个移动和Web应用程序平台,其中包含旨在帮助开发人员构建高品质应用程序的工具和基础结构。 AngularFire2是在您的应用中使用Firebase的官方Angular库。

    Create new project

    创建新项目

    Create a new project and navigate into the project.
    创建一个新项目并导航到项目中。

    $ ng new my-app
    $ cd my-app
    

    Install dependencies

    安装依赖

    In the new project you need to install the required dependencies.
    在新项目中,您需要安装所需的依赖关系。

    $ npm install --save angularfire2 firebase
    

    Get Firebase configuration details

    获得 Firebase 配置纤细

    In order to connect AngularFire to Firebase you need to get the configuration details.
    为了将AngularFire连接到Firebase,您需要获取配置详细信息

    Firebase offers an easy way to get this, by showing a JavaScript object that you can copy and paste.
    通过显示可以复制和粘贴的JavaScript对象,Firebase提供了一种简单的方法来获取此信息。

    • Log in to the Firebase console.
      登录到Firebase控制台。
    • Create New Project or open an existing one.
      创建新项目或打开一个存在的
    • Click Add Firebase to your web app.
      点击 Add Firebase to your web app.
    • From the modal window that pops up you copy the config object.
      从弹出的模式窗口中复制配置对象
      var config = {
        apiKey: "your-api-key",
        authDomain: "your-auth-domain",
        databaseURL: "your-database-url",
        storageBucket: "your-storage-bucket",
        messagingSenderId: "your-message-sender-id"
      };
    

    Configure the Environment

    配置环境

    These configuration details need to be stored in our app, one way to do this using the environment. This allows you to
    use different credentials in development and production.
    这些配置细节需要存储在我们的应用程序中,一种使用 environment 来做到这一点的方法,这使您可以在开发和生产中使用不同的凭证。

    Open src/environments/environment.ts and add a key firebase to the exported constant:
    打开 src/environments/environment.ts 并向导出的常量添加一个键的 firebase:

    export const environment = {
      production: false,
      firebase: {
        apiKey: 'your-api-key',
        authDomain: 'your-auth-domain',
        databaseURL: 'your-database-url',
        storageBucket: 'your-storage-bucket',
      }
    };
    

    To define the keys for production you need to update
    src/environments/environment.prod.ts.
    要定义生产密钥,您需要更新 src/environments/environment.prod.ts.

    Import and load FirebaseModule

    导入和加载 FirebaseModule

    The final step is to import AngularFireModule and initialize it using the parameters from the environment.
    最后一步是导入 AngularFireModule 并使用 environment 中的参数对其进行初始化.

    Open src/app/app.module.ts and add the following lines on the top of the file, with the other imports:

    import { AngularFireModule } from 'angularfire2';
    import { environment } from '../environments/environment';
    

    To initialize AngularFire add the following line to the imports array inside the NgModule:
    要初始化 AngularFire,将以下行添加到 NgModule 内的 imports 数组中:

    @NgModule({
      // declarations
      imports: [
        // BrowserModule, etc
        AngularFireModule.initializeApp(environment.firebase),
      ]
      // providers
      // bootstrap
    })
    

    Congratulations, you can now use Firebase in your Angular app!

    恭喜,您现在可以在您的Angular应用中使用Firebase!

    相关文章

      网友评论

        本文标题:angular 配置 AngularFire

        本文链接:https://www.haomeiwen.com/subject/effleftx.html