Created a seed for Ionic + Angular + AppGyver

I forked the ionic-angular-cordova-seed and merged in the files from the AppGyver seed: https://github.com/DallanQ/ionic-angular-appgyver-seed . AppGyver has a nice workflow: ‘steroids connect --watch’ lets you run the ios simulator or connect to an ios device and the app is update automatically whenever a file is changed. Also, you get a QR code that you can give to beta users that allows them to install the app on their ios devices. I basically replaced most of the www directory generated by the AppGyver generator with the www directory from the ionic-angular-cordova-seed.

I haven’t tested it very much, but the seed project works. I’d be interested in feedback/improvements.

2 Likes

Awesome, looks cool! We are going to be building out similar services for Ionic so hopefully that will make it a bit easier. In the mean time, this is a great solution for steroids devs.

Nice Job Dallan

I have been looking into Steroids and already hacking with Ionic. I currently use Icenium to build and deploy (via their Ion app) Ionic apps. Solution is good but has a monthly fee. Hence looking at Steroids.
My fear with Steroids (and I have followed it since Sept) is they are not keeping up with Android and seems to be IOS centric - and there latest upgrade to Cordova V3.x was terrible.
Have they stabilised it yet. There concert is great I just wonder if it is safer to use pure JS type libraries (like Ionic with Angular) to build the apps instead of using Steroids native widget interfaces. (ie. would you use Steroids Drawers or Ionic’s SideMenus - I would opt for Ionic as the Drawer are still not avail on Android).

Love to hear your experiences

And thanks again for your work here - I will take a long now

Cheers
Darren

Steroids still has a ways to go with Android. They say they’re going to focus on Android as soon as they the Cordova 3 update stabilizes.

I too would prefer to use Ionic’s widgets (maybe convert a few to native widgets in cases where performance was an issue). But I like the Steroids workflow: deploying an updated app to the ios simulator or your device on every file save. It turns out that you can use the Steroid’s workflow without using their native widget interfaces. That’s why I created the seed - to embed Ionic’s widgets into the Steroids workflow.

I’m really glad to hear Max say that Ionic will be building out a similar workflow for Ionic.

Hey Dallan

Agree - I like the steroids workflow (Max if you can do something similar I’ll buy you a beer).
Dallan it maybe worth mentioning on your github seed that after cloning and before running the steroids connect command you need to run npm install (to add the node_modules directory.
The example app has an issue on ios7 where the header is larger - I assume it is an ios7 status bar thing.
Also the three finger touch Steroids App refresh process don’t respond. I assume that Ionic or Angular Touch or Gestures is handling this before Steroids can. Max any ideas here please.

This is turning out to be a very slick workflow for Ionic apps. Thanks Dallan

Tried the new ionic.Platform.fullScreen() in this appgyver seed app to try and fix the statusbar issue however running into error ‘Can’t find variable StatusBar’ - I assume this may be because Steroids (in steroids.js) looks like it takes over control of the StatusBar
Any ideas?

sorry - figured it out - was using old code - try something like

.controller(‘PetIndexCtrl’, function($scope, PetService, $ionicPlatform) {
// “Pets” is a service returning mock data (services.js)
$scope.pets = PetService.all();
$ionicPlatform.ready(function() {
// Platform stuff here.
ionic.Platform.fullScreen();
});
})

Thanks Darren! If you have any changes/improvements to the seed I’d love to get a pull request. I’ll add instructions to run npm install. (And I don’t know why the three-finger refresh process doesn’t work either; you must be correct that ionic is handling it before steroids can.)

Hey, AppGyver dev here – we just released a new version of Steroids CLI (and the accompanying generator-steroids Yeoman generator). New projects now use Ionic, and the ng-resource generator ($ steroids generate ng-resource in your Steroids project directory) creates an example of AngularJS, Ionic and Steroids working together.

We’ve got more coming soon enough, so stay tuned!

Sounds interesting! I hope AppGyver and Ionic will continue to work well together!

hi AppGyver dev, that’s great that new steroids projects are bundled with ionic. I just followed all the steps, however how come it only comes with ionic.css and not ionic.js? Also, the “steroids generate ng-resource” adds the angular resources, but I can’t see an example of AngularJS, Ionic and Steroids working together, it leaves my index.html intact, as it was when I created the steroids project… Or are the any “steroids generate example XXX” I can run to see it work in it’s full glory? =)

We’re still in the process of seeing how ionic.js would best fit together with our native UI features, so “official” support is for Ionic CSS only (for now).

The ng-resource generator creates the files in the app/ folder in your project and instructs you to change your app’s initial location in config/application.coffee to `http://localhost/views/resourceName/index.html. That said, it’s a bit too easy to miss the instructions since they only appear in the Terminal output after running the command – it’s on the backlog to improve that.

This is great news! My ideal workflow (if I can have it all :slight_smile: would be to use AppGyver as my build tool, ionic css + js as my css and javascript framework, and to replace ionic components with AppGyver native calls in those cases where non-native isn’t good enough.

It looks like we’re getting close to that ideal, which is awesome!

1 Like

@darrenahunter I found that commenting out the entire ios7 specific stuff in _platform.scss makes the status bar / header situation behave normal in steroids. It’s easier to let steroids handle status bar. From what I understand, both steroids and ionic try to compensate for ios7’s “funny” status bar behavior. Thus resulting in a bit of a mess.

I then just set steroids.config.statusBar.enabled = false and weee…!

Please check this seed project: