Ionic and AngularJS dependency

ionic-v1
1

Can I load Ionic and Angular separately ? Why is Angular in the Ionic.bundle ? Has the Ionic team monkey patched the version of Angular in the Bundle ? Thanks for your time. And by the way great work ! I am loving it :smile:

2

i use it seperatly with require js to be more modular and have a capsulated development structure.

i think it is in a bundle to provide a quickstart, so everybody can build easy a mobile app and you can be sure, that you use the right versions of of angularjs, ui-router.

Additionally you do not care about the include order of the libraries.

  1. ionic
  2. angularjs
  3. ionic-angular

You can download all stuff on code.ionicframework.com

1 Like
3

Hi @bengtler, could you please give a sample of your requirejs file? I kind of mess the order of ionic and angularjs. Thanks!

4

hey there,

This is my requirejs config file.
and in the header of my index.html:

<script src="lib/ionic/ionic.min.js" type="text/javascript"></script>
<script src="lib/requirejs/requirejs.min.js" data-main="app/main"></script>
5

Hi @bengtler,

Thanks for sharing your configuration for using requireJS. I have a question about it, I see you made this configuration inside main.js. But what happened to your app.js file? did you make some changes to it as well?

I’m trying to set this up, but I’m receiving a lot of error messages in console. The important is this:

Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Thanks in advance.

6

if you understand german - i wrote an article about it:
http://www.flyacts.com/blog/tutorial-angularjs-mit-requirejs-und-ionic-framework/

But if not:
my app.js looks like that:

define([
  'angular',
  'angular_ionic'
], function (angular) {
  'use strict';

  // the app with its used plugins
  return angular.module('app', [
    'ionic',
    'ui.router'
  ]);
});

With that file… in every controller or service and so on you can require the “app” an you get your app ;).

7

Hello @bengtler.
Sorry for the old post revival but this is exactly what I am looking for and the most recent about this with responses.

Im trying to start a project with same strategy, Ionic + RequireJS and also Typescript.
Typescript apart, I’ve been looking around other sources for guidance on using Ionic with RequireJS and theres very few around and all only covering small pieces of code, not the whole picture.
In your german link I see you bootstrap the app manually, uses separated Ionic js files, etc.

As almost two years have gone by, is this still the approach you’re using currently or theres been any changes forward making this easyer?
Any considerable changes you would make with this code today?
And why you include ionic.js file prior to require in index.html? Could’nt you shim it with require in the config?

Thankyou very much.

8

Hey there. I think you can use the ionic.bundle directly, instead of loading everything separated.

If you want to use TypeScript i would prefer SystemJS as module loader over RequireJS

9

In this case I shim the ionic.bundle and export it as angular?
And what about cordova.js? Still keep that on the index.html?

10

yep. Cordova is fixed and added later during if you run “ionic build xxx” and so on commands.

But cordova.js should be the first script you are loading in your head area.

1 Like