angular – Artyom's Blog

Animations stop working after building project scaffolded by Fountain Webapp Generator

Fix is very quick and clean. In gulp_tasks/build.js pass additional parameters to cssnano:

  return gulp.src(conf.path.tmp('/index.html'))
    .pipe(inject(partialsInjectFile, partialsInjectOptions))
    .pipe(useref({}, lazypipe().pipe(sourcemaps.init, {loadMaps: true})))
    .pipe(jsFilter)
    .pipe(ngAnnotate())
    .pipe(uglify({preserveComments: uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))
    .pipe(rev())
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    // 8<------ HERE
    .pipe(cssnano({
      reduceIdents: {
        keyframes: false
      },
      discardUnused: {
        keyframes: false
      }
    }))
    // ------>8 HERE
    .pipe(rev())
    .pipe(cssFilter.restore)
    .pipe(revReplace())
    .pipe(sourcemaps.write('maps'))
    .pipe(htmlFilter)
    .pipe(htmlmin())
    .pipe(htmlFilter.restore)
    .pipe(gulp.dest(conf.path.dist()));

return gulp.src(conf.path.tmp('/index.html'))

.pipe(inject(partialsInjectFile, partialsInjectOptions))

.pipe(useref({}, lazypipe().pipe(sourcemaps.init, {loadMaps: true})))

.pipe(jsFilter)

.pipe(ngAnnotate())

.pipe(uglify({preserveComments: uglifySaveLicense})).on('error', conf.errorHandler('Uglify'))

.pipe(rev())

.pipe(jsFilter.restore)

.pipe(cssFilter)

// 8<------ HERE

.pipe(cssnano({

reduceIdents: {

keyframes: false

discardUnused: {

keyframes: false

}

}))

// ------>8 HERE

.pipe(rev())

.pipe(cssFilter.restore)

.pipe(revReplace())

.pipe(sourcemaps.write('maps'))

.pipe(htmlFilter)

.pipe(htmlmin())

.pipe(htmlFilter.restore)

.pipe(gulp.dest(conf.path.dist()));

How-to: Display images obtained from cordova-plugin-camera in ionic with live reload

Install cordova-plugin-file.

Obtain file URI from cordova-plugin-camera and convert it to cdvfile://

var options = {
     //...
     destinationType: Camera.DestinationType.FILE_URI
     //...
};

$cordovaCamera.getPicture(options).then(function (fileUri) {

    FileService.convertFileUriToInternalURL(fileUri).then(function(cordovaUri) {

        $scope.ngImgSrc = cordovaUri;

    });

});

var options = {

//...

destinationType: Camera.DestinationType.FILE_URI

//...

};

$cordovaCamera.getPicture(options).then(function (fileUri) {

FileService.convertFileUriToInternalURL(fileUri).then(function(cordovaUri) {

$scope.ngImgSrc = cordovaUri;

});

'use strict';
angular.module('main')
    .service('FileService', function ($log, $q) {

        // Public

        this.convertFileUriToInternalURL = convertFileUriToInternalURL;

        // Private

        // Converts File URI to proper Internal URL that will be used
        // to display local device images while being in LiveReload mode
        function convertFileUriToInternalURL(fileUri) {

            var deferred = $q.defer();

            // Here we use cordova file plugin that resolves fileEntry from fileUri
            window.resolveLocalFileSystemURL(fileUri, onFileResolved, onFileResolveError);

            // This callback used in conjunction with window.resolveLocalFileSystemURL (see above)
            function onFileResolved(fileEntry) {

                deferred.resolve(fileEntry.toInternalURL());
            }

            // This callback used in conjunction with window.resolveLocalFileSystemURL (see above)
            function onFileResolveError() {

                deferred.reject();
            }

            return deferred.promise;
        }

    });

'use strict';

angular.module('main')

.service('FileService', function ($log, $q) {

// Public

this.convertFileUriToInternalURL = convertFileUriToInternalURL;

// Private

// Converts File URI to proper Internal URL that will be used

// to display local device images while being in LiveReload mode

function convertFileUriToInternalURL(fileUri) {

var deferred = $q.defer();

// Here we use cordova file plugin that resolves fileEntry from fileUri

window.resolveLocalFileSystemURL(fileUri, onFileResolved, onFileResolveError);

// This callback used in conjunction with window.resolveLocalFileSystemURL (see above)

function onFileResolved(fileEntry) {

deferred.resolve(fileEntry.toInternalURL());

}

// This callback used in conjunction with window.resolveLocalFileSystemURL (see above)

function onFileResolveError() {

deferred.reject();

}

return deferred.promise;

}

});

How-to: Use angular-templatecache with ionic

From project’s directory execute next command in order to install angular-templatecache

npm install gulp-angular-templatecache --save-dev

1	npm install gulp-angular-templatecache --save-dev

Modify your gulpfile.js

var templateCache = require('gulp-angular-templatecache'); // <-- ADDED

// ...

var paths = {
  sass: ['./scss/**/*.scss'],
  templates: ['./www/templates/**/*.html'] // <-- ADDED
};

// ...

gulp.task('watch', ['sass', 'templates'], function() {
  gulp.watch(paths.sass, ['sass']);
  gulp.watch(paths.templates, ['templates']); // <-- ADDED
});

// ...

// ADDED
gulp.task('templates', function(done){
    gulp.src(paths.templates)
        .pipe(templateCache({
            standalone:true,
            root: 'templates'}))
        .pipe(gulp.dest('./www/dist')) // <-- NOTE THIS DESTINATION FOLDER
        .on('end', done);
});

// ADDED
gulp.task('serve:before', ['sass', 'templates', 'watch']); // <-- RUN THESE TASKS WHEN EXECUTING "ionic serve"

var templateCache = require('gulp-angular-templatecache'); // <-- ADDED

// ...

var paths = {

sass: ['./scss/**/*.scss'],

templates: ['./www/templates/**/*.html'] // <-- ADDED

};

// ...

gulp.task('watch', ['sass', 'templates'], function() {

gulp.watch(paths.sass, ['sass']);

gulp.watch(paths.templates, ['templates']); // <-- ADDED

});

// ...

// ADDED

gulp.task('templates', function(done){

gulp.src(paths.templates)

.pipe(templateCache({

standalone:true,

root: 'templates'}))

.pipe(gulp.dest('./www/dist')) // <-- NOTE THIS DESTINATION FOLDER

.on('end', done);

});

// ADDED

gulp.task('serve:before', ['sass', 'templates', 'watch']); // <-- RUN THESE TASKS WHEN EXECUTING "ionic serve"

Don’t forget to reference ‘templates’ dependency in your www/js/app.js

Don’t forget to reference www/js/dist/templates.js in your index.html file.

Start debugging with

ionic serve

1	ionic serve

Run next command to rebuild template cache

gulp templates

1	gulp templates