{"id":1063,"date":"2015-07-30T05:18:35","date_gmt":"2015-07-30T05:18:35","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1063"},"modified":"2015-07-30T05:18:35","modified_gmt":"2015-07-30T05:18:35","slug":"angularjs-route-default-route","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/angularjs-route-default-route\/","title":{"rendered":"Ruby on Rails Tutorial\u3000AngularJS, route, default route"},"content":{"rendered":"

1)AnguraJS route<\/strong><\/p>\r\n\r\n

1.angular-route include<\/strong><\/p>\r\n\r\n

$ vi app\/assets\/javascripts\/application.js<\/p>\r\n\r\n

\/\/= require angular-route<\/p>\r\n\r\n

2.ngRoute DI<\/strong><\/p>\r\n\r\n

$ vi app\/assets\/javascripts\/mymodule.js<\/p>\r\n\r\n

myModule = angular.module('myModule', ['ui.bootstrap','ngRoute']);<\/p>\r\n\r\n

2)$routeProvider<\/strong><\/p>\r\n\r\n

$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n

\r\nmyModule = angular.module('myModule', ['ui.bootstrap','ngRoute']);\r\n\r\nmyModule.config(function($routeProvider, $locationProvider) {\r\n  $locationProvider.html5Mode(true);\r\n  $routeProvider\r\n    .when("\/static_pages\/help", {\r\n     templateUrl: "<%= asset_path('static_pages\/help.html.erb') %>"\r\n     })\r\n    .when("\/static_pages\/about", {\r\n     templateUrl: "<%= asset_path('static_pages\/about.html.erb') %>"\r\n     })\r\n    .when("\/static_pages\/contact", {\r\n     templateUrl: "<%= asset_path('static_pages\/contact.html.erb') %>"\r\n     })\r\n    .otherwise({\r\n     templateUrl: "<%= asset_path('static_pages\/home.html.erb') %>"\r\n     });\r\n});<\/pre>\r\n\r\n
3)AngularJS templates<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/templates\/static_pages\/home.html.erb<\/p>\r\n\r\n
<h2>Home<\/h2><\/p>\r\n\r\n
$ vi app\/assets\/templates\/static_pages\/about.html.erb<\/p>\r\n\r\n
<h2>About<\/h2><\/p>\r\n\r\n
$ vi app\/assets\/templates\/static_pages\/help.html.erb<\/p>\r\n\r\n
<h2>Help<\/h2><\/p>\r\n\r\n
$ vi app\/assets\/templates\/static_pages\/contact.html.erb<\/p>\r\n\r\n
<h2>Contact<\/h2><\/p>\r\n\r\n
4)AngularJS ng-view<\/strong><\/p>\r\n\r\n
$ vi app\/views\/layouts\/application.html.erb<\/p>\r\n\r\n
\r\n......\r\n  <%= render 'layouts\/header' %>\r\n  <div ng-view><\/div>\r\n  <%= render 'layouts\/footer' %>\r\n.....<\/pre>\r\n\r\n
5)Rails route<\/strong><\/p>\r\n\r\n
1.Rails layouts_controller, config\/routes.rb<\/strong><\/p>\r\n\r\n
$ vi app\/controllers\/layouts_controller.rb<\/p>\r\n\r\n
\r\nclass LayoutsController < ApplicationController\r\n  def index\r\n    render "layouts\/application"\r\n  end\r\nend<\/pre>\r\n\r\n
$ vi config\/routes.rb
\r\n  root 'layouts#index'<\/p>\r\n\r\n
2.default route<\/strong><\/p>\r\n\r\n
$ vi config\/routes.rb
\r\n  get 'static_pages\/*other', to: 'layouts#index'<\/p>\r\n\r\n
6)AngularJS $location, html5 mode, <base> tag<\/strong><\/p>\r\n\r\n
$ vi app\/views\/layouts\/application.html.erb<\/p>\r\n\r\n
\r\n<head>\r\n.....\r\n  <base href="\/">\r\n<\/head><\/pre>\r\n\r\n
7)test operation<\/strong><\/p>\r\n\r\n
http:\/\/localhost:3000\/static_pages\/help
\r\nhttp:\/\/localhost:3000\/static_pages\/about
\r\nhttp:\/\/localhost:3000\/static_pages\/contact<\/p>\r\n","protected":false},"excerpt":{"rendered":"
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: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[137],"tags":[35,142,143],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1063"}],"collection":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/comments?post=1063"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1063\/revisions"}],"predecessor-version":[{"id":1064,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1063\/revisions\/1064"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1063"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}