framework

Ionic 2 comes with some starter templates which saves us a lot of time and effort.

Video Content
Today lets learn:
1. How to install ionic framework via ionic CLI (Command Line Interface) utility.
2. Install ionic 2 templates such as blank, tutorial/sidemenu, tabs(default ionic 2 template).
3. Run each project and check how each template looks.

Related Read:
Getting Started With IONIC APP
(Go through above link without fail)

Requirement

Ionic CLI (Command Line Interface) utility.
Node.js version 6 or higher: Download Nodejs
XCode for iOS: Cordova iOS Platform Guide
Android Studio for Windows: Cordova Android Platform Guide

Related Read:
Node.js Video Tutorial List

Troubleshooting

If you already had older version of Ionic and cordova installed, then make sure to uninstall them first

npm uninstall -g ionic cordova

Then make sure you’ve latest version of node.js installed.

Now install ionic and cordova globally using by logging in as a root user / system admin

npm install -g ionic cordova

My System Info, for this tutorial

ionic info

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.0
Gulp local:
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Windows 10
Node Version: v6.7.0

Video Tutorial: Starting IONIC 2 Project

[youtube https://www.youtube.com/watch?v=AcEY_bS37SU]

YouTube Link: https://www.youtube.com/watch?v=AcEY_bS37SU [Watch the Video In Full Screen.]

Installing CLI
Open command prompt and type the following command to install latest Ionic CLI

npm install -g ionic cordova

Ionic 2 apps are created and developed primarily through the Ionic CLI utility and use cordova to build and deploy as a native app.

Remember, Ionic CLI and Ionic framework are two different things. Ionic CLI is a utility which provides bunch of tools through the command line to help create and manage your Ionic project.

Important: The Ionic CLI will handle downloading the actual Ionic framework onto your machine for each project you create.

Ionic Starter templates

List of templates

ionic start -l

ionic start -list

Output

blank — A blank starter project for Ionic.
complex-list — A complex list starter template.
maps — An Ionic starter project using Google Maps and a side menu.
salesforce — A starter project for Ionic and Salesforce.
sidemenu — A starting project for Ionic using a side menu with navigation in the content area.
tabs — A starting project for Ionic using a simple tabbed interface.

But to my surprise some of these templates aren’t working. Ionic team might fix these or remove some of the templates in future release of ionic 2 framework. In this tutorial I’m showing blank, tutorial/sidemenu and tabs templates.

Note: Ionic uses tabs template as its default template.

Starting Ionic Project

ionic start is the command to start an Ionic project, followed by project name, followed by template name(if not specified, tabs template will be installed), followed by version of Ionic framework to be installed.

Note: Here myApp1, myApp2, myApp3 are my project names.
myApp1 has blank template.
myApp2 has tutorial or sidemenu template.
myApp3 has tabs template.

Blank Template

ionic start myApp1 blank --v2

Tutorial or Side Menu Template

ionic start myApp2 tutorial --v2

ionic start myApp2 sidemenu --v2

Tabs Template

ionic start myApp3 tabs --v2

ionic start myApp3 --v2

Launching Project in Web Browser

Get into the projects folder before using the command ionic serve or else it’ll through errors:

C:\ionic2>ionic serve

Couldn’t find ionic.config.json file. Are you in an Ionic project?

So first get into project folder and then run the project

C:\ionic2>cd myApp1
C:\ionic2\myApp1>ionic serve -l

We can see how our project looks via web browser. With labs feature we can see how our project looks on each platform – iOS, android and Windows.

ionic serve -l

-l is supplied to ionic serve command to invoke labs feature.

In this video tutorial we shall briefly look at Express web framework for Node.js

With today’s tutorial we will be discussing the basics of Express and we’ll also be running a small example application built with Express, also we shall have a first look at Jade Template Engine.

REPL
global installation of Express Framework

C:\>npm install -g express

This installs the express globally, so that you can access it from anywhere in the system.

Also note that, you’ll need internet connection to download and install these packages.

REPL
creating express example application

C:\>cd node
C:\node>express express_example

This creates a folder and some recommended folder structure. If you’re a total beginner to Express Framework, then it’s better to stick on with these folder structure.

Now open the package.json present inside express_example folder
JSON File
package.json

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "3.4.0",
    "jade": "*"
  }
}

It looks as shown above. It has 2 dependencies: express and jade. Install these dependencies from your command prompt / console.

REPL
installing dependencies

C:\>cd node
C:\node>cd express_example
C:\node\express_example>nmp install

This would install both express and jade, and another folder called node_modules gets created inside express_example folder.

Video Tutorials: Getting Started With Express Web Framework: Node.js

[youtube https://www.youtube.com/watch?v=CagrpUlQtdQ]

YouTube Link: https://www.youtube.com/watch?v=CagrpUlQtdQ [Watch the Video In Full Screen.]

Jade File
Jade to HTML

extends layout

block content
  h1= title
  p Welcome to #{title}

This jade file is present inside view folder.

More about Jade Template Engine in coming videos ..

Note:

Inside node_modules folder we have dependency modules.
Inside public folder javascript files, css files, images etc are present. Logical part of the application will be kept separate for security reasons.
Inside routes, routing configuration is present.
Inside views, the presentation part of the application is present. If Template Engine is used, those files will be present in this folder. Example: .jade files

app.js Starting point of execution.
package.json Contains app name, version, author, dependency module names etc.

Info: There are many popular websites built upon Express Framework, one that you might know is, MySpace!

Tag: framework

Ionic 2 Starter Templates