Ionic load local json file


Earlier today I hit a bug with my AngularJS code running in Ionic.

Running the project with

>ionic serve

worked as expected.

Running the project after

ionic build
ionic emulate ios (or android)


A quick debug using Safari to debug the ios emulator revealed what the problem was.

The code:

$http.get(‘/data/help.json’)… was actually requesting http://data/help.json – so it did not understand that it was a relative url.

The fix:

change ‘/data/help.json’ to ‘data/help.json’ and everything works.

I hope this helps someone having fun coding in Angular and Ionic.


Preparing for Angular2 – a talk @ JSIL 2015


I had an opportunity to speak at JSIL 2015, in Israel, about Angular 2 and how to prepare for it.

WARNING – The talk is in Hebrew 😉

And its on YouTube – yeay!

I’d love to hear your feedback.


Learning GIT – quickly

GIT is an open source distributed source control system. If you don’t know GIT – you should.

Here are some useful links for learning what GIT is and how to use it. Do yourself a favor and start using GIT today. It has made my work sooooo much easier.

Atlassian has some great tools and contributes a great deal to the open source community.

If you want to learn GIT:

If you want a great UI for running GIT commands check out SourceTree:

The No #1 question – oops, how do I undo something in GIT

Happy Coding.


From Angular1 to Angular2

For the past two years, I’ve been writing Angular Apps for my company and helping other companies make the transition to writing modern web applications that are Responsive, Mobile/Hybrid capable and highly productive.

Angular 2 is coming with many improvements and I want to make sure my code is ready.

So I decided to start “From Angular1 to Angular2” a series of posts that will show how to prepare your Angular1 apps for the switch to Angular 2.



Any suggestions on topics you want me to explore in this series are welcome.


from Angular1 to Angular2: Replacing Route, View, Controller with Directives (Components)

One of the first things we need to do in our Angular1 in order to prepare for Angular2 it seems is to replace View + Controller + Route with a Component.

.state(‘stateName’, {

url: ‘/route1’,

templateUrl: ‘/home.template.html’,

controller: ‘HomeController’,

controllerAs: ‘vm’


I’m preparing some examples of how to do this. Stay tuned…


AngularJS – Development Environment

AngularJS seems to be the “it” framework for developing modern web apps.

If you want to ENJOY creating and working with AngularJS projects, you need the correct tools.

Whenever I train or consult teams on AngularJS, I always start with making sure they have the best tools to be the most productive.

Here is how I setup an AngularJS development environment:

1. NodeJS – The engine for running JavaScript tools.
NodeJS is miraculous. It can be used for so many things that I cannot list here.
In terms of developing web apps (using JavaScript frameworks), NodeJS is an engine that runs all other tools.

1.1 NPM – Node Package Manager
This is installed with NodeJS and provides us with the ability to install node modules (our tools are all node modules) easily onto our environment.

2. Yeoman – Web Scaffolding (Project Structure Tools)
One of the most time consuming and manual error prone aspects of building modern web projects is creating a standard project structure and establishing coding standards for these projects. Yeoman is a tool that uses code generators to create/add modules, services, view and more to a project in an automated and consistent manner.

And if that’s not enough, these code generators are written as NodeJS modules, in JavaScript, so you can create your own!

> npm install -g yo

2.2 Yeoman AngularJS generators
There are several Yeoman AngularJS code generators. The one I use the most for modular projects is .

> npm install -g generator-ng-appgen

3. git distributed source control
Probably the most widely used distributed source control system in the world. If you haven’t tried it, you’re in for a treat.

4. Bower – a package (dependency) manager for web apps
Bower is used for installing components from github and more. Bower requires NodeJS and git.

> npm install -g bower

5. GruntJS the JavaScript task runner
GruntJS is the Ant/MSBuild of the JavaScript world. It uses plugins (written in JavaScript) to perform anything from minification, packaging, deployment, code checking and more.

> npm install -g grunt-cli

6. Gulp the streaming build system
Gulp and GruntJS can do the same types of things, they just do them differently. Gulp works with streams and GruntJS works with files.
From my experience it seems that production/system professionals tend to like GruntJS and developers tend to prefer Gulp.

> npm install -g gulp

Testing your Development Environment

Once you have installed all of the tools described here, make sure you can run them by performing the following commands.

a. Open a Terminal/Command window

b. Create a test folder
> mkdir test
> cd test
> yo ng-appgen

After you answer a few questions, you should see that files are created in your test folder and that bower and npm are running to install components (this can take a while).

Once everything is done, run the following command (from the terminal/command windows while in the /test folder) to see if your AngularJS project actually runs:

>grunt serve

Open a browser and navigate to:

If all is well, you should see that the address in the browser changes to:

Welcome to the wonderful world of Angular/JavaScript web app development!

AngularJS – Building Real Apps

Hi, I’m JW.

I spend much of my time, helping companies, create or update their apps using AngularJS.

In the spirit of Open Source (AngularJS is an open source project), I thought I should find ways to share my experience with others.

I am hoping to do more, but here is my first attempt…
An AngularJS course, focused on showing people how to build real world apps based on my experience.

What are real world apps? Well, basically apps that need to work in the real world, handle data, security, perform well and provide great user experiences for users. This means different things to different people, so this course is my take, based on my experience with building apps that people use every day.

AngularJS – Building Real Apps – March 16, 23, 28 2015 (Ramat Gan College, Israel) – Course Syllabus.

I hope my course participants will enjoy the course. If it goes well, I’ll try to share some of it online soon.