in Angular

Starting with angular, routing and ng-view

Share on Facebook0Tweet about this on TwitterShare on LinkedIn0Share on Google+0Email this to someone

For those who are doing web development knows that Angular came in like a storm and intruduced a new way to build web apps. After Angular a few other libraries/framworks have poped up ex: aurelia.

So for you who havent looked that much on Angular, I wanted to do a short blog post about how to setup a Angular project from the begining, together with ngRoute.

Before we start with all the fun, you need to install Node.js, if you dont have Node.js installed go to: Install nodejs before you continue.

So let’s start, i’m a cmd kind of guy, so first create a new workspace that we can work in, a file structure that looks like this:

  • www
    • scripts
    • app
    • index.html

I’m doing this with the command prompt in windows: (win+r) type ”cmd” hit enter.
Execute the following commands to get the file structure:

Now we have a workspace setup, lets install the packages that we need for angular and angular-route (ngRoute), navigate to the workspace folder, and install angular and angular-route

A new folder will be added to the solution ”node_modules” inside that folder there will be one folder for each package that we just installed ”angular” and ”angular-route”.

Now all the setup is done, let’s start coding. Open upp the index.html file, all that we are adding here are some HTML markup and the script references to angular and angular route, content will look like this, notice the ng-app attribute on the html tag, the value will be the name on our app, I choosed the name:

You can choose what you feel is right for you, but remember to put your name where I put mine.

Nextup we need a start view with angular controller we also need to do basic setup for the app togehther with routing. So first let’s create all the files that are needed:

Open the app.js file that we just created and add the following code, basic setup for angular:

What did I just copy/paste?  The first line is initialazing the angular app with the ng-app name that we declared in the html, we also injected the ngRoute. In the config we are setting up the routeProvider,this tells what HTML and Controller to load dependent on the URL, what we added was just a single ‘/’, the start page, and that will load the index.html inside the home directory and use the HomeController that we also added in the Home driectory.

Now we need to create the HomeController, so open up HomeController.js and add the following code:

This is a basic Controller in angular, we are adding the controller in the ‘angularNgRouteDemo’ app, so the app knows about it, we also inject the $scope, $scope in angular are the object that refers to the applications model, and in this case, the application model in the HomeController.

Next up the index.html in the home directory, add the following html markup:

Almost done, now we have all the setup we need, all that is done is to add all the references that we havent added to the main index.html file. Add the following 2 script references to the index.html in the root underneath the angular-route script:

We are done, let’s run it! If you already have tried to run the application by viewing the root index.html file in a browser you should have seen a error message like this in the javascript console:

runinbrowsererror

This error are apearing becuase you are trying to open the file directly in the browser, we need to host it somewhere (webserver) so we can view it on localhost, if you are from a environment where this is handle for your ex: eclipse or visual studio, dont worry, this it is simple solve.

Luckily we have node installed, so open up the cmd and run the following command

You just installed the http-server, this is a simple command line http server that make hosting static files like this real simple.
When that is installed you have 2 options to run your application:

Navigate to the directory and run the http-server command:

Or tell the http-server what directory we want to host as a argument:

The ”-o” is a option for http-server that open up the browser after the server is up and running. Now you are up and running with the angular-ngRoute demo, next step is to add more views and navigation, so let’s do that real quick.

Let’s create the files we will work with (4 new files, 2 new folders)

Secondpage/index.html

Secondpage/secondpagecontroller.js (i’m not doing any functionality right now just adding the files and the content needed)

Thirdpage/index.html

Thirdpage/thirdpagecontroller.js

Now we need to add the routing in the app.js before we are adding the html, se let’s extend the config route to the following:

Next add the navigation to the root index.html:

Also add the new script references for each new controller that we added:

Now we run the project, navigate to the directory in the cmd and open it with the http-server that we installed earlier:

That’s it, and it should look something like this: (remember we havend added any css)

demo

You can find the code on github: Github Angular-NgRoute-Demo

 

Share on Facebook0Tweet about this on TwitterShare on LinkedIn0Share on Google+0Email this to someone

Write a Comment

Comment