rails_angular_routes.md

Rails routes:

root 'home#index'

app/views/home/index.html.erb:

<div ng-app="receta">
  <div class="view-container">
    <div ng-view class="view-frame animate-view"></div>
  </div>
</div>

Angular routes:

 $routeProvider
      .when('/',
        templateUrl: "index.html"
        controller: 'RecipesController'
      ).when('/recipes/new',
        templateUrl: "form.html"
        controller: 'RecipeController'
      ).when('/recipes/:recipeId',
        templateUrl: "show.html"
        controller: 'RecipeController'
      ).when('/recipes/:recipeId/edit',
        templateUrl: "form.html"
        controller: 'RecipeController'
      )

So, if you go to /, it kill kick off the HomeController's index action, which renders that basic HTML to bootstrap the angular app. Angular will likely change the url to /#/, and whatever is after the # is angular's route. In this case it is also / so you get the index.html view of RecipesController.

Now, if your url is /#/recipes/3, the Rails route is still / and thus is still being served by HomeController's index method, but the Angular route (which is everything after #) is /recipes/3, which matches /recipes/:recipeId which means we get the show.html view of RecipeController.

It's slightly confusing, but the # is what divides the two systems' routing schems.

davetron5000/rails_angular_routes.md