Skip to content

Commit b9b224e

Browse files
mhartingtonmhartington
committed
docs(ionic): add guide for setting up with ionic
1 parent 9642f58 commit b9b224e

File tree

2 files changed

+224
-1
lines changed

2 files changed

+224
-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: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
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+
Your Firebase config can be added to the root `src/app/app.module.ts` or to it's own file.
47+
We'll use the root `app.module.ts` for this example.
48+
49+
50+
51+
### 5. Setup @NgModule for the AngularFireModule
52+
53+
Open `/src/app/app.module.ts`, inject the Firebase providers, and specify your Firebase configuration.
54+
This can be found in your project at [the Firebase Console](https://console.firebase.google.com):
55+
56+
```ts
57+
import { BrowserModule } from '@angular/platform-browser';
58+
import { NgModule } from '@angular/core';
59+
import { IonicApp, IonicModule } from 'ionic-angular';
60+
import { MyApp } from './app.component';
61+
62+
import { AngularFireModule } from 'angularfire2';
63+
64+
const firebaseConfig = {
65+
apiKey: '<your-key>',
66+
authDomain: '<your-project-authdomain>',
67+
databaseURL: '<your-database-URL>',
68+
projectId: '<your-project-id>',
69+
storageBucket: '<your-storage-bucket>',
70+
messagingSenderId: '<your-messaging-sender-id>'
71+
}
72+
73+
@NgModule({
74+
declarations: [ MyApp ],
75+
imports: [
76+
BrowserModule,
77+
IonicModule.forRoot(MyApp),
78+
AngularFireModule.initializeApp(firebaseConfig)
79+
],
80+
bootstrap: [IonicApp],
81+
})
82+
export class AppModule {}
83+
84+
```
85+
86+
There will be more or less imports depending on your app. This is just an example setup.
87+
88+
89+
#### Custom FirebaseApp Names
90+
You can optionally provide a custom FirebaseApp name with `initializeApp`.
91+
92+
```ts
93+
@NgModule({
94+
declarations: [ MyApp ],
95+
imports: [
96+
BrowserModule,
97+
IonicModule.forRoot(MyApp),
98+
AngularFireModule.initializeApp(firebaseConfig, 'my-app-name')
99+
],
100+
bootstrap: [IonicApp],
101+
})
102+
export class AppModule {}
103+
```
104+
105+
### 6. Setup individual @NgModules
106+
107+
After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
108+
- AngularFireAuthModule
109+
- AngularFireDatabaseModule
110+
- AngularFireStorageModule (Future release)
111+
- AngularFireMessagingModule (Future release)
112+
113+
#### Adding the Firebase Database and Auth Modules
114+
115+
For example if you application was using both Firebase authentication and the Firebase database you would add:
116+
117+
```ts
118+
import { BrowserModule } from '@angular/platform-browser';
119+
import { NgModule } from '@angular/core';
120+
import { IonicApp, IonicModule } from 'ionic-angular';
121+
import { MyApp } from './app.component';
122+
123+
import { AngularFireModule } from 'angularfire2';
124+
import { AngularFireDatabaseModule } from 'angularfire2/database';
125+
import { AngularFireAuthModule } from 'angularfire2/auth';
126+
127+
const firebaseConfig = {
128+
apiKey: '<your-key>',
129+
authDomain: '<your-project-authdomain>',
130+
databaseURL: '<your-database-URL>',
131+
projectId: '<your-project-id>',
132+
storageBucket: '<your-storage-bucket>',
133+
messagingSenderId: '<your-messaging-sender-id>'
134+
}
135+
136+
@NgModule({
137+
declarations: [ MyApp ],
138+
imports: [
139+
BrowserModule,
140+
IonicModule.forRoot(MyApp),
141+
AngularFireModule.initializeApp(firebaseConfig), // imports firebase/app needed for everything
142+
AngularFireDatabaseModule, // imports firebase/database, only needed for database features
143+
AngularFireAuthModule, // imports firebase/auth, only needed for auth features
144+
],
145+
bootstrap: [IonicApp],
146+
})
147+
148+
```
149+
150+
### 7. Inject AngularFireDatabase
151+
152+
Open `/src/pages/home/home.ts`, and start to import `AngularFireDatabase` and `FirebaseListObservable`:
153+
154+
```ts
155+
import { Component } from '@angular/core';
156+
import { NavController } from 'ionic-angular';
157+
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
158+
159+
@Component({
160+
selector: 'page-home',
161+
templateUrl: 'home.html'
162+
})
163+
export class HomePage {
164+
items: FirebaseListObservable<any[]>;
165+
constructor(
166+
public db: AngularFireDatabase,
167+
public navCtrl: NavController,
168+
) {}
169+
170+
}
171+
```
172+
173+
### 8. Bind to a list
174+
175+
In `/src/pages/home/home.ts`:
176+
177+
```ts
178+
import { Component } from '@angular/core';
179+
import { NavController } from 'ionic-angular';
180+
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
181+
182+
@Component({
183+
selector: 'page-home',
184+
templateUrl: 'home.html'
185+
})
186+
export class HomePage {
187+
items: FirebaseListObservable<any[]>;
188+
constructor(
189+
public db: AngularFireDatabase,
190+
public navCtrl: NavController,
191+
) {
192+
// In this case, '/list' is a placeholder.
193+
this.items = db.list('/list')
194+
195+
}
196+
197+
}
198+
```
199+
200+
Open `/src/pages/home/home.html`:
201+
202+
```html
203+
<ion-header>
204+
---
205+
</ion-header>
206+
207+
<ion-content padding>
208+
<ion-item *ngFor="let item of items | async">
209+
{{item.$value}}
210+
</ion-item>
211+
</ion-content>
212+
```
213+
214+
### 9. Run your app
215+
216+
```bash
217+
ionic serve
218+
```
219+
220+
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:
221+

0 commit comments

Comments
 (0)