See the full text version of the article here: https://medium.com/nycdev/create-an-angular2-ionic2-mobile-app-with-a-list-nested-detail-and-form-pattern-c03c9195dfa6
Angular2 supported an if-condition via the *ngIf directive.
<div *ngIf="edit == false">
<div *ngIf="edit == true">
Since Angular2 v4, the ngIf directive was extended with an ‘then.. else..’ syntax, in which you can reference the identifier of the HTML tags to include.
<div *ngIf="edit; then editDiv else viewDiv"></div>
Another way to control HTML input-tags to be editable or disabled, is to use the [attr.disabled] syntax.
<input [attr.disabled]="edit ? null : true">
When using Ionic2, this translates to the following code.
In the TypeScript component, then in the control the ‘edit’ boolean variable.
I use the [attr.disabled] syntax for instance to display a detail page of an object in view (Read) or edit (Create/Update) form, and adding a Delete option to the view modus to complete a CRUD option. This simplifies my application development, imo, cause now the navigation in my application is mostly from List to Detail pages.
In this tutorial I will create a Node-RED server application that will process a request from a client web form. The server will save the request data in a NoSQL database.
You must have:
- Access to a Bluemix account.
1. Create a Node-RED Starter Application
Start to create a Node-RED Starter server application. A client application sends a form request to the Node-RED server, the server processes the form data and sends a response back to the client.
Node-RED is a so-called visual workflow editor, which lets you create an application workflow by dragging and dropping visual nodes onto an editor.
- a Bluemix.net account
- a Github account
- Git on localhost, install Git
- your favorite code editor, e.g. Sublime 3,
- Setup Details
- Add Watson AlchemyAPI
- Add Cloudant DB
- Login to Bluemix, in a separate tab login to Github,
- In Bluemix open Catalog->Boilerplates and create a ‘Node.js Cloudant DB Web Starter’ Boilerplate, named ‘<username>-nodejs-app1’, click CREATE
- Go to ‘Overview’, scroll down to ‘Continuous delivery’ and click ‘Enable’
- In the ‘Toolchain Settings’, change the name of the Toolchain to ‘<username>-nodejs-app1’, and click Create,
- If the Github THINK or CODE icon displays a configuration error, from the block’s dropdown icon in the topright, click the ‘Configure’ link to correct the configuration of your Github account,
- Go to your Github account and make sure that the repository for the new Bluemix app is created successfully,
- Copy the Git URL, on localhost open a commandline terminal, change to your development directory and clone the new repository,
git clone https://github.com/remkohdev/remkohdev-nodejs-app1.git
- Open the project directory in your favorite editor,
- Open the ‘package.json’ file and change the ‘name’ property to ‘<username>-nodejs-app1’,
- From the commandline, in your project directory,
git add .
commit -m "change package.json name property"
(updated: 20170319) WIP
This is part 3 in a series to build a sample application called QAVideos using API Connect. QAVideos is a Question and Answer application that uses videos instead of text. Think of QAVideos as StackOverflow meets Youtube. QAVideos will use LoopBack, API Connect, Open API Initiative (OAI formerly Swagger.io), OpenWhisk, Object Storage.
- In part 1 â€˜QAVideos (Part 1), Adding User Management to Node.jsâ€™, I added User Management to a Node.js app using API Connect.
- In part 2 â€˜QAVideos (Part 2), Adding a Custom Model and ORM in Node.js‘, I added a custom data model, i.e. a Video model, and used ORM to persist the model to a PostgreSQL database.
- In part 3 ‘QAVideos (Part 3), Extend Model and Using Open API Initiative (OAI) in Node.js‘, I extend the built-in User model with a Member, add a Question and Answer based on the Video model, and add a Sticker, while using the Open API Specification to define and manage the application and APIs.
- In next parts, the idea is to add other possibly features: deploy the OAI definition file to Bluemix via API Connect, add Object Storage for Video support, create an Ionic/Apache Cordova based mobile client, add an automated build, deployment and test script, add a Content Delivery Network (CDN) to the backend, add event-driven OpenWhisk APIs, containerize the application, add chat, and possibly more.
- Node, npm, and API Connect must be installed,
- Check if the â€˜apicâ€™ tool is installed, by running â€˜apic -vâ€™ from the commandline. If not installed, follow the installation instructions, here.
- Get the source code from part 2 of this tutorial.
- Install the ‘npm’ dependencies,
- Configure the file ‘~/server/datasources.json’,
- Test if QAVideos (part 2) is running correctly by typing â€˜apic startâ€™ in the root directory, open a browser and go to â€˜http://0.0.0.0:4001â€™ in your browser.
Table of Content
- The OAI Definition File
- Create the Extended Data Model
Open API Initiative (OAI, based on Swagger)
The OAI is based on Swagger.io, an API Framework. The OAI is an open API definition standard. Frameworks like API Connect use the OAI definition file to generate the server, client, data model and documentation.
This is part 2 in a series to build QAVideos. QAVideos is a Question and Answer application that uses videos instead of text. Think of QAVideos as StackOverflow meets Youtube. QAVideos will use LoopBack, API Connect, Open API Initiative (OAI formerly Swagger.io), OpenWhisk, Object Storage.
In part 1 ‘QAVideos (Part 1), Adding User Management to Node.js with API Connect‘, I showed how to add User Management to a Node.js app using API Connect.
In this part 2, I will add a custom data model, i.e. a Video model and use ORM to persist data to a PostGreSQL database.
Part 3 (to be updated) is found here, which adds model extensions and uses Open API Initiative (formerly Swagger) support.
Source code for QAVideos is released per part via https://github.com/remkohdev/qavideos/releases.
- Install Node.js and npm,
- Install API Connect.
- Check if the ‘apic’ tool is installed, by running ‘apic -v’ from the commandline. If not installed, follow the installation instructions, here.
- Get the source code for part 1 of this tutorial and follow the installation instructions for QAVideos Release v1.0.0. First clone the repository, then make sure you fetch all the remote tags to your local repository, and then checkout the v1.0.0 tag.
git clone https://github.com/remkohdev/qavideos.git
git fetch --all --tags --prune
git checkout tags/v1.0.0
Table of Contents
- Create Data Model
- Define Relation
- Adding ACL
- Add Video Functionality
- Add Data Source
1. Create Data Model
First, test if QAVideos (part 1) is running correctly. Open a commandline, change your directory to the root directory of your QAVideos application, type ‘apic start’, and browse to ‘http://0.0.0.0:4001‘ in your browser.
Now, I want to add a custom model ‘Video’ so that users can manage their list of videos. To do this, I create a model for the Video with the ‘apic’ tool, and define the relationship between Video and User (a User can own many videos), and specify the access level of Users to Video objects using an Access Control List (ACL).
QAVideos is a Question and Answer application that uses videos instead of text. Think of QAVideos as StackOverflow meets Youtube. QAVideos will use LoopBack, API Connect, Open API Initiative (OAI formerly Swagger.io), OpenWhisk, Object Storage.
- Install Node.js
- Node.js comes with npm, but you can update npm
$ npm install -g npm@latest
- Install StrongLoop (now renamed to API Connect).
$ npm install -g apiconnect
- QAVideos (1) â€“ Adding User Management to Node.js. Part 1 creates the ‘StrongLoop’ application with built-in User and Role management with authentication, with an API layer based on Open API Initiative (OAI), formerly Swagger.io, and I add an Angular.js based web UI.
- QAVideos (2) â€“ Add Custom Model and ORM to Node.js. Part 2 adds custom object models and ORM to a PostGreSQL database.
- QAVideos (3) â€“ Extend Model and Using Swagger.io in Node.js. Part 3 adds object model extensions and takes a closer look at Open API Initiative (OAI) support.
- Application Design
- Create the Application
- Add Static Pages
- Add Angular
- Add Signup
- Create an Authentication Service Provider
- Add Login
- Add Logout
1. Application Design
The initial design of the QAVideos application is very simple. A user can register, login and logout. An authenticated user can create, update and delete videos to the platform and see a list of their videos. Unauthenticated users can see all videos.
If you are not familiar with IBM API Connect (formerly StrongLoop), it is an API platform for Node.js and includes Loopback to quicly compose and manage APIs, and use graphical tools like the API Connect Designer to create, edit, manage and deploy your APIs. I will use the Loopback library that is part of API Connect to compose the model and the APIs.
- Create a Node.js with Express.js App
- Create a Git repository and clone to localhost
- Add Angular.js
- Add Bootstrap
- Add MongoDb
- Add Jade
- Add an API for GET /people
- Connect to MongoDb
- Create a sortable table with Angular
Create a Node.js with Express.js App
I will be using Bluemix to host, build and deploy my Node.js application and the MongoDb service. I am developing on my localhost for unit testing before I upload my application to Bluemix, but you can also use the online editor and online Git instead.
1. If you do not have a Bluemix account yet, sign up for a free account at http://ibm.biz/bluemixnyc,
2. Once you have an account, go to your Bluemix console at https://console.ng.bluemix.net/,
3. Go to your Dashboard,
4. In the ‘Cloud Foundry Apps’ box, click ‘CREATE APP’,
5. Choose ‘WEB’
The Find Related Concepts API from IDOL OnDemand returns the most relevant terms and concepts from related documents. Here’s represented as a D3 Bubble Chart. Thanks to incredibly good work by Mike Bostock. For a description of the API go here https://www.idolondemand.com/developer/apis/findrelatedconcepts#overview
For D3 Data-Driven Documents go here: http://d3js.org