I'm trying to do this tutorial and I'm on the part of Angular Routing. And they're using angular-ui-router instead of ng-route. So I found a AngularUI router on github which gives a bit more info in using it. But I'm not getting the desired result.
I've added the route-ui through bower using bower install angular-ui-router in the rootfolder of my project which created all needed files etc.
I've added the needed files in my application.js
//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-ui-router
//= require angular-animate
//= require angular-rails-templates
//= require angular-app/app
//= require_tree ./angular-app/templates
//= require_tree ./angular-app/modules
//= require_tree ./angular-app/filters
//= require_tree ./angular-app/directives
//= require_tree ./angular-app/models
//= require_tree ./angular-app/services
//= require_tree ./angular-app/controllers
When I check the <head> I can see that the angular and router files are being loaded. Also my Angular functions are working.
In my angular-app folder I have a modules folder which has a searchModule.coffee.js file with the following content,
@app = angular.module('app.movieseat', [ 'ui.router' ]).config([
'$urlRouterProvider', ($urlRouterProvider) ->
$urlRouterProvider.otherwise '/state1'
# Now set up the states
'$stateProvider', ($stateProvider) ->
$stateProvider.state('state1',
url: '/state1'
templateUrl: '../templates/state1.html').state('state1.list',
url: '/list'
templateUrl: '../templates/state1.list.html'
controller: ($scope) ->
$scope.items = [
'A'
'List'
'Of'
'Items'
]
return
)
])
The templates folder is also inside the angular-app folder.
My body looks like this,
%body{"ng-app" => "app.movieseat"}
%div{"ui-view" => ""}
%a{"ui-sref" => "state1"} State 1
%a{"ui-sref" => "state2"} State 2
So I should include the state1.html in the ui-view but nothing is happening.
I am including the correct files, but the ui-view isn't doing anything. I'm also not getting a error in my console.
