|
@@ -176,9 +176,9 @@ Thanks to the [recent release of Stormpath's Client API](https://stormpath.com/b
|
176
|
176
|
|
177
|
177
|
## Upgrade to Angular 2.3
|
178
|
178
|
|
179
|
|
-With Angular versions less than 2.3, you can’t extend components and override their templates. The Ionic pages for Stormpath module uses component extension to override the templates in its pages. Because of this, you have to upgrade your project to use Angular 2.3. The only downside to use Angular 2.3 with Ionic 2.0.0 is that you won’t be able to use the `--prod` build flag when compiling. This is because its compiler does not support Angular 2.3.
|
|
179
|
+With Angular versions less than 2.3, you can’t extend components and override their templates. The Ionic pages for Stormpath module uses component extension to override the templates in its pages. Because of this, you have to upgrade your project to use Angular 2.3. The only downside to use Angular 2.3 with Ionic 2.0.0 is that you won’t be able to use the `--prod` build flag when compiling. This is because its compiler does not support Angular 2.3.
|
180
|
180
|
|
181
|
|
-To begin, modify `package.json` so all the `angular` dependencies use version `2.3.1` rather than `2.2.1`.
|
|
181
|
+To begin, modify `package.json` so all the `angular` dependencies use version `2.3.1` rather than `2.2.1`.
|
182
|
182
|
|
183
|
183
|
```json
|
184
|
184
|
"dependencies": {
|
|
@@ -237,7 +237,7 @@ export function stormpathConfig(): StormpathConfiguration {
|
237
|
237
|
export class AppModule {}
|
238
|
238
|
```
|
239
|
239
|
|
240
|
|
-To render a login page before users can view the application, modify `src/app/app.component.ts` to use the `Stormpath` service and navigate to Stormpath's `LoginPage` if the user is not authenticated.
|
|
240
|
+To render a login page before users can view the application, modify `src/app/app.component.ts` to use the `Stormpath` service and navigate to Stormpath's `LoginPage` if the user is not authenticated.
|
241
|
241
|
|
242
|
242
|
```typescript
|
243
|
243
|
import { Component } from '@angular/core';
|
|
@@ -276,12 +276,12 @@ If you run `ionic serve`, you’ll likely see something similar to the following
|
276
|
276
|
|
277
|
277
|
```
|
278
|
278
|
XMLHttpRequest cannot load https://raible.apps.stormpath.io/me. Response to preflight request
|
279
|
|
-doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on
|
280
|
|
-the requested resource. Origin 'http://localhost:8100 is therefore not allowed access.
|
|
279
|
+doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on
|
|
280
|
+the requested resource. Origin 'http://localhost:8100 is therefore not allowed access.
|
281
|
281
|
The response had HTTP status code 403.
|
282
|
282
|
```
|
283
|
283
|
|
284
|
|
-To fix this, open your Spring Boot application's `src/main/resources/application.properties` and add the following line. This enables cross-origin resource sharing (CORS) from both the browser and the mobile client.
|
|
284
|
+To fix this, open your Spring Boot application's `src/main/resources/application.properties` and add the following line. This enables cross-origin resource sharing (CORS) from both the browser and the mobile client.
|
285
|
285
|
|
286
|
286
|
```
|
287
|
287
|
stormpath.web.cors.allowed.originUris = http://localhost:8100,file://
|
|
@@ -351,7 +351,7 @@ git commit -m "Add Stormpath"
|
351
|
351
|
|
352
|
352
|
## Build a Good Beers UI
|
353
|
353
|
|
354
|
|
-Run `ionic generate page beer` to create a component and a template to display the list of good beers.
|
|
354
|
+Run `ionic generate page beer` to create a component and a template to display the list of good beers.
|
355
|
355
|
|
356
|
356
|
Add `BeerPage` to the `declarations` and `entryComponent` lists in `app.module.ts`.
|
357
|
357
|
|
|
@@ -390,7 +390,7 @@ export class BeerService {
|
390
|
390
|
export function stormpathConfig(): StormpathConfiguration {
|
391
|
391
|
let spConfig: StormpathConfiguration = new StormpathConfiguration();
|
392
|
392
|
spConfig.endpointPrefix = 'http://localhost:8080';
|
393
|
|
- spConfig.autoAuthorizedUris.push(new RegExp('http://localhost:8080/good-beers'));
|
|
393
|
+ spConfig.autoAuthorizedUris.push(new RegExp(spConfig.endpointPrefix + '/*'));
|
394
|
394
|
return spConfig;
|
395
|
395
|
}
|
396
|
396
|
```
|
|
@@ -752,7 +752,7 @@ To add swipe-to-delete functionality on the list of beers, open `beer.html` and
|
752
|
752
|
</ion-content>
|
753
|
753
|
```
|
754
|
754
|
|
755
|
|
-Add a `remove()` method to `beer.ts`.
|
|
755
|
+Add a `remove()` method to `beer.ts`.
|
756
|
756
|
|
757
|
757
|
```typescript
|
758
|
758
|
remove(beer) {
|
|
@@ -798,7 +798,7 @@ After making these additions, you should be able to add, edit and delete beers.
|
798
|
798
|
|
799
|
799
|
## PWAs with Ionic
|
800
|
800
|
|
801
|
|
-Ionic 2 ships with support for creating progressive web apps (PWAs). If you’d like to learn more about what PWAs are, see [Navigating the World of Progressive Web Apps with Ionic 2](http://blog.ionic.io/navigating-the-world-of-progressive-web-apps-with-ionic-2/).
|
|
801
|
+Ionic 2 ships with support for creating progressive web apps (PWAs). If you’d like to learn more about what PWAs are, see [Navigating the World of Progressive Web Apps with Ionic 2](http://blog.ionic.io/navigating-the-world-of-progressive-web-apps-with-ionic-2/).
|
802
|
802
|
|
803
|
803
|
If you run the [Lighthouse Chrome extension](https://developers.google.com/web/tools/lighthouse/) on this application, you’ll get a mediocre score (54/100).
|
804
|
804
|
|
|
@@ -817,9 +817,9 @@ To register a service worker, and improve the app’s score, uncomment the follo
|
817
|
817
|
|
818
|
818
|
After making this change, the score should improve. In my tests, it increased to 69/100. The remaining issues were:
|
819
|
819
|
|
820
|
|
-* The page body should render some content if its scripts are not available. This could likely be solved with [Angular’s app-shell directives](https://www.npmjs.com/package/@angular/app-shell).
|
|
820
|
+* The page body should render some content if its scripts are not available. This could likely be solved with [Angular’s app-shell directives](https://www.npmjs.com/package/@angular/app-shell).
|
821
|
821
|
* Site is not on HTTPS and does not redirect HTTP to HTTPS.
|
822
|
|
-* A couple -1’s in performance for "Cannot read property 'ts' of undefined”.
|
|
822
|
+* A couple -1’s in performance for "Cannot read property 'ts' of undefined”.
|
823
|
823
|
|
824
|
824
|
If you refresh the app and Chrome doesn’t prompt you to install the app (a PWA feature), you probably need to turn on a couple of features. Copy and paste the following URLs into Chrome and enable each feature.
|
825
|
825
|
|
|
@@ -834,7 +834,7 @@ After enabling these flags, you’ll see an error in your browser’s console ab
|
834
|
834
|
|
835
|
835
|
It’s pretty cool that you’re able to develop mobile apps with Ionic in your browser. However, it’s nice to see the fruits of your labor and see how awesome your app looks on a phone. It really does look and behave like a native app!
|
836
|
836
|
|
837
|
|
-To see how your application will look on different devices you can run `ionic serve --lab`. The `--lab` flag opens opens a page in your browser that lets you see how your app looks on different devices.
|
|
837
|
+To see how your application will look on different devices you can run `ionic serve --lab`. The `--lab` flag opens opens a page in your browser that lets you see how your app looks on different devices.
|
838
|
838
|
|
839
|
839
|
### iOS
|
840
|
840
|
|
|
@@ -852,7 +852,7 @@ You’ll need to run `ionic emulate ios` to open your app in Simulator.
|
852
|
852
|
|
853
|
853
|
The biggest problem I found when running the app in Simulator was that it was difficult to get the keyboard to popup. To workaround this, I used Edit > Hardware > Keyboard > Toggle Software Keyboard when I needed to type text in a field.
|
854
|
854
|
|
855
|
|
-To deploy the app to an iPhone, start by plugging your iOS device into your computer. Then run the following commands to install ios-deploy/ios-sim, build the app, and run it on your device. If you've
|
|
855
|
+To deploy the app to an iPhone, start by plugging your iOS device into your computer. Then run the following commands to install ios-deploy/ios-sim, build the app, and run it on your device. If you've
|
856
|
856
|
|
857
|
857
|
```
|
858
|
858
|
npm install -g ios-deploy ios-sim
|
|
@@ -863,7 +863,7 @@ open ionic-beer.xcodeproj
|
863
|
863
|
|
864
|
864
|
Select your phone as the target in Xcode and click the play button to run your app. The first time you do this, Xcode may spin for a while with a “Processing symbol files” message at the top.
|
865
|
865
|
|
866
|
|
-Deploying to your phone will likely fail because it won't be able to connect to `http://localhost:8080`. To fix this, copy [this script](./deploy.sh) to your hard drive. It expects to be in a directory above your apps. It also expects your apps to be named `client` and `server`.
|
|
866
|
+Deploying to your phone will likely fail because it won't be able to connect to `http://localhost:8080`. To fix this, copy [this script](./deploy.sh) to your hard drive. It expects to be in a directory above your apps. It also expects your apps to be named `client` and `server`.
|
867
|
867
|
|
868
|
868
|
If you don't have a Cloud Foundry account, you'll need to [create one](https://account.run.pivotal.io/z/uaa/sign-up) and install its command line tools for this script to work.
|
869
|
869
|
|
|
@@ -919,4 +919,4 @@ To learn more about Ionic, Angular, or Stormpath, please see the following resou
|
919
|
919
|
|
920
|
920
|
* [Get started with Ionic Framework](http://ionicframework.com/getting-started/)
|
921
|
921
|
* [Getting Started with Angular](https://www.youtube.com/watch?v=Jq3szz2KOOs) A YouTube webinar by yours truly. ;)
|
922
|
|
-* [Stormpath Client API Guide](https://docs.stormpath.com/client-api/product-guide/latest/)
|
|
922
|
+* [Stormpath Client API Guide](https://docs.stormpath.com/client-api/product-guide/latest/)
|