Skip to content

Sprangular extensions gems

Joshua Nussbaum edited this page Feb 21, 2015 · 16 revisions

To see a fully working extension, check out the sprangular_static_content gem.

This is a tutorial for creating a Sprangular extension. We will create a module called Sprangular.Example, with one route /test which will use a controller named TestCtrl.

Install sprangular's CLI

gem install sprangular_cli

Create a Spree extension with CLI

sprangular extension example
cd sprangular_example

Define an Angular module

It can depend on Sprangular if needed:

# in app/assets/javascripts/sprangular/example/module.coffee
angular.module('Sprangular.Example', ['Sprangular'])

Define Routes

# in app/assets/javascripts/sprangular/example/routes.coffee
angular.module('Sprangular.Example')
       .config ($routeProvider) ->
         
         $routeProvider.when '/test',
           controller: 'TestCtrl'
           templateUrl: 'test/index.html'

Define Controllers

# in app/assets/javascripts/sprangular/example/controllers/test.coffee
angular.module('Sprangular.Example').controller 'TestCtrl', ($scope) ->
  $scope.message = "Hello World!"

Add a Template

// app/assets/templates/test/index.html.slim
h1(ng-bind="message")

Define a manifest js

This manifest js will be used by the host app to require all the js at once.

// in app/assets/javscripts/sprangular/example.js

//= require example/module
//= require example/routes
//= require_tree example/controllers

Configure & test with host app

Update Gemfile

gem 'sprangular_example', github: 'me/sprangular_example'

Add dependency to asset pipeline

// in application.js
...
//= require sprangular
//= require sprangular/example
...

Add angular dependency

# in app/assets/javascripts/sprangular/host.coffee

angular.module 'YourApp', ['Sprangular', 'Sprangular.Example']

Test it out

Visit #!/test to see the results.

Clone this wiki locally