ng_on_rails 0.0.1.2 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +76 -25
- data/app/assets/javascripts/directives/shared.js.erb +23 -1
- data/lib/ng_on_rails/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: cb7057e26bdca810363ede7c7321dfa6c488b205
|
|
4
|
+
data.tar.gz: 074bf7d73e00c03becd410f63c1605546c63ae3e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: cd18e125548c1a9190d5c69544d9e3fe31a835b4b9bc72af4e6390019589436557208a69dea9d2fe7dbbc89d5f2d62c34f5e81fa316aaa134feda85f9d8a81b6
|
|
7
|
+
data.tar.gz: d46407676a418af219fd147e511feae0d3dc6933b6b0a1b2d9e71e677178004411ee6ea6645224f1bd92eef0fc502826a731aa9dc686c295d8f86a2baddadd6b
|
data/README.md
CHANGED
|
@@ -28,9 +28,49 @@ gem 'ng_on_rails'
|
|
|
28
28
|
//= require_tree .
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
Finally, in your layout below the `javascript_include_tag "application"` load the Rails-service.
|
|
32
|
+
|
|
33
|
+
```html.erb
|
|
34
|
+
<script>
|
|
35
|
+
= render( partial: 'angular_app/rails_service', formats: ['js'], locals: { ng_data: ng_data} )
|
|
36
|
+
</script>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Here, ng_data is a rails varible discuss [below](#locals_to_json). A typical application layout (in Slim) might look like...
|
|
40
|
+
```slim
|
|
41
|
+
- ng_data = {}
|
|
42
|
+
- ng_data['BUILD'] = true
|
|
43
|
+
|
|
44
|
+
doctype html
|
|
45
|
+
html
|
|
46
|
+
head
|
|
47
|
+
title NgOnRails | TestApp
|
|
48
|
+
= csrf_meta_tags
|
|
49
|
+
= stylesheet_link_tag "application", :media => "all"
|
|
50
|
+
== yield :meta
|
|
51
|
+
== yield :styles
|
|
52
|
+
|
|
53
|
+
body ng-app="NgOnRailsApp" ng_controller="AppController as ctrl"
|
|
54
|
+
.wrapper
|
|
55
|
+
== yield
|
|
56
|
+
|
|
57
|
+
/ scripts
|
|
58
|
+
= javascript_include_tag "application"
|
|
59
|
+
script
|
|
60
|
+
= render( partial: 'angular_app/rails_service', formats: ['js'], locals: { ng_data: ng_data} )
|
|
61
|
+
== yield :javascripts
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
##### Service: Rails
|
|
65
|
+
As will be discussed in detail [below](#locals_to_json) NgOnRails will now provide you with a Rails-service that can be injected into your Angular Controllers. This service has all your rails variables contained in json. So @page and @pages will get mapped to Rails.page and Rails.pages to be used by your angular app.
|
|
66
|
+
|
|
67
|
+
##### Directives: render and render\_view
|
|
68
|
+
NgOnRails provides you with two directives, `render` for displapying angular partials and `render_view` for displaying angular views. More details [here](#render_directives).
|
|
69
|
+
|
|
70
|
+
##### Note: NgOnRailsApp
|
|
71
|
+
A AngularApp, NgOnRailsApp, is automatically created if it doesn't already exsit
|
|
32
72
|
```javascript
|
|
33
|
-
# app/assets/javascripts/app.js
|
|
73
|
+
# ng_on_rails/app/assets/javascripts/app.js
|
|
34
74
|
if (!window.NgOnRailsApp){
|
|
35
75
|
window.NgOnRailsApp = angular.module("NgOnRailsApp", ["ngResource","ngAnimate","ngSanitize"])
|
|
36
76
|
}
|
|
@@ -50,6 +90,8 @@ window.NgOnRailsApp = angular.module("NgOnRailsApp", ["ngResource","ngAnimate","
|
|
|
50
90
|
|
|
51
91
|
I would love feed back (especially on convention choices) and possibly other contributers. Send me a note!
|
|
52
92
|
|
|
93
|
+
-----------------------------------------------------------
|
|
94
|
+
|
|
53
95
|
#### Overview
|
|
54
96
|
|
|
55
97
|
As time goes on generators for angular controllers and services (rails-models) will be added, as well as some view helpers and directives. For the time being however the the gem is rather simple.
|
|
@@ -68,7 +110,7 @@ To get this work you simply need to load the rails_service.js.erb partial
|
|
|
68
110
|
```
|
|
69
111
|
"rails_service.js.erb" calls the `locals_to_json` helper method to automatically turn instance variables into json. Here `ng_data` is a local rails variable used to customize how this is converted. This will be discussed in detail [below](#locals_to_json).
|
|
70
112
|
|
|
71
|
-
* Your angular views
|
|
113
|
+
* Your angular views and partials should be placed in your\_app/app/views/angular_app. This solution is discussed in a handfull of places including [here](http://stackoverflow.com/questions/12116476/rails-static-html-template-files-in-the-asset-pipeline-and-caching-in-developmen), but the key parts are:
|
|
72
114
|
```ruby
|
|
73
115
|
# routes.rb
|
|
74
116
|
scope :angular_app do
|
|
@@ -81,22 +123,7 @@ def template
|
|
|
81
123
|
render template: '/angular_app/' + @path, layout: nil
|
|
82
124
|
end
|
|
83
125
|
```
|
|
84
|
-
|
|
85
|
-
```javascript
|
|
86
|
-
NgOnRailsApp.directive(
|
|
87
|
-
"render",
|
|
88
|
-
function(){
|
|
89
|
-
return {
|
|
90
|
-
restrict: "AE",
|
|
91
|
-
transclude: true,
|
|
92
|
-
template: function(el,attrs){
|
|
93
|
-
return '<div ng_include="\'/angular_app/'+attrs.url+'.html\'"></div>'
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
)
|
|
98
|
-
```
|
|
99
|
-
to load your angualar views in at 'app/views/angular_app'
|
|
126
|
+
Now you can then use the ng\_on\_rails directives 'render' and 'render\_view' to load your your angular partials and views in 'your\_app/app/views/angular\_app'.
|
|
100
127
|
|
|
101
128
|
#### Conventions
|
|
102
129
|
|
|
@@ -116,19 +143,43 @@ The test_app serves as an example of the conventions discussed below, but before
|
|
|
116
143
|
|-- angular_app/
|
|
117
144
|
|
|
118
145
|
```
|
|
119
|
-
Files should be named/put in folders in the same maner that you would in Rails. For instance, if you have a Page model, you would have a pages_controller.js and a service page.js. Then under views you would have pages/{show.html,index.html,...}.
|
|
146
|
+
Files should be named/put in folders in the same maner that you would in Rails. For instance, if you have a Page model, you would have a pages_controller.js and a service page.js. Then under views you would have pages/{show.html,index.html,\_page.html,\_form.html,...}.
|
|
147
|
+
|
|
148
|
+
<a name="render_directives"></a>
|
|
149
|
+
As in rails files prefixed with "\_" are 'partials' and should be loaded with the render directive. The 'views' should be loaded with the render\_view directive. The main distinguishing factor between views and partials are if they load a angular controller. Here are two examples: The first is a 'view', the index view for a Doc model, and the second is partial that displays information on the doc.
|
|
150
|
+
```slim
|
|
151
|
+
# VIEW: your_app/app/views/angular_app/docs/index.html.slim
|
|
152
|
+
div ng_controller="DocsController as ctrl" ng-init="ctrl.setDocs(docs)"
|
|
153
|
+
.div-table
|
|
154
|
+
.tr.header
|
|
155
|
+
.td.id ID
|
|
156
|
+
.td.name NAME
|
|
157
|
+
.td ...
|
|
158
|
+
|
|
159
|
+
# PARTIAL: your_app/app/views/angular_app/docs/_doc.html.slim
|
|
160
|
+
h3 Doc Details
|
|
161
|
+
h5
|
|
162
|
+
| ID:
|
|
163
|
+
span ng-bind="doc.id"
|
|
164
|
+
h5 CREATED AT
|
|
165
|
+
div ng-bind="doc.created_at"
|
|
166
|
+
h5 DESCRIPTION
|
|
167
|
+
div ng-bind="doc.description"
|
|
168
|
+
```
|
|
169
|
+
Note that using distinguishing characterisic of loading the controller via `ng_controller` loading layout is parallel to how views and partials are distinguished in rails.
|
|
120
170
|
|
|
121
|
-
*
|
|
171
|
+
* Note: I try to have as little AngularJS outside of my angular_app folder. I will load the "Rails" service and set `ng-app="NgOnRailsApp"` in the application layout. Additionally I will usuallly have an angular `AppController` that is very limited in behavior that is part of the application layout. Again assuming I have a "Page" model I will handle the views like this
|
|
122
172
|
|
|
123
173
|
```html
|
|
124
|
-
# app/views/pages/index.html
|
|
125
|
-
<!-- Apart from this
|
|
126
|
-
<div
|
|
174
|
+
# your_app/app/views/pages/index.html
|
|
175
|
+
<!-- Apart from this render_view directive don't put any other angular in this file -->
|
|
176
|
+
<div render_view="true" url="pages/index" ng-init="pages=ctrl.rails.pages"></div>
|
|
127
177
|
|
|
128
178
|
|
|
129
|
-
# app/views/angular_app/pages/show.html
|
|
179
|
+
# your_app/app/views/angular_app/pages/show.html
|
|
130
180
|
<div ng_controller="PagesController as ctrl">
|
|
131
181
|
<div ng-repeat="page in pages">
|
|
182
|
+
<div render='true' url='pages/page'>
|
|
132
183
|
<div ng-show="ctrl.is_editing(page)">...
|
|
133
184
|
```
|
|
134
185
|
*In the above, `ctrl.rails` has been set to the Rails service in the AppController*
|
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
NgOnRailsApp.directive(
|
|
2
|
+
"renderView",
|
|
3
|
+
function(){
|
|
4
|
+
return {
|
|
5
|
+
restrict: "AE",
|
|
6
|
+
transclude: true,
|
|
7
|
+
template: function(el,attrs){
|
|
8
|
+
format = attrs.format || "html"
|
|
9
|
+
console.log(attrs.url,format)
|
|
10
|
+
return '<div ng_include="\'/angular_app/'+attrs.url+'.'+format+'\'"></div>'
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
)
|
|
1
15
|
NgOnRailsApp.directive(
|
|
2
16
|
"render",
|
|
3
17
|
function(){
|
|
@@ -5,7 +19,15 @@ NgOnRailsApp.directive(
|
|
|
5
19
|
restrict: "AE",
|
|
6
20
|
transclude: true,
|
|
7
21
|
template: function(el,attrs){
|
|
8
|
-
|
|
22
|
+
format = attrs.format || "html"
|
|
23
|
+
url_parts = attrs.url.split("/")
|
|
24
|
+
if (url_parts[url_parts.length-1].trim()==""){
|
|
25
|
+
url_parts.pop()
|
|
26
|
+
}
|
|
27
|
+
last = url_parts.pop()
|
|
28
|
+
url_parts.push("_"+last)
|
|
29
|
+
path = url_parts.join("/")
|
|
30
|
+
return '<div ng_include="\'/angular_app/'+path+'.'+format+'\'"></div>'
|
|
9
31
|
}
|
|
10
32
|
}
|
|
11
33
|
}
|
data/lib/ng_on_rails/version.rb
CHANGED