Add Angular frontend - live Firehose sessionlive-firehose-project-mentor-session-20160221

Live coding session with @danyline. Add complete Angular frontend.

6 files changed, 101 insertions, 18 deletions

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 4a2ae1d..af30db1 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -13,4 +13,6 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
+//= require angular/angular
+//= require angular-resource/angular-resource
 //= require_tree .
diff --git a/app/assets/javascripts/notes.coffee b/app/assets/javascripts/notes.coffee
deleted file mode 100644
index 24f83d1..0000000
--- a/app/assets/javascripts/notes.coffee
+++ /dev/null
@@ -1,3 +0,0 @@
-# Place all the behaviors and hooks related to the matching controller here.
-# All this logic will automatically be available in application.js.
-# You can use CoffeeScript in this file: http://coffeescript.org/
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
new file mode 100644
index 0000000..d57f7b2
--- /dev/null
+++ b/app/assets/javascripts/notes.js
@@ -0,0 +1,14 @@
+(function(angular) {
+	angular
+		.module('nt.NotesApp', [
+			'nt.NotesService'
+		])
+		.controller('MainController', [
+			'$scope',
+			'NotesService',
+			function($scope, NotesService) {
+				$scope.notesService = NotesService;
+				NotesService.fetch();
+			}
+		]);
+})(window.angular);
diff --git a/app/assets/javascripts/services/notes.js b/app/assets/javascripts/services/notes.js
new file mode 100644
index 0000000..8c864a9
--- /dev/null
+++ b/app/assets/javascripts/services/notes.js
@@ -0,0 +1,60 @@
+(function(angular) {
+	angular
+		.module('nt.NotesService', [
+			'ngResource'
+		])
+		.service('NotesService', [
+			'$resource',
+			function($resource) {
+				var Note = $resource('/notes/:id.json',
+					{ id: '@id' },
+					{
+						update: {
+							method: 'PUT'
+						}
+					});
+				
+				this.current_note = null;
+				
+				// Get all notes
+				this.fetch = function() {
+					this.notes = Note.query();
+					
+					return this.notes.$promise;
+				};
+				
+				this.open = function(note) {
+					this.current_note = note;
+				};
+				
+				this.update = function() {
+					this.current_note.$update();
+				};
+				
+				this.create = function() {
+					if (this.new_note_title) {
+						Note.save(
+							{
+								title: this.new_note_title,
+								body: ''
+							},
+							(response) => {
+								delete this.new_note_title;
+								this.show_create_buttons = false;
+								this.fetch().then(() => {
+									this.current_note = this.notes.find((el) => {
+										return el.id === response.id;
+									});
+								});
+							}
+						)
+					}
+				};
+				
+				this.delete = function(note) {
+					this.notes.splice(this.notes.indexOf(note), 1);
+					note.$delete();
+				};
+			}
+		]);
+})(window.angular);
diff --git a/app/views/home/main.html.erb b/app/views/home/main.html.erb
index 990f007..8f3a7f3 100644
--- a/app/views/home/main.html.erb
+++ b/app/views/home/main.html.erb
@@ -3,30 +3,40 @@
 	
 	<div class="position-relative">
 		<div class="right-section">
-			<span class="display-none margin-top-neg-15">
-				<input type="text" class="form-field" />
-				<button type="button" class="button">Create</button>
-				<button type="button" class="button">Cancel</button>
+			<span class="margin-top-neg-15"
+				ng-show="notesService.show_create_buttons">
+				<input type="text" class="form-field"
+					ng-model="notesService.new_note_title" />
+				<button type="button" class="button"
+					ng-click="notesService.create()">Create</button>
+				<button type="button" class="button"
+					ng-click="notesService.show_create_buttons = false">Cancel</button>
 			</span>
 			
-			<a href="#" class="button">New</a>
+			<a href="#" class="button"
+				ng-hide="notesService.show_create_buttons"
+				ng-click="notesService.show_create_buttons = true">New</a>
 	
-			<a href="#" class="button margin-left-8">Save</a>
+			<a href="#" class="button margin-left-8"
+				ng-click="notesService.update()">Save</a>
 		</div>
 	</div>
 </div>
 
 <div class="margin-top-70">
 	<div class="sidebar position-fixed min-height-100%">
-		<a href="#" class="sidebar-link display-block padding-13">A Note</a>
-		<a href="#" class="delete-link display-none"><span>×</span></a>
-		<a href="#" class="sidebar-link display-block padding-13">A Note</a>
-		<a href="#" class="delete-link display-none"><span>×</span></a>
-		<a href="#" class="sidebar-link display-block padding-13">A Note</a>
-		<a href="#" class="delete-link display-none"><span>×</span></a>
+		<div ng-repeat="note in notesService.notes">
+			<a href="#" class="sidebar-link display-block padding-13"
+				ng-class="{ active: notesService.current_note === note }"
+				ng-click="notesService.open(note)"
+				ng-bind="note.title"></a>
+			<a href="#" class="delete-link"
+				ng-click="notesService.delete(note)"><span>×</span></a>
+		</div>
 	</div>
 
 	<div class="note-editor">
-		<textarea class="border-none outline-none width-100% font-size-16"></textarea>
+		<textarea class="border-none outline-none width-100% font-size-16"
+			ng-model="notesService.current_note.body"></textarea>
 	</div>
 </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 2b9affc..bf4eb07 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html>
+<html ng-app="nt.NotesApp">
 <head>
   <title>Notes</title>
   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   <%= csrf_meta_tags %>
 </head>
-<body>
+<body ng-controller="MainController">
 
 <%= yield %>