How to add Restangular and Lodash to Ionic framework

tutorials
1

i’m having some difficulty getting restangular and lodash integrated with my project.

UPDATE: upon writing this query, i’ve actually found a solution :smile:

I’m not sure if you need both lodash and ng-lodash, but i spent a few hours working on this, re-gulping and re-starting my ionic server, and it didn’t work until i had both lodash and ng-lodash. Please let me know if i’m wrong.

Here are my steps:

open terminal in your ionic’s app folder

  1. npm install --save restangular
  2. npm install --save lodash
  3. bower install --save restangular
  4. bower install --save lodash (you want to pick the version >1.3 but <2.5. )
  5. bower install --save ng-lodash

within index, replace

<script src="lib/ionic/js/ionic.bundle.js"></script>

with

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script> <!--- (you may / may not have this installed) -->
<script src="lib/restangular/dist/restangular.min.js"></script>
<script src="lib/ng-lodash/build/ng-lodash.min.js"></script>
<script src="lib/lodash/dist/lodash.min.js"></script>
<script src="lib/lodash/dist/lodash.underscore.min.js"></script>

In gulpfile.js, add the following at the end of your requires:

var _ = require('lodash');

in app.js, include the libraries at the top:

angular.module('myFirstApp',
[   'ionic'
, 'ngCordova'
, 'ngLodash'
, 'restangular'
])

You can then go about including it where needed:

.config(function($stateProvider, $urlRouterProvider, $compileProvider, RestangularProvider) {

You can then also include Restangular in your controllers.js

.controller('StatusCtrl', ["$scope", "Restangular", function($scope, Restangular) {
$scope.oranges = Restangular.all("users").getList().$object;
  }])

After all of this, make sure you perform the following in your terminal
refresh your Gulp with:

gulp

quit your ionic server and restart it with:

ionic serve [your-port-number]

Good luck!

2 Likes
2

Thanks for this, saved me a lot of hassle with my project. Unsure why, but Bower did not add the files to my library automatically. I had to copy them in, but once I did everything works wonderfully.

3

@turkey I just integrated Restangular and tested on android. Its working fine with just these commands

bower install --save restangular   // it will install loadash automatically as its dependency

in index.html

<script type="text/javascript" src="lib/restangular/src/restangular.js"></script>
<script type="text/javascript" src="lib/lodash/lodash.js"></script>

other than that adding modularity to app.js and using it whereever needed.

@turkey or @mattmatt Can Any of you confirm that if currently its working for you like this ?

Also, one strange thing I didn’t added that line in gulp and gulp didn’t gave any error ?

3 Likes
4

Thanks for this topic… I thought restangular wont work on Ionic Framework… :smile:

5

Just for the record: lodash 4.x is no longer published to bower

6

Just for a quick trick for not losing much time:
Please add lodash.js before restangular.js as following.

<script type="text/javascript" src="lib/lodash/lodash.js"></script>
<script type="text/javascript" src="lib/restangular/src/restangular.js"></script>