Web Programming examples

Google Maps,AngularJS

Archives

Ruby on Rails

Ruby on Rails Tutorial AngularJS $resource, server-side data

1)Rails model, migration, test data

1.Rails model

$ rails generate model User name:string email:string

2.migration

$ rake db:migrate

3.test data

$ rails c

User.create(name: "testuser1", email: "test1@example.com")
User.create(name: "testuser2", email: "test2@example.com")
User.create(name: "testuser3", email: "test3@example.com")

2)Rails controller

1.generate controller

$ rails generate controller Users

2.index action

$ vi app/controllers/users_controller.rb

  def index
    @users = User.all
    render json: @users
  end

3)Rails resource route

$ vi config/routes.rb

  scope '/app' do
    resources :users
  end

4)AngularJS $resource

1.angular-resource include

$ vi app/assets/javascripts/application.js

//= require angular-resource

2.ngResource DI

$ vi app/assets/javascripts/mymodule.js.erb

myModule = angular.module('myModule', ['ui.bootstrap','ngRoute','ngResource']);

5)AngularJS route

1.confirm Rails route

$ rake routes
users GET    /app/users(.:format)           users#index

2.AngularJS route

$ vi app/assets/javascripts/mymodule.js.erb

 .when("/users", {
  templateUrl: "<%= asset_path('users/index.html.erb') %>"
  })

6)AngularJS user index controller

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("UsersIndexCtrl", function($scope,$resource) {
  var rtn = $resource('/app/users');
  $scope.users = rtn.query();
});

7)AngularJS index template view

$ vi app/assets/templates/users/index.html.erb

<div ng-controller="UsersIndexCtrl">
<h1>index</h1>
<table class="table table-bordered">
  <thead>
    <td>name</td>
    <td>email</td>
  </thead>
  <tbody>
    <tr ng-repeat="user in users">
      <td>
        {{user.name}}
      </td>
      <td>
        {{user.email}}
      </td>
    </tr>
  </tbody>
</table>
</div>

8)add link to user index

$ vi app/views/layouts/_header.html.erb

<li><%= link_to "Index", "/users" %></li>

9)Rails route

*Problem

1."http://localhost:3000/users"
2.browser reload
3."No route" error

*Avoidance

$ vi config/routes.rb

get 'users', to: 'layouts#index'

Ruby on Rails

Ruby on Rails Tutorial　AngularJS, route, default route

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