Creating your first AngularJS and MySQL app [video tutorial]

To the right is a screenshot of a small AngularJS app which you can create using Hyper IDE. In fact, you don’t have to do anything but follow a simple little wizard to create it. Below is a video where I walk through some of the more important constructs of the app. The app will integrate with your server-side backend automatically, and update your MySQL database automatically for you, using an HTTP REST based ORM library. And in fact, even the database will be automatically created for you, such that you can literally “start out running”.

In the video below, I will walk you through some of the more important constructs of the app, and explain how it is tied together. Notice, if you wish, you can start out with this app, and modify it as you see fit, to gain a better understanding of AngularJS, HTTP REST based web services, and how to integrate an AngularJS app with a MySQL backend in your own apps. If you want to follow this tutorial on your own machine, you’ll need to make sure you do the following.

  1. Download Phosphorus Five (which contains Hyper IDE and Hyper Core)
  2. Make sure you have MySQL server installed

The installation of Phosphorus Five requires that you either have a Ubuntu server, or that you have Visual Studio or Mono Develop (Linux) on your machine. All of these tools are either free, or Open Source.

If you wish to dive deeper into Hyper Core the MySQL REST based ORM library we are using here, which is a fairly new module in Phosphorus Five, you can check out its documentation online. If you want to read up more on AngularJS, you can find its documentation here.

Editing the app online

Notice, if you wish, you can even edit the app online, using Hyper IDE, by creating a new HTML and JS file, containing the contents of the original files that we created in our tutorial, inside of the “test” folder of the online installation of Hyper IDE. This is necessary, since you don’t have write access to the files directly inside of the “/modules/todo/” folder. However, by replicating the files’ content, in other files, inside of the “/test/” folder, you can play around a little bit with the code online. The best way to follow the tutorial though, is definitely to download Phosphorus Five and Hyper IDE on your own machine.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.