ng_on_rails 0.0.1.2 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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