fc2ブログ

Ruby on RailsでWebサイト公開!に挑戦中

レンタルサーバーでWebサイトを公開すべく、Ruby on Railaの勉強をする日々を語ります。

PREV | PAGE-SELECT | NEXT

≫ EDIT

AngularJSとRails4でブログアプリ作成(2)コントローラ、AngularJSスクリプトインクルード、レイアウトファイル作成

AngularJSとBootstrap3を使ってブログアプリを作成しています。下記サイトを参考にしています。
http://asanderson.org/posts/2013/06/03/bootstrapping-angular-rails-part-1.html


1)コントローラ作成

Mainコントローラとindexアクションを作成します。

$ rails generate controller Main index

2)アプリケーションレイアウトファイル作成

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

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

<%= yield %>

</body>
</html>

3)プリコンパイルの設定追加

$ vi config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( main.js )

4)AngularJSスクリプト作成

$ vi app/assets/javascripts/controllers/main/mainIndexCtrl.js.coffee

@IndexCtrl = ($scope) ->
$scope.data =
posts: [{title: 'My first post', contents: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet lobortis vulputate. Ut tempus, orci eu tempor sagittis, mauris orci ultrices arcu, in volutpat elit elit semper turpis. Maecenas id lorem quis magna lacinia tincidunt. In libero magna, pharetra in hendrerit vitae, luctus ac sem. Nulla velit augue, vestibulum a egestas et, imperdiet a lacus. Nam mi est, vulputate eu sollicitudin sed, convallis vel turpis. Cras interdum egestas turpis, ut vestibulum est placerat a. Proin quam tellus, cursus et aliquet ut, adipiscing id lacus. Aenean iaculis nulla justo.'}, {title: 'A walk down memory lane', contents: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo sem, imperdiet in faucibus et, feugiat ultricies tellus. Vivamus pellentesque iaculis dolor, sed pellentesque est dignissim vitae. Donec euismod purus non metus condimentum porttitor suscipit nibh tempor. Etiam malesuada elit in lectus pharetra facilisis. Fusce at nisl augue. Donec at est felis. Sed a gravida diam. Nunc nunc mi, egestas non dignissim et, porta aliquam ante.'}]

5)インクルードの設定変更

$ vi app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-ui-bootstrap-tpls
#= require_self
#= require_tree ./controllers/main

6)ビューを作成

$ vi app/views/main/index.html.erb

<div class="container" ng-controller="IndexCtrl">
<h1 class="text-center">My blog</h1>
<div class="row" ng-repeat="post in data.posts">
<h2>{{ post.title }}</h2>
<p>{{ post.contents }}</p>
</div>
</div>


7)動作確認

http://localhost:3000/main/index

| AngularJS | 10:45 | comments:0 | trackbacks:0 | TOP↑

COMMENT















非公開コメント

TRACKBACK URL

http://hbnist76.blog.fc2.com/tb.php/477-ce7048c2

TRACKBACK

PREV | PAGE-SELECT | NEXT