RSS

Tag Archives: angular

Integrate Ionic in Existing Angular Project

Angular Project

I just finished my project, written in Angular and although it runs on mobile browsers, it needs to be deployed as a native application. The choice is obvious, Ionic.

I’m integrating Ionic for Android development, but it’s optional. You don’t have to prepare your Ionic project for Android development, if you don’t want to. The same concept can also be used to prepare your project for iOS development.

This applies to:

  • Angular 7.
  • Ionic 5.
  • Java SDK 8 update 202.
  • Android SDK 9.0 (API level 28)
  • Android Studio 3.3.2

Here’s my approach integrating Ionic in my Angular project.

Bring-in Ionic

The step includes creating a new project using Ionic CLI, I’m going to refer it as Ionic project while my original Angular project as, well, Angular project.

  • In your Angular project, update all npm packages, to the latest major if you can. This is to avoid version conflict with Ionic project’s npm packages.
  • Start a new Ionic blank project.
    ionic start project-name blank
    
  • Update all npm packages in the newly created Ionic project.
    npm i -g npm-check-updates && ncu -u
    
  • Copy ionic.config.json from Ionic project to Angular project.
  • Copy angular.json from Ionic project to Angular project.
    • If you have specifically changed anything in your angular.json, make that necessary changes in the Angular project after the copy.
    • Ionic uses SCSS for style sheet by default, so if you are not using SCSS, make sure to copy settings under projects/app/architect/**/options/styles from Angular project’s angular.json prior to copy.
    • integrate-ionic-in-angular-project-1
  • Copy package.json from Ionic project to Angular project.
      • If you have specifically changed anything in your package.json (npm scripts, etc), make that necessary changes in the Angular project after the copy.
      • Combine the npm packages from both projects setting under dependencies and devDependencies.
      • integrate-ionic-in-angular-project-2

     

  • Combine .gitignore files from both projects, if you are using Git source control.
  • In Angular project, delete package-lock.json file and node_modules folder. These should be located in root of the project.
  • In Angular project, run npm install command.
    npm install
    
  • Test and make sure everything runs.
    // Test run with Ionic
    ionic serve
    // Test run with Angular
    ng serve --open
    
  • If you want to prepare your project for Cordova, runs the following command. Note that environment setup is required. Please refer to reference section for more details.
    // For Android
    ionic cordova prepare android
    // For iOS
    //ionic cordova prepare ios
    

References

Advertisements
 
Leave a comment

Posted by on March 11, 2019 in General

 

Tags: , , , , , , ,

Barebone Angular with D3 v5

Just uploaded Github project showcasing sample Angular project with D3 v5.

The project contain implementation of D3 v5 in Angular project and consist of most popular D3 features such as Basic shape, Animation, Chart, Dragging and Zooming. Each sample is self-contained. D3 dependencies can be seen on `package.json`.
Time permitting, I will add more samples in the future.

For D3 new-comers, check out this resources explaining most important concepts in D3, Selection, Joins and if you work with chart, Scale.

 
Leave a comment

Posted by on December 26, 2018 in General

 

Tags: , , , , , ,

NgRx Entity

NgRx Entity

NgRx Entity is a library to handle entity within NgRx framework. The entity in the context is defined as the application’s domain objects, like User, Employee, etc.

The purposes of NgRx Entity are basically:

  • Reduce boilerplate code.
  • Search and sort entities quickly.

The first thing we need to use NgRx Entity is to create an entity adapter, like so:

const adapter = createEntityAdapter();

NgRx Entity also defines `EntityState<>` interface. The interface is also extensible should the additional properties in the application state are needed,

The shape of EntityState is something like this:

interface EntityState {
  ids: string[];
  entities: { [id: string]: V };
}

What this allows us to do is:

  • Find entity quickly using `entities` dictionary.
  • Maintain order of the list, good for use in sorting.

Some boilerplate codes that are reduced when using NgRx Entity:

  • No need to specify properties of the state interface.
  • Add, remove, update of entities in the state are handled by entity adapter.
  • Entity adapter has most commonly used selectors.

Reference

https://medium.com/ngrx/introducing-ngrx-entity-598176456e15

 
Leave a comment

Posted by on December 20, 2018 in General, References

 

Tags: , , , , ,

NgRx State Selectors

NgRx State Selectors

As our application grows, the data structure that represents the application states could get more complex. State data structure in ngRx is tree-like and in the early development, the structure may only have few properties. As the application grows, the structure could have deep nested objects.

When states have deep nested objects, we will have to write more code to select the slice of state. Something like:

// Complex data structure
let state = {
    products: {
        pizza: {
            name: "Pepperoni",
            amount: 4
        },
        topping: {
            name: "mushroom",
            amount: 3
        }
    }
};

// Selecting pizza state
let pizza = state.products.pizza;

Selecting pizza state requires dot notation and it’s also prone to error where products is undefined, that line of code will blow up.

Another issue with this is that we will have to write the same line of code to get pizza state every where we need the state.

This is where state selectors in ngRx comes in. It allows us to define selectors for our states and use it everywhere in our application.

There are mainly 2 state selectors, createFeatureSelector and createSelector. The first one mainly deals with state at the root level while the second one can be used to select a specific object in the state (for example, pizza or topping).

Reference

https://toddmotto.com/ngrx-store-understanding-state-selectors

 
Leave a comment

Posted by on December 12, 2018 in General

 

Tags: , , , , ,

NgRx Store Explained

NgRx Store

ngRx Store is a library for Angular 2+, its function is almost like event bus where the store is a central storage for all events and whenever an event is added, the store emits an action. Whoever subscribe to the store‘s action will then get notified. Very similar to pub-sub pattern.

The purpose of ngRx Store is to simplify the state management, that sometime can be simple at first but, as the application grows, becomes unimaginably complicated.

Some example usage of ngRx Store that I can think right now are:

  • Forward execution. When an Angular application sends an API call to update, let’s say, employee data, it doesn’t need to call API anymore to query what the current employee data is. However, things get complicated when there’s a certain logic needs to be applied when updating employee data. For example, when the hire date is set to the future, the employee status will also need to be changed. ngRx Store can be used to manage the employee state so that it remains consistent at every part of the application.
  • Reduce extraneous props. Extraneous prop is when we have a deep component tree and have to pass object around to the leaf component. ngRx Store eliminates the need of passing the object around and just have the leaf component subscribe to the `store` to receive the action. A concrete example of this is notification counter. The counter is normally in its own component and every other event can increase the count. By using ngRx Store, we can avoid other components passing the count to the counter component.
  • Sort of the similar to extraneous props, we can have 2, or more, components that use the same data but display it differently. With ngRx Store, we can manage the state of the data in one place and all other components that use the data just subscribe to it.
  • Step-by-step, wizard-y workflow. Think of this like your tax filing software where it asks you questions and, depend on your answer, take you to different workflow. In Angular, each step the users take can use a separate component and ngRx Store can be used to maintain the state of the whole workflow process.

The problem that ngRx Store trying to solve is really similar to challenges that a large scale enterprise application faces, it just does it in a smaller scale, UI front-end in this case.

There’s definitely a lot more to this concept than what I cover here, but hopefully this gives you the gist of how it works at the high level. There are lots of resources online that cover this very topic.

 
Leave a comment

Posted by on December 1, 2018 in General

 

Tags: , , , , ,

Barebone Angular Project with Auth0

Simple project to demonstrate how to use Auth0 in Angular project, download code on Github.

To get started, you must have Auth0 account.
To setup the project, update following value in `environment.ts`:
1. Client ID. This is the id of your app you created in Auth0 dashboard. See here.
2. Client Domain. Your Auth0 domain to authenticate user. See here.
3. Callback Url. This is url Auth0 will redirect to after user is authenticated. This url must be white-listed in Auth0 dashboard. See here.
4. Logout Url. This is url Auth0 will redirect to after user logout. This url must be white-listed in Auth0 dashboard. See here.

The juice is on `service/auth.service.ts`, following are explanations of each methods:
1. Login
Call Auth0 authorize method to authenticate users. The method will redirect user to Auth0, if user is not authenticated, a login screen will displated, if user is authenticated Auth0 will redirect to callback endpoint and pass id token.

2. HandleAuthentication
Parse response object from Auth0 which contain id token, access token, expiration time and other information. Redirect user to appropriate url depend on the authorization results.

3. SetSession
Set authentication tokens and expiration in browser’s storage. User is authenticated.

4. Logout
Remove authentication tokens and expiration from browser’s storage. User is not authenticated anymore.

5. IsAuthenticated
Check browser’s storage to see if user is authenticated.

 
Leave a comment

Posted by on November 27, 2018 in General

 

Tags: , , , , , ,

Karma: Only Run 1 Test

Useful hack to only run 1 test in Karma.

Instead of ‘it’, change test declaration to ‘fit’.
Example:

    fit('should create', () => {
        expect(component).toBeTruthy();
    });

This will force Karma to only run ‘should create’ test.

 
Leave a comment

Posted by on October 22, 2018 in General

 

Tags: , , , , , ,

 
%d bloggers like this: