{"id":1048,"date":"2015-07-29T05:27:31","date_gmt":"2015-07-29T05:27:31","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1048"},"modified":"2015-07-30T06:48:29","modified_gmt":"2015-07-30T06:48:29","slug":"angularjs-navigation-menu","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/angularjs-navigation-menu\/","title":{"rendered":"Ruby on Rails Tutorial Bootstrap3,AngularJS,Navigation menu"},"content":{"rendered":"

(1)Install,Initial setting<\/strong><\/p>\r\n\r\n

1)create a application<\/strong><\/p>\r\n\r\n

$ cd ~\/rails_projects
\r\n$ rails new sample_ang<\/p>\r\n\r\n

2)Gemfile<\/strong><\/p>\r\n\r\n

$ cd sample_ang
\r\n$ vi Gemfile<\/p>\r\n\r\n

ruby '2.0.0'
\r\ngem 'therubyracer', platforms: :ruby
\r\n#gem 'turbolinks'<\/p>\r\n\r\n

gem 'bootstrap-sass', '3.3.5'
\r\ngem 'autoprefixer-rails'
\r\ngem 'angularjs-rails', '1.4.0'
\r\ngem 'angular-ui-bootstrap-rails','0.13.0'<\/p>\r\n\r\n

3)bundle install<\/strong><\/p>\r\n\r\n

$ bundle install<\/p>\r\n\r\n

4)add AngularJS<\/strong><\/p>\r\n\r\n

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

\/\/= require jquery
\r\n\/\/= require jquery_ujs
\r\n\/\/= require angular
\r\n\/\/= require angular-ui-bootstrap-tpls<\/p>\r\n\r\n

5)add Bootstrap<\/strong><\/p>\r\n\r\n

$ vi app\/assets\/stylesheets\/custom.css.scss<\/p>\r\n\r\n

@import "bootstrap-sprockets";
\r\n@import "bootstrap";<\/p>\r\n\r\n

(2)AngularJS Module<\/strong><\/p>\r\n\r\n

1)app\/assets\/javascripts\/mymodule.js<\/strong><\/p>\r\n\r\n

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

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

2)application.html.erb<\/strong><\/p>\r\n\r\n

$ vi app\/views\/layouts\/application.html.erb<\/p>\r\n\r\n

<html ng-app="myModule"><\/p>\r\n\r\n

3)app\/assets\/javascripts\/application.js<\/strong><\/p>\r\n\r\n

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

\/\/= require mymodule<\/p>\r\n\r\n

(3)Bootstrap3 Navigation Menu<\/strong><\/p>\r\n\r\n

1)Bootstrap3 Fixed navbar<\/strong>
\r\nref.http:\/\/getbootstrap.com\/examples\/navbar-fixed-top\/<\/p>\r\n\r\n

$ vi app\/views\/layouts\/_header.html.erb<\/p>\r\n\r\n

\r\n<!-- Fixed navbar -->\r\n<nav class="navbar navbar-default navbar-fixed-top">\r\n  <div class="container">\r\n    <div class="navbar-header">\r\n      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">\r\n        <span class="sr-only">Toggle navigation<\/span>\r\n        <span class="icon-bar"><\/span>\r\n        <span class="icon-bar"><\/span>\r\n        <span class="icon-bar"><\/span>\r\n      <\/button>\r\n      <a class="navbar-brand" href="#">Project name<\/a>\r\n    <\/div>\r\n    <div id="navbar" class="navbar-collapse collapse">\r\n      <ul class="nav navbar-nav">\r\n        <li class="active"><a href="#">Home<\/a><\/li>\r\n        <li><a href="#about">About<\/a><\/li>\r\n        <li><a href="#contact">Contact<\/a><\/li>\r\n        <li class="dropdown">\r\n          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"><\/span><\/a>\r\n          <ul class="dropdown-menu">\r\n            <li><a href="#">Action<\/a><\/li>\r\n            <li><a href="#">Another action<\/a><\/li>\r\n            <li><a href="#">Something else here<\/a><\/li>\r\n            <li role="separator" class="divider"><\/li>\r\n            <li class="dropdown-header">Nav header<\/li>\r\n            <li><a href="#">Separated link<\/a><\/li>\r\n            <li><a href="#">One more separated link<\/a><\/li>\r\n          <\/ul>\r\n        <\/li>\r\n      <\/ul>\r\n      <ul class="nav navbar-nav navbar-right">\r\n        <li><a href="..\/navbar\/">Default<\/a><\/li>\r\n        <li><a href="..\/navbar-static-top\/">Static top<\/a><\/li>\r\n        <li class="active"><a href=".\/">Fixed top <span class="sr-only">(current)<\/span><\/a><\/li>\r\n      <\/ul>\r\n    <\/div><!--\/.nav-collapse -->\r\n  <\/div>\r\n<\/nav><\/pre>\r\n\r\n
2)CSS<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/stylesheets\/custom.css.scss<\/p>\r\n\r\n
\r\nbody {\r\n  min-height: 2000px;\r\n  padding-top: 70px;\r\n}<\/pre>\r\n\r\n
3)app\/views\/layouts\/application.html.erb<\/strong><\/p>\r\n\r\n
$ vi app\/views\/layouts\/application.html.erb<\/p>\r\n\r\n
\r\n<!DOCTYPE html>\r\n<html ng-app="myModule">\r\n<head>\r\n  <title>SampleAng<\/title>\r\n  <%= stylesheet_link_tag    'application', media: 'all' %>\r\n  <%= javascript_include_tag 'application' %>\r\n  <%= csrf_meta_tags %>\r\n<\/head>\r\n<body>\r\n\r\n<%= render 'layouts\/header' %>\r\n<%= yield %>\r\n\r\n<\/body>\r\n<\/html><\/pre>\r\n\r\n
(4)Bootstrap3 Navigation Menu AngularJS<\/strong><\/p>\r\n\r\n
1)header partial<\/strong><\/p>\r\n\r\n
$ vi app\/views\/layouts\/_header.html.erb<\/p>\r\n\r\n
\r\n#1 Collapse\r\n\r\n<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">\r\n \u3000↓\r\n<button type="button" class="navbar-toggle" data-toggle="collapse" ng-click="isCollapsed = !isCollapsed">\r\n\r\n<div id="navbar" class="navbar-collapse collapse">\r\n\u3000↓\r\n<div id="navbar" class="navbar-collapse" collapse="isCollapsed">\r\n\r\n#2 Dropdown\r\n\r\n<li class="dropdown">\r\n  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"><\/span><\/a>\r\n  <ul class="dropdown-menu">\r\n\u3000\u3000↓\r\n<li class="dropdown" dropdown>\r\n  <a class="dropdown-toggle" dropdown-toggle>Dropdown <span class="caret\r\n"><\/span><\/a>\r\n  <ul class="dropdown-menu"><\/pre>\r\n\r\n
2)AngularJS Script<\/strong><\/p>\r\n\r\n
$ vi app\/assets\/javascripts\/mymodule.js<\/p>\r\n\r\n
\r\nmyModule = angular.module('myModule', ['ui.bootstrap'])\r\n\r\nfunction CollapseDemoCtrl($scope) {\r\n  $scope.isCollapsed = true;\r\n}\r\nCollapseDemoCtrl.$inject = ['$scope'];\r\nmyModule.controller('CollapseDemoCtrl', CollapseDemoCtrl);<\/pre>\r\n\r\n
3)Header Partial<\/strong><\/p>\r\n\r\n
$ vi app\/views\/layouts\/_header.html.erb<\/p>\r\n\r\n
<nav  ng-controller="CollapseDemoCtrl" class="navbar navbar-default navbar-fixed-top"><\/p>\r\n\r\n
(5)Rails Root<\/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\r\n\r\n$ vi config\/routes\r\n  root 'layouts#index'<\/pre>\r\n\r\n

\r\n(6)test operation<\/strong><\/p>\r\n\r\n
http:\/\/localhost:3000\/<\/p>\r\n","protected":false},"excerpt":{"rendered":"
(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 […]<\/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":[138,139],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1048"}],"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=1048"}],"version-history":[{"count":3,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1048\/revisions"}],"predecessor-version":[{"id":1068,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1048\/revisions\/1068"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1048"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}