Skip to content

Commit 123569e

Browse files
jamesdanielsjamesdaniels
authored
Merge pull request #1004 from mhartington/master
docs(ionic): add guide for setting up with ionic
2 parents 3b6866a + ece8068 commit 123569e

File tree

2 files changed

+219
-1
lines changed

2 files changed

+219
-1
lines changed

‎docs/1-install-and-setup.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
> Getting started with AngularFire2 is easy with the [Angular CLI](https://github.com/angular/angular-cli). Follow the 10 steps below to get started. Don't worry, we're always working to make this shorter.
44
5+
> Using Ionic and the Ionic CLI? Check out these [specific instructions](6-angularfire-and-ionic-cli.md) for Ionic and their CLI.
6+
57
### 0. Prerequisites
68

79
Before you start installing AngularFire2, make sure you have latest version of angular-cli installed.
@@ -115,7 +117,7 @@ export class AppModule {}
115117

116118
### 6. Setup individual @NgModules
117119

118-
After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
120+
After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
119121
- AngularFireAuthModule
120122
- AngularFireDatabaseModule
121123
- AngularFireStorageModule (Future release)

‎docs/6-angularfire-and-ionic-cli.md

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
# 6. Installation and Setup with Ionic
2+
3+
### 0. Prerequisites
4+
5+
Before you start installing AngularFire2, make sure you have latest version of Ionic cli installed.
6+
To verify run the command `ionic -v` and check your version. The CLI should be at least version 3.0.0 or greater.
7+
8+
If not, you may need to do the following:
9+
10+
```bash
11+
# if you have the wrong cli version only
12+
npm uninstall -g ionic
13+
npm cache clean
14+
15+
# reinstall clean version
16+
npm install -g ionic
17+
```
18+
19+
### 1. Create a new project
20+
21+
```bash
22+
ionic start <project-name>
23+
cd <project-name>
24+
```
25+
26+
The Ionic CLI's `start` command will prompt you to pick a starting template, and scaffold out the project for you.
27+
28+
### 2. Test your Setup
29+
30+
```bash
31+
ionic serve
32+
```
33+
34+
Your default browser should start up and display a working Ionic app.
35+
36+
### 3. Install AngularFire 2 and Firebase
37+
38+
```bash
39+
npm install angularfire2 firebase --save
40+
```
41+
42+
Now that you have a new project setup, install AngularFire2 and Firebase from npm.
43+
44+
### 4. Add Firebase config to environments variable
45+
46+
Let's create a new file, `src/environment.ts` and start adding our Firebase config:
47+
48+
```ts
49+
export const firebaseConfig = {
50+
apiKey: '<your-key>',
51+
authDomain: '<your-project-authdomain>',
52+
databaseURL: '<your-database-URL>',
53+
projectId: '<your-project-id>',
54+
storageBucket: '<your-storage-bucket>',
55+
messagingSenderId: '<your-messaging-sender-id>'
56+
}
57+
58+
```
59+
60+
61+
### 5. Setup @NgModule for the AngularFireModule
62+
63+
Open `/src/app/app.module.ts`, inject the Firebase providers, and specify your Firebase configuration.
64+
This can be found in your project at [the Firebase Console](https://console.firebase.google.com):
65+
66+
```ts
67+
import { BrowserModule } from '@angular/platform-browser';
68+
import { NgModule } from '@angular/core';
69+
import { IonicApp, IonicModule } from 'ionic-angular';
70+
import { MyApp } from './app.component';
71+
72+
import { AngularFireModule } from 'angularfire2';
73+
import { firebaseConfig } from '../environment';
74+
75+
@NgModule({
76+
declarations: [ MyApp ],
77+
imports: [
78+
BrowserModule,
79+
IonicModule.forRoot(MyApp),
80+
AngularFireModule.initializeApp(firebaseConfig)
81+
],
82+
bootstrap: [IonicApp],
83+
})
84+
export class AppModule {}
85+
86+
```
87+
88+
There will be more or less imports depending on your app. This is just an example setup.
89+
90+
91+
#### Custom FirebaseApp Names
92+
You can optionally provide a custom FirebaseApp name with `initializeApp`.
93+
94+
```ts
95+
@NgModule({
96+
declarations: [ MyApp ],
97+
imports: [
98+
BrowserModule,
99+
IonicModule.forRoot(MyApp),
100+
AngularFireModule.initializeApp(firebaseConfig, 'my-app-name')
101+
],
102+
bootstrap: [IonicApp],
103+
})
104+
export class AppModule {}
105+
```
106+
107+
### 6. Setup individual @NgModules
108+
109+
After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
110+
- AngularFireAuthModule
111+
- AngularFireDatabaseModule
112+
- AngularFireStorageModule (Future release)
113+
- AngularFireMessagingModule (Future release)
114+
115+
#### Adding the Firebase Database and Auth Modules
116+
117+
For example if you application was using both Firebase authentication and the Firebase database you would add:
118+
119+
```ts
120+
import { BrowserModule } from '@angular/platform-browser';
121+
import { NgModule } from '@angular/core';
122+
import { IonicApp, IonicModule } from 'ionic-angular';
123+
import { MyApp } from './app.component';
124+
125+
import { AngularFireModule } from 'angularfire2';
126+
import { firebaseConfig } from '../environment';
127+
import { AngularFireDatabaseModule } from 'angularfire2/database';
128+
import { AngularFireAuthModule } from 'angularfire2/auth';
129+
130+
131+
@NgModule({
132+
declarations: [ MyApp ],
133+
imports: [
134+
BrowserModule,
135+
IonicModule.forRoot(MyApp),
136+
AngularFireModule.initializeApp(firebaseConfig), // imports firebase/app needed for everything
137+
AngularFireDatabaseModule, // imports firebase/database, only needed for database features
138+
AngularFireAuthModule, // imports firebase/auth, only needed for auth features
139+
],
140+
bootstrap: [IonicApp],
141+
})
142+
143+
```
144+
145+
### 7. Inject AngularFireDatabase
146+
147+
Open `/src/pages/home/home.ts`, and start to import `AngularFireDatabase` and `FirebaseListObservable`:
148+
149+
```ts
150+
import { Component } from '@angular/core';
151+
import { NavController } from 'ionic-angular';
152+
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
153+
154+
@Component({
155+
selector: 'page-home',
156+
templateUrl: 'home.html'
157+
})
158+
export class HomePage {
159+
items: FirebaseListObservable<any[]>;
160+
constructor(
161+
public db: AngularFireDatabase,
162+
public navCtrl: NavController,
163+
) {}
164+
165+
}
166+
```
167+
168+
### 8. Bind to a list
169+
170+
In `/src/pages/home/home.ts`:
171+
172+
```ts
173+
import { Component } from '@angular/core';
174+
import { NavController } from 'ionic-angular';
175+
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
176+
177+
@Component({
178+
selector: 'page-home',
179+
templateUrl: 'home.html'
180+
})
181+
export class HomePage {
182+
items: FirebaseListObservable<any[]>;
183+
constructor(
184+
public db: AngularFireDatabase,
185+
public navCtrl: NavController,
186+
) {
187+
// In this case, '/list' is a placeholder.
188+
this.items = db.list('/list')
189+
190+
}
191+
192+
}
193+
```
194+
195+
Open `/src/pages/home/home.html`:
196+
197+
```html
198+
<ion-header>
199+
---
200+
</ion-header>
201+
202+
<ion-content padding>
203+
<ion-item *ngFor="let item of items | async">
204+
{{item.$value}}
205+
</ion-item>
206+
</ion-content>
207+
```
208+
209+
### 9. Run your app
210+
211+
```bash
212+
ionic serve
213+
```
214+
215+
And that's it! If there's any issues, be sure to file an issue on the Angularfire repo or the Ionic repo, depending on who's to blame :smile:
216+

0 commit comments

Comments
 (0)