1)AnguraJS route
1.angular-route include
$ vi app/assets/javascripts/application.js
//= require angular-route
2.ngRoute DI
$ vi app/assets/javascripts/mymodule.js
myModule = angular.module('myModule', ['ui.bootstrap','ngRoute']);
2)$routeProvider
$ vi app/assets/javascripts/mymodule.js.erb
myModule = angular.module('myModule', ['ui.bootstrap','ngRoute']); myModule.config(function($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); $routeProvider .when("/static_pages/help", { templateUrl: "<%= asset_path('static_pages/help.html.erb') %>" }) .when("/static_pages/about", { templateUrl: "<%= asset_path('static_pages/about.html.erb') %>" }) .when("/static_pages/contact", { templateUrl: "<%= asset_path('static_pages/contact.html.erb') %>" }) .otherwise({ templateUrl: "<%= asset_path('static_pages/home.html.erb') %>" }); });
3)AngularJS templates
$ vi app/assets/templates/static_pages/home.html.erb
<h2>Home</h2>
$ vi app/assets/templates/static_pages/about.html.erb
<h2>About</h2>
$ vi app/assets/templates/static_pages/help.html.erb
<h2>Help</h2>
$ vi app/assets/templates/static_pages/contact.html.erb
<h2>Contact</h2>
4)AngularJS ng-view
$ vi app/views/layouts/application.html.erb
...... <%= render 'layouts/header' %> <div ng-view></div> <%= render 'layouts/footer' %> .....
5)Rails route
1.Rails layouts_controller, config/routes.rb
$ vi app/controllers/layouts_controller.rb
class LayoutsController < ApplicationController def index render "layouts/application" end end
$ vi config/routes.rb
root 'layouts#index'
2.default route
$ vi config/routes.rb
get 'static_pages/*other', to: 'layouts#index'
6)AngularJS $location, html5 mode, <base> tag
$ vi app/views/layouts/application.html.erb
<head> ..... <base href="/"> </head>
7)test operation
http://localhost:3000/static_pages/help
http://localhost:3000/static_pages/about
http://localhost:3000/static_pages/contact