Since Ionic team didn’t think about making our lives easier and we are forced to place dozens of script tags to load different angularJS modules into the page, I would like to know how you deal with this without writing spaghetti code and overblowing your html pages with scripts?
I have a HomeCtrl placed in /www/js/controllers/HomeCtrl.js which I could like to load in my index.html
I would simply add it as a script tag and it will load (adding loading overhead), but then I have controller specific config, directives and other files to include. I feel it’s a bad practice to do it all via script tags and not using something like RequireJS.
How you do it?
P.S There’s no template engines involved as well right? Jade/Handlebars/Mustache.js? Is there any option to extend layouts and preload partials?
P.P.S Currently I feel this framework is just a hello world maker in a fancy way. A lot of architectural limits 
You are totally wrong about both points, and I would encourage you to do a little bit more research before acusing framework of being just a ‘hello world’
-
Angular has dependency injection to load modules in another modules. I personally have gulp watcher running that is watching all my individual files and concatinates them on the fly into one application.min.js which is added to index.html. Gulp also compiles code from coffeescripts, and ng-classify.
-
Angular.js doesn’t need separate template engine
2 Likes
Create a gulp task to inject your javascript files into index.html. Make it pretty simple and you don’t have to remember to put every *.js file reference yourself.
https://www.npmjs.com/package/gulp-inject
https://www.npmjs.com/package/gulp-bower-files
As for template engine, I don’t need one. Ionic / Angular gives me what I need so can’t help you there.
I would strongly disagree with you on the fancy hello work maker. Ionic is proving to be a great User Interface layer on top of Angular for many apps we are working on.
Here’s my wiredep gulp task that loads all bower components automagically into index.html
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('./www/index.html')
.pipe(wiredep({
directory: './www/lib',
// devDependencies: true,
exclude: ['/angular/', 'angular-animate', 'angular-mocks', 'angular-resource', 'angular-sanitize', 'angular-ui-router']
}))
.pipe(gulp.dest('./www/'))
});
1 Like
And then something like this for main javascript file for all my modules etc
gulp.task('ngCls', function () {
return gulp.src('modules/**/*.coffee')
.pipe(coffeelint())
.pipe(coffeelint.reporter())
.pipe(ngClassify(function (file) {
return {appName: getModuleNameFromCoffee(file)};
}).on('error', gutil.log))
.pipe(gulp.dest(paths.ngClassified))
.pipe(coffee({bare: false}).on('error', gutil.log))
.on('error', gutil.log)
.pipe(gulp.dest(paths.coffeeCompiled))
.pipe(ngAnnotate())
.on('error', gutil.log)
.pipe(gulp.dest(paths.ngAnnotate))
// .pipe(uglify())
.pipe(concat('application.min.js'))
.pipe(gulp.dest(paths.concatMinified));
});
Thanks for clarifying things. They were not obvious from the documentation I read.
How do you strip the /www/ from path to static files when using gulp?
gulp.task('index', function() {
var target = gulp.src('./www/index.html');
var sources = gulp.src(
[
'./www/lib/ionic/js/ionic.bundle.js',
'./www/js/**/*.js',
'./www/js/*.js',
'./www/css/*.css',
'./www/css/**/*.css',
'!./www/css/ionic.app.css'
]
,{read: false});
return target.pipe(inject(sources))
.pipe(gulp.dest('./'));
});
I’ve built this simple task to inject my js/css files, but it includes them with /www/ which is not correct.
Should I use regex to replace it in .pipe or use external plugin like rev-* ?
Thanks guys!
So it seems theres some confusion about what angular is actually doing.
Angular provides its own way of handling modules and making templates.
Ionic is just the UI layer, built on top of angular, so some knowledge of how angular does things helps out.
Feel free to reach out @deb0rian if you have any more question.
Rather than including individual files into your index.html I would use gulp to build them into one .js file and one .css file isnide of /www folder and then have them as script and link tags in index.html
Even on development stage? Isn’t that makes debugging more complex?
Well during development I don’t minimize/uglify, just concatenate into single file. It doesn’t make it difficult as I can do quick search in my sublime text if I get error
Maybe this will help:
Here is my app structure: https://www.dropbox.com/s/5m73hlbm9s9j2oz/Screenshot%202015-03-24%2016.37.41.png?dl=0
And my gulp file is something similar to this:
gulp.task('wiredep', function () {
var wiredep = require('wiredep').stream;
gulp.src('./www/index.html')
.pipe(wiredep({
directory: './www/lib',
// devDependencies: true,
exclude: ['/angular/']
}))
.pipe(gulp.dest('./www/'))
});
gulp.task('watchIncludes', function() {
gulp.watch('./www/index.html', ['wiredep']);
});
gulp.task('default', ['ngClsWatch', 'watchSass', 'watchIncludes']);
gulp.task('ngClsWatch',function() {
gulp.watch(paths.coffeescript, {}, ['ngCls']);
});
gulp.task('watchSass', function() {
gulp.watch('./scss/{,*/}*.scss', ['styles']);
});
gulp.task('styles', ['wiredep'], function () {
return gulp.src('./scss/{,*/}*.scss')
.pipe($.sass({style: 'expanded'}))
.on('error', gutil.log)
.pipe(gulp.dest('./www/css'));
});
gulp.task('ngCls', function () {
return gulp.src('src/**/*.coffee')
.pipe(coffeelint())
.pipe(coffeelint.reporter())
.pipe(ngClassify(function (file) {
return {appName: 'yourAppModuleName'};
}).on('error', gutil.log))
.pipe(gulp.dest(paths.ngClassified))
.pipe(coffee({bare: false}).on('error', gutil.log))
.on('error', gutil.log)
.pipe(gulp.dest(paths.coffeeCompiled))
.pipe(ngAnnotate())
.on('error', gutil.log)
.pipe(gulp.dest(paths.ngAnnotate))
// .pipe(uglify())
.pipe(concat('application.min.js'))
.pipe(gulp.dest(paths.concatMinified));
});
And my index.html before running gulp wiredep is:
<!DOCTYPE html>
<!-- bower:css -->
<!-- endbower -->
<link href="css/ionic.app.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- bower:js -->
<!-- endbower -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/application.min.js"></script>
wiredep will automatically inject all 3rd party css and js between those and tags
2 Likes
