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