Alphasoftware and AngularJS

Part 2, 

June 19th 2016.

Happy Fathers Day everyone!

Today we will be discussing how to set up device deployable product.

Since my aim is to create primarily iPhone, iPad apps I will be working on Mac, but the steps are the same in windows based computer.

So, let's get going.

First we need to setup required frameworks for our project.

Go to NodeJs.org and download node.js to your computer and install. Once installed npm, the node package manager is also available for you to use.

You can verify the installation with

node -v  and npm -v commands you should see the version for each.

If okay so far, we are set to go.

Now we are going to install the packages with npm. Follow the commands one by one and you will install the required packages.

sudo npm install -g corodova, supply the password when prompted.

that will download and install cordova ( -g option installs globally)

Now we will create the program, I will call my program BLOG.

Enter the command

cordova create blog com.niniswinecellar blog

your company identifier is com prefixed, so if your id is alpha.com the instead f com.niniswinecellar use com.alpha.

You will see Cordova creates the folder and necessary files.

Now cd to blog with cd blog command.

You can inspect the contents with ls command and see the files are there.

Next, we will add iOS platform with this command

cordova platforms add iOS.

We will be adding more packages at this point with another package manager - Bower.

Let's add Bower with npm.  

npm install -g bower ( if there are errors you will need to run sudo nom install -g bower)

Once installed we will use bower to install other components.

We are still in the blog directory and install the following

bower install angular

bower install angular-route

bower install bootstrap

bower install ngCordova.

I like using Brackets editor since it comes with preview web server and the path is easily managed.

When you looked at the directory of blog you will see a folder - www, if you examine that folder will have all the deployable files and an index.html. We will be working in that folder.

Start the Brackets and load the folder blog into it.

And select the index.html file and start the preview server.
You will see phone gap log in flashing screen.
If that happens all good.

Here is the video:

https://www.youtube.com/watch?v=fFScQpnIY-U

This is how I have added the packages to the project, a step I did not show in the last video:
https://www.youtube.com/watch?v=QwOMlGddy1U