Simple Restify & AngularJs App · Just a Coder

  • So, what i’m gonna do is that i’ll have a backend restful service running on node.js, and i’ll also have another SPA powered app, and AngularJS app which will make http requests either to my service and to the 3rd party service to get the data.
  • server.listen() takes 2 parameters, first is the port which the app will be serving on, the second is a function callback, that we just inform the user.
  • If we did not need to use ngRoute then we’d define our app like this:

    But if you want to access your app which is already defined before then you can do it like:

    Now we should configure our app’s routing:

    I think it’s pretty clear to see what’s going on here, but to clarify a little bit:

    takes 2 parameters, first is the url, the second is a function and in that function, we define our angular controller and the html view page.

  • is our router function, to route in an angularjs app, simply inject $location built-in service to your controller, and use it’s function.
  • Similar to the controller definition, first parameter is the service’s name ant the second is a function.

For a job application, i was asked to build an SPA app, i wanted to use AngularJS for it’s simplicity, and also wanted to include RestifyJs

@CKGrafico: Simple Restify & AngularJs App · Just a Coder

I could just build an Angular app, too, but i needed to have some zipcode data of some places, and i found this api. They restrict you to use the api, which is only 50 requests in an hour or so. Instead of making get requests each time, i wanted to include some of the initial data in my app.

When planning this, i wanted to use Restify. It’s a lightweight RESTful framework (they call it as a module, though), built on Node.js, it’s simple and i just wanted to give it a try, instead of Express.

So, what i’m gonna do is that i’ll have a backend restful service running on node.js, and i’ll also have another SPA powered app, and AngularJS app which will make http requests either to my service and to the 3rd party service to get the data.

and have your package.json file ready. To install restify open up your command line interface, and type the following command :

To have the most basic app you could just navigate their link here. Now let’s import the restify & filesystem first:

fs is a built-in module which can be used to do operations on file system.

As you can see, it’s so simple to start our app. We also enabled CORS requests for possible CORS issues on line 2.

server.listen() takes 2 parameters, first is the port which the app will be serving on, the second is a function callback, that we just inform the user. Because we’ll start this using node, we’ll be able to see whether the app started or not.

Let’s define the endpoint to get our data

server.get() just declares that our api has an HTTP GET method. As you can see the first parameter is the route map for it. (e.g : localhost:8080/zip would be convenient) And the second parameter is the callback function

will return Dallas in this case.

For the proper order of the code, see the full dataService.js here

Have a look at the folder here which holds our angularjs app. There are four files :

Lets declare an angularjs basic app:

We declare our app, and add ngRoute as our dependency to enable routing/navigation in our app. This a seperate module from the core AngularJs. You can view the docs here

If you are declaring a brand new app, you have to include the second parameter, i mean the array one. If we did not need to use ngRoute then we’d define our app like this:

But if you want to access your app which is already defined before then you can do it like:

Now we should configure our app’s routing:

I think it’s pretty clear to see what’s going on here, but to clarify a little bit:

takes 2 parameters, first is the url, the second is a function and in that function, we define our angular controller and the html view page. We’ll talk about these a bit later.

navigates the unknown url paths to our home view, other than the 2 defined above.

this controller used to manage our home.html page. Let’s have a look at it:

First we access to our angularjs app, then we add a controller to it, named as mainController. The second parameter is the controller’s declaration.

function which returns a promise. After having that data, we simply add it to our $scope, if an error occurs we show an alert.

function. Angularjs takes care of everything else.

Another angularjs controller, it simply injects built-in services and zipService.

, we defined it when configuring our app on app.js file. So we simply get the value, then try to get location data via our zipCodeService

In angular, one of the ways to implement a service is by defining a factory. You can read about the services on official docs here

We access to our app and register our service. Similar to the controller definition, first parameter is the service’s name ant the second is a function. It just injects the built-in $http service, so why do we even need this service?, you may ask. Well, for a more maintainable and modular development, just use these services and if you need to change your back-end api or the endpoints etc., you just have to change one file, your service. Instead of writing the same code on every controller, having a service helps a lot.

It has 2 functions, both of which returns a promise coming from our HTTP requests. I’m returning promise here because it makes it flexible. For example, sometimes you may just want to get a value and sometimes you just want something else, by returning a promise, you can do whatever you want with that data in your controller.

resides in Views folder and they have simple definitions. One thing note, we did not define ng-controller property to any of our html tags. Since we defined the definitions for the routing in app.js, we don’t need to use these tags.

tag, either. Also note that the order of the is important, for example if you add zipService.js before app.js it won’t work, same for the angular.js and the angular-route.js

tag, if we don’t add this, routing the app won’t work.

We have 2 apps, one is a node.js app and an angularjs app. We need to run them concurrently, because if we don’t run the Restify app, we will not be able to get the data. So let’s run it first:

You should see the log on the console that the app’s working.

and see it in action!

Thank you for reading, i know this was a long post but it just happened, keep coding!

Simple Restify & AngularJs App · Just a Coder

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.