Greetings All,

It feels really good to see you here. And yes!, it is a bit early from my earlier blog but trust me, you will definitely enjoy to read this.

In this article, we are going to learn “How to override or customize the pre generated URLs with your own URLs to communicate from back-end in EmberJS app”. By finishing this, you will able to do more customization in ember based app and of course, you will also be able to use ember in those application for which API has been already generated or written with specific URLs.

So without wasting more time, let’s start:

Prerequisites:
Please make sure these are the basic need to go through this blog but all of them can be according to your requirement and need.

  1. There should be a running application written in EmberJS.
  2. A back-end running server with exposing APIs. .
  3. Assuming, One of API is following and will return all user list in JSON format with basic user model.
     http://localhost:8080/jft/api/v1/getAllUserList. 
  4. Assuming, there is a user model in our ember app, having some basic user property as returning by our above mentioned API.

Generally, if we want to want to fetch all user list in our code then we writes following code in one of our ember route file, as of now suppose it is user.js in app/routes directory.

IMPORTANT: This code will make an Ajax request with URL like “http://localhost:4200/myApp/users” if our app is running on “http://localhost:4200/myApp/”
as per guidelines of ember standard documentation.

Please note down that our data in not lying on URL which generated by ember itself rather that its lying on different URL. Now, if there will an Ajax request with ember pre generated URL then “404 error” will be there. This is most common problem in EmberJS.

Now what to do? Its seems that we are stuck now.

Hey, Don’t be panic as ember always take care about their developers. Here the terms introduces named as Adapter for which we are looking here and this gives us power to override and customize our URLs as we want. Wow, This is awesome and the exact the thing we want.

Now we will see “How to deal with Adapters in ember“:

If we are using Ember-CLI then task will be little ease for us. Just need to run following command in terminal:

 PATH-TO-PROJECT$ ember generate adapter user 

Please make sure adapter name here is user which should  must be same name as our model name. Here both are same for me i.e. user, but please make sure model name and adapter name must be same in your case as well.

Above fired command will generate a adapter named as user in your app/adapters directory with file name user.js. The file will look like following:

Now its our turn to do something funny and juicy with adapter to customize our URL. There are some build-in functions provided by adapter which can be overridden with ease. We will see one of them:

 urlForFindAll(arg1, arg2). 

Above methods will take two arguments: modelName, snapshot. As of now we are not using any of them as they are beyond the scope of this blog.

Now modify our user.js adapter file as following:

Now if we will run our app then actual URL which will go to the server for fetching user list will be:

 http://localhost:8080/jft/api/v1/getAllUserList. 

Yes, That the exact thing we want.

Awesome, you have finished it.

I would like to add one point which is: By using same concept we can override any URL of our app as our adapters gives us a list of methods to override them. Some of the methods are:

Thanking you all,

Please give your feedback in comments as It will always make me to write much better.

Hope to see you again. Until then Happy Learning  🙂 ………………………………………………………………….