UI Router : Create an Angular.JS app with a RESTful Rails API Pt.3
Part: 3 Routing with ui.router
In this section we are going to use ui.router to make routes for our Note app.
Step: 1 Building some routes
Let’s delete our {{ “Hello “ + “World” }} from our app/views/application/index.html.erb and add the following code.
# app/views/application/index.html.erb<div class="angular-view-container" ui-view></div>
the ui-view is how ui.router displays the templates inside of our main html page.
The next action will be to build our routes. Open our app/assets/javascripts/angular-app/app.js file and add the following code
# app/assets/javascripts/angular-app/app.jsangular
.module(‘app’, [‘ui.router’, ‘ngResource’])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state(‘home’, {
url: ‘/’,
templateUrl: ‘home.html’,
controller: ‘HomeController as ctrl’
})
.state(‘home.new’, {
url: ‘new’,
templateUrl: ‘home/new.html’,
controller: ‘NotesController as ctrl’
})
.state(‘home.notes’, {
url: ‘notes’,
templateUrl: ‘home/notes.html’,
controller: ‘NotesController as ctrl’
}); $urlRouterProvider.otherwise(‘/’);});
What we did here was create 3 different states (routes) for our angular app. We used a service called $stateProvider which has the function (.state) where we call our route. Like $stateProvider.state(‘home’, {}). The first argument is our route name and the second argument is an object with our keys. In our object we specify a url, in this case ‘/’, a templateUrl (‘home.html’), and a controller (‘HomeController as ctrl’). We will need to build our templateUrl and our controller, but first you will notice that we have two other states (‘home.new’ & ‘home.notes’). These are nested states so in our browser if we are at the root directory it will show:
localhost:3000/#but if we were wanting to go to the new page it would show up as
localhost:3000/#/newthis would be a nested page. We are going to build this up later just add this content to your app.js file for now, and we will move on.
Step: 2 using angular templates in rails
So if we were to load our home page we would get nothing right now except for a 404 error, and some controller errors. Let’s fix our 404 error first. With Angular we are going to place all of our views inside of a folder called templates, but for rails to access this we need a special tool. Luckily we have a gem called ‘angular-rails-templates’ that does the job perfectly.
#Gemfile gem 'angular-rails-templates'
install the gem
$ bundle installadd it to our javascript manifest
#app/assets/javascripts/application.js//= require angular
//= require angular-ui-router
//= require angular-resource** add this line **
//= require angular-rails-templates//= require_tree .
We also need to inject our app.js module with ‘templates’
# app/assets/javascripts/angular-app/app.jsangular
.module('app', ['ui.router', 'ngResource', 'templates'])
now that we have our templates required we need to create a template folder that angular will read for our .html files. Let’s create the following folders and files that we specified in our app.js file.
app/assets/javascripts/templates/home.htmlapp/assets/javascripts/templates/home/new.htmlapp/assets/javascripts/templates/home/notes.html
Step: 3 Add info to our templates
let’s populate our templates with some information. We will work on our home.html first.
# app/assets/javascripts/templates/home.html<div class="navbar">
<h1>ngNoteApp</h1>
<hr>
<br> <a href=”#” ui-sref=”home.new” ui-sref-active=”active”>New Note</a>
<a href=”#” ui-sref=”home.notes” ui-sref-active=”active”>My Notes</a></div><br>
<hr><div ui-view></div>
the ‘ui-sref’ is what we use for the nested routes in our .states. It calls the template link for us. The ui-sref-active will make the current link selected the active class. Lets go ahead and add some basic css to our project.
# app/assets/stylesheets/application.css/*
*= require_tree .
*= require_self
*/a {
text-decoration: none;
color: white;
padding: 8px;
background-color: green;
border: solid 2px black;
}.active {
background-color: blue;
}
This will make our active tab blue and our inactive tab green. Lets finish up building our two other templates.
# app/assets/javascripts/templates/home/new.html<h1>Add note</h1><form>
<label for=”title”>Title</label>
<input name=”title”>
<label for=”body”>Content</label>
<input name=”body”>
<input type=”submit” value=”Add Note”>
</form>
We will wire up the form to use angular later, but this is just for formatting.
# app/assets/javascripts/templates/home/notes.html<h1>Notes</h1><ul>
<li ng-repeat="note in ctrl.notes">
<h3>{{ note.title }}</h3>
<p>
{{ note.body }}
</p>
</li>
</ul>
We turn these into notes from our database in another lesson. Right now we just want to make sure this works. The ctrl.notes is array we will define in our NotesController next.
The last thing we need to do before we check it in our browser is add a controller to our module.
Lets create the following files and add some code to them.
NotesController.js
# app/assets/javascripts/controllers/angular-app/controllers/NotesController.jsangular
.module(‘app’)
.controller(‘NotesController’, NotesController);function NotesController() { var ctrl = this; ctrl.notes = [
{
title: ‘First Note’,
body: ‘This if my first note.’
},
{
title: ‘Second Note’,
body: ‘This if my second note.’
}
];
}
HomeController.js
# app/assets/javascripts/controllers/angular-app/controllers/HomeController.jsangular
.module(‘app’)
.controller(‘HomeController’, HomeController);function HomeController() {}
Let’s run our rails server and see what we got.
$ rails server In your browser go to
localhost:3000click on ‘My Notes’, and you should see this:
You should see a form when you click on the New Note. This form will not work yet, but it will soon enough.
Congratulations you know have a semi-functional note app using angular and rails. Join me for the next lesson to learn how to use $resource and start making API calls to the Rails app we built in part 1.
Please leave any comments or advice you have below. Thanks!!
