ngmin

Short presentation for first AngularJS Vienna meet up on April 17th, 2014.

Transcript

1. AngularJS, April 17th, 2014 ! Hannes Stiebitzhofer hannes@stiebitzhofer.com @stiebitzhofer ngmin
2. Angular does the magic via Dependency Injection var app = angular.module("app", []); app.service("Store", function() { this.products = { item: "apple" }; }); app.controller("AppCtrl", function ($scope, Store) { $scope.products = Store.products; });
3. Minifying JS breaks everything! Error: Unknown provider: nProvider <- n
4. 'Annotations' for names fixes the problem var app = angular.module('app', []); app.service('Store', function() { this.products = { item: 'apple' }; }); app.controller('AppCtrl', [ '$scope', 'Store', function ($scope, Store) { $scope.products = Store.products; } ]);
5. ngmin adds the annotations automatically Installation npm install -g ngmin Command line usage ngmin somefile.js somefile.annotate.js Install for usage in grunt npm install grunt-ngmin --save-dev
6. Unfortunately global variables aren’t supported yet 'use strict'; var RabhApp = angular.module(‚RabhApp' ['ngResource', ‚ngRoute']); ! RabhApp.factory('PostModel', function($resource) { return $resource(‚/posts/:post_id' {post_id:’@id’})….
7. ngmin for Ruby on Rails Add to Gemfile gem 'ngmin-rails' Integrates seamlessly into the Rails asset pipeline Illustrated by my boilerplate app found on Github https://github.com/stiebitzhofer/rails- angular-bower-heroku
8. Links You find everything on Github https://github.com/btford/ngmin https://speakerdeck.com/stiebitzhofer/ngmin ! More questions? Mail to hannes@stiebitzhofer.com