Ruby on Rails Tutorial Bootstrap3,AngularJS,Navigation menu

(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

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

(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/

Web Programming examples

Ruby on Rails Tutorial Bootstrap3,AngularJS,Navigation menu

One thought on “Ruby on Rails Tutorial Bootstrap3,AngularJS,Navigation menu”