Toaster: It is non blocking notification JavaScript library where will use it to display notification for users, we need to download it from here.

Loading Bar: We’ll use the loading bar as UI indication for every XHR request we’ll made, to get this plugin we need to download it from here.

UI Bootstrap theme: to style our application, we need to download a free bootstrap ready made theme from http://bootswatch.com/ I’ve used a theme named “Amelia”

Step 2: Organizing your project structure

If you are using VS 2012 then create new Basic MVC 4 Web Application and name it “FoursquareAngularJS.Web”, we’ll not use any features of MVC in our application but I prefer to use this template because we can use Web API directly, you can do the same using Web Forms template if you wish. If you are using VS 2013 you can choose the empty template but do not forget to check “Web API” as a core reference. Having organized project structure from the beginning is vital for your project success, because we’ll deal with many small JavaScript files, you will notice how important it is once the project grows in size. There are different schools to organize your project all come with pros and cons, but I prefer to organize my files based on architecture types (Services, controllers, directives, filters, views, etc..). So in our case all our Angular code will be contained in Parent folder named “app” as the image below:

For the third part libraries (AngularJS & Bootstrap UI) or any ready made JavaScript libraries we’ll add them to root folder named “scripts”, you can delete any prior JS files in this folder and add the new extracted files from step 1.

Step 3: Adding the shell page:

Now we’ll add the “Single Page” which is a container for our application, it will contain the navigation menu and Angular directive for rendering different application views “pages”. Those views can be rendered in JavaScript without the need to download new page from the server, we’ll gain performance here because we are not downloading new HTML page each time the user navigating to a new page. After adding the “index.html” page we need to reference the 3rd party JavaScript and CSS files needed as the below:

Till now we have created the container for our application, we will visit this page frequently to reference the new JS files we’ll add during this tutorial.

Step 4: “Booting up” our application

We’ll add file named “app.js” in the root of folder “app”, this file is responsible to create modules in applications, in our case we’ll have a single module called “FoursquareApp”, we can consider module as collection of services, directives, filters which is used in the application. Each module has configuration block where it gets applied to the application during the bootstrap process.

Step 5: Configuring AngularJS Routes

Our application will have three different views: (For now you can think about them as pages),

We need to use Angular Routing to help us loading the correct view when user request it, thanks for the built in Angular service named “$routeProvider”, this service mainly responsible to wire the controllers, view templates, and the current URL location in the browser, usually every view template is mapped to a unique controller. To use this service we need to inject “ngRoute” module in our application. “ngResource” and “ui.bootstrap” are injected for further use. The code snippet below will show us how we can manage routing information in Angular app, so open file “app.js” and paste the code below:

In the code above I’ve defined for now a single URL “/explore” and mapped it to the view “placesresults.html”, so when the user requests http://explore4sq.azurewebsites.net/index.html#/explore, Angular will match it with the route we configured and load the correct view “placesresults.html”, then it invokes the controller “placesExplorerController” where we can write our business logic for this view. As well we’ve configured the route provider to return to URL “/explore” when ever it didn’t find any matching URL by using the “otherwise” function.

Step 6: Adding our first controller and view

It’s time to add our first controller “placesExplorerController”, so add new JS file to the folder “app–>controllers”, name this file “placesExplorerController.js”, you can name the file anything you want but I usually use the same name for file and controller name, open the file and paste the code snippet below:

1

2

3

app.controller('placesExplorerController',function($scope){

$scope.exploreNearby="New York";

});

As we mentioned before, controllers are just normal JavaScript functions responsible to implement our business logic and validation, if you look at the snippet above, you’ll notice that we’ve injected an object named “$scope”, it is really a glue between the controller and the view, you can think of it as container holding the data we want to project on the view. Here we’ve added new model to the “$scope” object named “exploreNearby”, this model will be used on the view we’ll add now. So let’s add new view to the folder “app–>views”, name this file “placesresults.html”. then open the file and clear it’s content from any html tags such as html body or head, then paste the code snippet below:

1

2

3

4

5

6

7

8

<div>

<div>

<input type="text"data-ng-model="exploreNearby"/>

</div>

<div>

<h5>PlacesfoundNearby({{exploreNearby}})</h5>

</div>

</div>

I’m using Bootstrap to style the application, Source code for application on GitHub has a lot extra html elements and CSS classes to make it responsive. Those have been removed from code snippets for clarity. By looking at the code snippet above you will notice that we used directive called “ng-model”, this directive is responsible for the two-way data binding, in simple words; we’ve bind the text input to the model “exploreNearby” so if the value of the text input has changed, thne the value of the model will be changed and vise verse. Notice how we do not use “$scope” object when we reference the model in the html, using the double curly brackets {{}} is the right way to reference model in the DOM elements i.e. {{exploreNearBy}}.

Step 7: Wiring “FourSquareApp” module to our App

This is the most forgotten step that usually devs fall into, we need to tell Angular in which part of our application should be active, we can have Mini-SPA i.e. part of the application is SPA and other parts are traditional client/server request. But in our case we want the entire application to use Angular, so the right place to add the directive “ng-app” is on html tag of the shell page “index.html”, it will look at the code snippet below:

1

2

3

4

5

6

7

8

9

10

<html data-ng-app="FoursquareApp">

<head>

<!--Rest of html ishere,removed forclarity-->

</head>

<body>

<!--Rest of html ishere,removed forclarity-->

<div data-ng-view=""></div>

</body>

</html>

<!--Rest of html ishere,removed forclarity-->

By looking at the code snippet above we’ll notice that we added new directive called “ng-view” inside html body, this directive will act as a placeholder for our views, so each view configured in the routes will be loaded in this section of out shell page. In other words this directive will get replaced by the html content of our views, so in our case the html fragments in file “placesreuslts.html” will replace this directive. It is important to specify the module name “FoursquareApp” once we use ng-app attribute because in our case we are using modules. We can run the application now and test the routing configuration and the two way binding feature. Don’t forget to reference the 2 newly added JS files to the bottom of Index.html page as the code snippet below:

Comments

Arya, thanks for your comment, I apologize about this, This has been fixed now.
WordPress code snippet plugin didn’t like putting html in the body of the post and keeps removing html tags, I had to do this again.

So… why do you say to download a bunch of libraries and then use CDNs for most of them? It’s a bit confusing to download angular.js, then have a bunch of cdn urls for angular-route, angular-resource, etc. Ditto for angular-ui-bootstrap. If I don’t want to rely on CDNs, do I need to download angular-route, angular-resource, angular-animate? In particular, it seems odd that I would need both ui-bootstrap.min.js and ui-bootstrap-tpls.js.

Hello Joe, Thanks for your comment, I’ve mentioned that we have to download the angular files needed so post readers will know what files to use in this case, I’ve used CDN because I do not want to serve those angular files from my hosting server, I want them to get served from CDN, not a big deal.

As well you need ui-bootstrap-tpls.js so you can use modal popup, otherwise there is no template for the modal so it wont open. try removing this file.

You have to add the shell page (index.html) to the root of your project, i recommend you to fork the working project from Github and you can do step by step based on the blog posts, if you felt lost get back to working version.

I have completed “Building SPA using AngularJS – Part 1” as your instruction……. But unfortunately i can’t run it…… there was an error message …….

“Server Error in ‘/’ Application.
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.

This is an issue with the dependencies injected, please check the app.js file and make sure that you are injecting the services required, as well make sure you are referencing the JS file in index.html page in correct order.

I’ve checked it, when you referenced the JS files there is “mce-text/javascript” in the type for app.js and forplacesExplorerController.js. You should reference them as the below.
As well double check the spelling for $scope.explorerNearby = “Astana”; You typed it different than the view {{exploreNearby}}

hmm, always use Chrome and keep the console tab opened so you will notice the errors when they happen directly. Your error was like you forgot to reference the file, most probably you will not forget to reference a file 🙂 Good luck in learning AngualrJS!

Hi Anil,
The idea of single page applications is to load all the necessary resources up front and do a full page load only when the application is requested for the first time. That’s why you will find all the resources in Index.html page. By doing this you will reduce the server trips between client and server as all the JS files are loaded earlier. For larger SPAs the number of controllers, service, etc… will increase and you will end up having lot of JS files; to solve this issue you need to concatenate and minify those small JS files into larger JS file. You can achieve this by using a task runner such as GulpJS or Grunt, check my other post where I used GulpJS for minifying and concatenating JS files http://wp.me/p4nPYq-7j hope this clarifies your concerns.

First of all thanks for this step by step article. I am a newbie in this. I got an error while running the Part 1 example code.
Error says “Access to restricted URI denied”, in browser console and the input field is also not showing.
I fixed this by changing [templateUrl: “app/views/placesresults.html”].

Hi,
You are welcome, but this has been for a while, I do not know what is the exact issue is but I’m suspecting that it is generated from Foursquare API, double check that app_id and key for 4SQ is correct.