Web Programming examples

Google Maps,AngularJS

Category Archives: Ruby on Rails

Ruby on Rails

Ruby on Rails Tutorial user show view, gravatar image and a sidebar

1)Rails controller show action

$ vi app/controllers/users_controller.rb

  def show
    user = User.find(params[:id])
    gravatar_id = Digest::MD5::hexdigest(user.email.downcase)
    @user_info = {
      user: user,
      gravatar_url: "https://secure.gravatar.com/avatar/#{gravatar_id}"
    }
    render json: @user_info
  end

2)AngularJS route

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

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

myModule.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
......
    .when("/users/:id", {
     templateUrl: "<%= asset_path('users/show.html.erb') %> "
     })

3)AngularJS controller "UsersShowCtrl"

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

myModule.factory("userResource", function($resource) {
  return $resource("/app/users/:id", { id: "@id" },
    {
.........
      'show':    { method: 'GET', isArray: false },
.........
    }
  );
});

myModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource) {
  $scope.user_info = userResource.show({ id: $routeParams.id });
});

4)AngularJS template 

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

<div ng-controller="UsersShowCtrl">
  <div class="row">
    <div class="col-xs-6 col-sm-4">
      <h3>{{user_info.user.name}}</h3>
      <h1>
    <img alt="{{user_info.user.name}}" src="{{user_info.gravatar_url}}" />
    {{user_info.user.name}}
      </h1>
    </div>
    <div class="col-xs-6 col-sm-8">
      <h3>Main View</h3>
    </div>
  </div>
</div>

5)Rails route

*Preblem

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

*Avoidance

$ vi config/routes.rb

get 'users/*other', to: 'layouts#index'

Ruby on Rails

Ruby on Rails Tutorial AngularJS $resource, REST service

1)AngularJS $resource REST factory

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

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

myModule.factory("userResource", function($resource) {
  return $resource("/app/users/:id", { id: "@id" },
    {
      'create':  { method: 'POST' },
      'index':   { method: 'GET', isArray: true },
      'show':    { method: 'GET', isArray: false },
      'update':  { method: 'PUT' },
      'destroy': { method: 'DELETE' }
    }
  );
});

2)AngularJS index controller

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

myModule.controller("UsersIndexCtrl", function($scope,userResource) {
  $scope.users = userResource.index()
});

 

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 static pages,navigation menu link

(1)Rails layout file

*Bootstrap3 "container"

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

<body>
<%= render 'layouts/header' %>
<div class="container">
  <div ng-view></div>
  <%= render 'layouts/footer' %>
</div>

</body>

(2)static pages

1)home

*Bootstrap3 Jumbotron, text-center
*rails.png app/assets/images/rails.png
ref.http://rubyonrails.org/images/rails.png

$ vi app/assets/templates/static_pages/home.html.erb

<div class="jumbotron">
  <h1>Welcome to the Sample App</h1>
  <p class="text-center">
    This is the home page for the
    <a href="http://railstutorial.jp/">Ruby on Rails Tutorial</a>
    sample application.
  </p>
</div>
<a href="http://rubyonrails.org/"><img alt="Rails" src="/assets/rails.png" /></a>

2)help

$ vi app/assets/templates/static_pages/help.html.erb

<h1 class="text-center">Help</h1>
<p>
  Get help on the Ruby on Rails Tutorial at the
  <a href="http://railstutorial.jp/help">Rails Tutorial help page</a>.
  To get help on this sample app, see the
  <a href="http://railstutorial.jp/book">Rails Tutorial book</a>.
</p>

3)about

$ vi app/assets/templates/static_pages/about.html.erb

<h1 class="text-center">About Us</h1>
<p>
  The <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
  is a project to make a book and screencasts to teach web development
  with <a href="http://rubyonrails.org/">Ruby on Rails</a>. This
  is the sample application for the tutorial.
</p>

4)contact

$ vi app/assets/templates/static_pages/contact.html.erb

<h1 class="text-center">Contact</h1>
<p>
  Contact Ruby on Rails Tutorial about the sample app at the
  <a href="http://railstutorial.jp/contact">contact page</a>.
</p>

(3)navigation menu link

1)header

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

1.site

<%= link_to "Sample App", "/static_pages/home", class: "navbar-brand" %>

2.home,help

<ul class="nav navbar-nav navbar-right">
  <li><%= link_to "Home", "/static_pages/home" %></li>
  <li><%= link_to "Help", "/static_pages/help" %></li>
</ul>

2)footer

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

<ul class="nav nav-pills pull-right">
  <li><%= link_to "About", "/static_pages/about" %></li>
  <li><%= link_to "Contact", "/static_pages/contact" %></li>
  <li><a href="http://news.railstutorial.org/">News</a></li>
</ul>

 

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

Ruby on Rails

Ruby on Rails Tutorial Bootstrap3,footer menu

1)footer partial

*Bootstrap3 "nav nav-pills"
*Bootstrap3 "pull-right"

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

<div class="footer">
  <ul class="nav nav-pills pull-right">
    <li><%= link_to "About",   '#' %></li>
    <li><%= link_to "Contact", '#' %></li>
    <li><a href="http://news.railstutorial.org/">News</a></li>
  </ul>
  <small>
    <a href="http://railstutorial.org/">Rails Tutorial</a>
    by Michael Hartl
  </small>
</div>

2)application.html.erb

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

.....
<body>
  <%= render 'layouts/header' %>
  <%= render 'layouts/footer' %>
</body>
</html>

3)css

$ vi app/assets/stylesheets/custom.css.scss

/* footer */

.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}
Ruby on Rails

Ruby on Rails Tutorial Bootstrap3,AngularJS,Navigation menu

1 Comment

(1)Install,Initial setting

1)create a application

$ cd ~/rails_projects
$ rails new sample_ang

2)Gemfile

$ cd sample_ang
$ vi Gemfile

ruby '2.0.0'
gem 'therubyracer', platforms: :ruby
#gem 'turbolinks'

gem 'bootstrap-sass', '3.3.5'
gem 'autoprefixer-rails'
gem 'angularjs-rails', '1.4.0'
gem 'angular-ui-bootstrap-rails','0.13.0'

3)bundle install

$ bundle install

4)add AngularJS

$ vi app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-ui-bootstrap-tpls

5)add Bootstrap

$ vi app/assets/stylesheets/custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

(2)AngularJS Module

1)app/assets/javascripts/mymodule.js

$ vi app/assets/javascripts/mymodule.js

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

2)application.html.erb

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

<html ng-app="myModule">

3)app/assets/javascripts/application.js

$ vi app/assets/javascripts/application.js

//= require mymodule

(3)Bootstrap3 Navigation Menu

1)Bootstrap3 Fixed navbar
ref.http://getbootstrap.com/examples/navbar-fixed-top/

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

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar/">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

2)CSS

$ vi app/assets/stylesheets/custom.css.scss

body {
  min-height: 2000px;
  padding-top: 70px;
}

3)app/views/layouts/application.html.erb

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

<!DOCTYPE html>
<html ng-app="myModule">
<head>
  <title>SampleAng</title>
  <%= stylesheet_link_tag    'application', media: 'all' %>
  <%= javascript_include_tag 'application' %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= render 'layouts/header' %>
<%= yield %>

</body>
</html>

(4)Bootstrap3 Navigation Menu AngularJS

1)header partial

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

#1 Collapse

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 　↓
<button type="button" class="navbar-toggle" data-toggle="collapse" ng-click="isCollapsed = !isCollapsed">

<div id="navbar" class="navbar-collapse collapse">
　↓
<div id="navbar" class="navbar-collapse" collapse="isCollapsed">

#2 Dropdown

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  <ul class="dropdown-menu">
　　↓
<li class="dropdown" dropdown>
  <a class="dropdown-toggle" dropdown-toggle>Dropdown <span class="caret
"></span></a>
  <ul class="dropdown-menu">

2)AngularJS Script

$ vi app/assets/javascripts/mymodule.js

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

function CollapseDemoCtrl($scope) {
  $scope.isCollapsed = true;
}
CollapseDemoCtrl.$inject = ['$scope'];
myModule.controller('CollapseDemoCtrl', CollapseDemoCtrl);

3)Header Partial

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

<nav  ng-controller="CollapseDemoCtrl" class="navbar navbar-default navbar-fixed-top">

(5)Rails Root

$ vi app/controllers/layouts_controller.rb

class LayoutsController < ApplicationController
  def index
    render "layouts/application"
  end
end

$ vi config/routes
  root 'layouts#index'


(6)test operation

http://localhost:3000/