My index.html has:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="/public/stylesheets/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="WebApp">
<base href="/app">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- Add your site or application content here -->
<div class="container" ng-view=""></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="/app/bower_components/angular/angular.js"></script>
<!-- build:js /app/scripts/angular.js -->
<script src="/app/bower_components/angular-route/angular-route.js"></script>
<script src="/app/bower_components/angular-resource/angular-resource.js"></script>
<script src="/app/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="/app/bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) /app/scripts/scripts.js -->
<script src="/app/scripts/app.js"></script>
<script src="/app/scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
All of my angular code is in a app directory from the top level. My Gruntfile.coffee is:
useminPrepare:
html: "<%= appConfig.app %>/index.html"
options:
dest: "<%= appConfig.dist %>"
usemin:
html: "<%= appConfig.dist %>/*.html"
css: ["<%= appConfig.dist %>/styles/**/*.css"]
options:
dirs: ["<%= appConfig.dist %>"]
But I'm getting an error:
Running "useminPrepare:html" (useminPrepare) task
Going through app/index.html to update the config
Looking for build script HTML comment blocks
Warning: An error occurred while processing a template (Cannot read property 'src' of undefined). Use --force to continue.
What am I doing wrong?
I think your problem is, that you want to concat/minify the angular sources. The documented way is to use the provided files like angular-route.min.js and include them in the head section of your html.
So, following lines throws that error:
<script src="/app/bower_components/angular/angular.js"></script>
<!-- build:js /app/scripts/angular.js -->
<script src="/app/bower_components/angular-route/angular-route.js"></script>
<script src="/app/bower_components/angular-resource/angular-resource.js"></script>
<script src="/app/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="/app/bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
As a side note: these angular libs heave heavy complex sourcecode in some parts, its quite a challenge to exactly configure your personal minifier, like the angular developers did with theirs, to provide the public angular-xxxxx.min.js files.
If I understand correctly, your index.html file is in the app directory, so you may try to use relative links to scripts in your html.
<!-- build:js scripts/angular.js -->
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
Related
I just started with angular and I've been experimenting with single page website, so I've basically just created really simple html to change, such as:
login.html
<div>
<h1>login</h1>
</div>
register.html
<div>
<h1>login</h1>
</div>
But when I click the links below leading to login.html and register.html, nothing happens.
Index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
login
register
<div ng-view>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
And here is where my module lies
app.js
'use strict';
var app = angular.module('myApp', []);
app.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when("/", {
templateURL : "view/login.html",
})
.when("/register", {
templateUrl : "view/register.html"
})
.otherwise({redirectTo: '/login'});
}]);
I'm using JetBrains WebStorm for the premade angular html file, and local server.
Thank you
Let try with this way
angular.module('myApp', ['ngRoute']);
login
register
The problem lied with the server I was running, it was not properly set up.
The app doesn't route to the view. It just shows index.html view it doesn't work seeing any other of the views. It worked fine before changing the router. I also tried to change the ng-view to ui-view in index.html but still nothing happens.
looking in chrome devtools, I can see that both angular and ui-router are being loaded so it must be something in the code. I hope someone with experience can notice it. Big thanks!
My index.html and app.js:
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ui.router',
'myApp.jokes',
'myApp.view1',
'myApp.view2',
'myApp.auth',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="view_auth/auth.js"></script>
<script src="view_jokes/jokes.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
You're loading your template and controller in a named view
views: {
'jokesContent': {
templateUrl: "view_auth/auth.html",
controller: 'AuthCtrl as auth'
}
but you dont define that view.
you have to use: ui-view="jokesContent"
or rewrite your router config not to use named views
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('auth', {
url: '/auth',
templateUrl: "view_auth/auth.html",
controller: 'AuthCtrl as auth'
})
}])
After seeing your code the first thing I can notice is you are using ng-view instead of ui-view. Since you are using ui-router in your application you need to use ui-view not ng-view.
So just change it like above and check it once.
I ended my Angular JS app...
and now what?
I have a app with 10 scripts src in index.html, 6 ng includes,...
All this are http requests, and have a relative size...
There are some particular way or command for "compile/build/generate/deploy" end app code? with all included, minified,...
Or I must do this with grunt/gulp :(?
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="Bit2Card" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>App</title>
<meta name="description" content="Generate a credit card on fly with Bitcoins">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="reset.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.
</p>
<![endif]-->
<div id="app" ng-controller="appController" class="{{viewBack ? 'viewBack' : ''}}">
<ng-include src="'partials/overlays/load.html'"></ng-include>
<ng-include src="'partials/overlays/error.html'"></ng-include>
<ng-include src="'partials/overlays/terms.html'"></ng-include>
<ng-include src="'partials/overlays/qr.html'"></ng-include>
<ng-include src="'partials/overlays/payout.html'"></ng-include>
<ng-include src="'partials/overlays/restart.html'"></ng-include>
<div id="flip">
<div id="frontCard">
<ng-include src="'partials/header.html'"></ng-include>
<div id="panels">
<div id="select" class="panel{{panel === 1 ? ' visible' : ''}}" ng-include="'partials/panels/select.html'"></div>
<div id="pay" class="panel{{panel === 2 ? ' visible' : ''}}" ng-include="'partials/panels/pay.html'"></div>
<div id="get" class="panel{{panel === 3 ? ' visible' : ''}}" ng-include="'partials/panels/get.html'"></div>
</div>
<ng-include src="'partials/footer.html'"></ng-include>
</div>
<div id="backCard" ng-include="'partials/backside.html'"></div>
</div>
</div>
<!--
In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
<script type="text/javascript" src="bower_components/ng-clip/dest/ng-clip.min.js"></script>
<script type="text/javascript" src="bower_components/qrcode/lib/qrcode.min.js"></script>
<script type="text/javascript" src="bower_components/angular-qr/angular-qr.min.js"></script>
<script type="text/javascript" src="bower_components/angular-translate/angular-translate.min.js"></script>
<script type="text/javascript" src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
<script type="text/javascript" src="scripts/lin2a.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
</body>
</html>
I think you should check out: https://www.npmjs.org/package/gulp-html-replace. It will read through that html for you and insert a new script tag in there that points to a bundled version of all those deps.
I seem not to be able to redo a simple directive tutorial in cloud9. Basically it does not produce the output "Here I am to save the day".
main2.js
var app = angular.module("superhero", []);
app.directive("superman", function() {
return {
restrict: "E",
template: "<div>Here I am to save the day</div>"
}
})
This function is loaded in the index file here as shown below. In addition I have another file called main.js where I declare the app "myApp", but even removing that does not help.
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div ng-app="superhero">
<superman></superman>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="main.js"></script>
<script src="main2.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
You need to load the main2.js script (and the angular files) before
<div ng-app="superhero">
<superman></superman>
</div>
I tried in jsfiddle.net and it only appears to work when the javascript is loaded in the head of the page before the HTML.
My page stopped working when I ran the "grunt build" command with my Yeoman generated angularjs project. I'm getting the following error:
Uncaught object 127.0.0.1:9000/bower_components/angular/angular.js:3857
Picture from source:
https://dl.dropboxusercontent.com/u/2188934/Skjermbilde%202014-07-05%20kl.%2021.49.26.png
Sometimes I get this instead:
Uncaught object angular.js:78
https://dl.dropboxusercontent.com/u/2188934/Skjermbilde%202014-07-05%20kl.%2022.30.46.png
app.js:
'use strict';
// This is the main js-file where the module corsaneApp is initialized.
angular
.module('corsaneApp', [ // This is all the external angular directives we are using
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'ui.bootstrap',
'ngAnimate',
'summernote',
'ui-sortable'
]) // This shows what html file and controller to load when a url is specified.
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.when('/search', {
templateUrl : 'views/home.html',
controller : 'SearchCtrl'
})
.when('/submit', {
templateUrl : 'views/submit.html',
controller : 'SubmitCtrl'
})
.when('/playlist', {
templateUrl : 'views/home.html',
controller : 'PlaylistCtrl'
})
.when('/playlistbar', {
templateUrl : 'views/playlistbar.html',
controller : 'PlaylistbarCtrl'
})
.when('/resource', {
templateUrl : 'views/resource.html',
controller : 'ResourceCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
index.html:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" ng-app="corsaneApp"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/bootstrap-lumen.css">
<link rel="stylesheet" href="styles/animations.css">
<link rel="stylesheet" href="styles/global.css">
<link rel="stylesheet" href="styles/submit.css">
<link rel="stylesheet" href="styles/search.css">
<link rel="stylesheet" href="styles/playlist.css">
<link rel="stylesheet" href="styles/sidebar.css">
<link rel="stylesheet" href="styles/resource.css">
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/playlistbar.css">
<link rel="stylesheet" href="styles/resourceinfo.css">
<link rel="stylesheet" type="text/css" href="bower_components/summernote/dist/summernote.css">
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<!-- endbuild -->
</head>
<body ng-controller="HomeCtrl" >
<div ng-include src="'views/navbar.html'"></div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="container">
<div ng-view></div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<!-- <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script> -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/fitvids/jquery.fitvids.js"></script>
<!-- endbower -->
<!-- endbuild -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/home.js"></script>
<script src="scripts/controllers/playlist.js"></script>
<script src="scripts/filters/reverse.js"></script>
<script src="scripts/controllers/search.js"></script>
<script src="scripts/controllers/submit.js"></script>
<script src="scripts/controllers/navbar.js"></script>
<script src="scripts/services/resource.js"></script>
<script src="scripts/controllers/playlistbar.js"></script>
<script src="scripts/controllers/resource.js"></script>
<script src="scripts/services/list.js"></script>
<script src="scripts/directives/resource.js"></script>
<script src="scripts/controllers/playlistinfo.js"></script>
<script src="scripts/services/global.js"></script>
<script src="scripts/directives/sortable.js"></script>
<!-- endbuild -->
</body>
</html>
grunt build:
grunt.registerTask('build', [
'clean:dist',
'bowerInstall',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngmin',
'copy:dist',
'cdnify',
'cssmin',
'uglify',
'rev',
'usemin',
'htmlmin'
]);
Obviously something goes wrong when the code is minified. My guess is that it have something to do with dependency injection, but I'm also pretty sure I do it the right way (like in app.js).
Okay, so first of all, there is a bug in the chrome debugger (ironically) which causes the error message not to be fully displayed. See this article for more info: http://www.congral.com/2014/05/29/have-you-already-encountered-the-uncaught-object-exception/
After some digging, I found out that it was my summernote dependency that was causing the uncaught object error. Referencing https://docs.angularjs.org/error/$injector/nomod , Angular Docs tells me: "You either misspelled the module name or forgot to load it". However, this error didn't occur because I forgot to load it, but rather because it was removed by Grunt during build. This happened because I loaded my script in the "bower:js" tag, like this:
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/summernote/dist/summernote.js"></script>
<script src="bower_components/angular-summernote/dist/angular-summernote.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
When I moved it outside "endbower", everything worked fine.
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<script src="bower_components/summernote/dist/summernote.js"></script>
<script src="bower_components/angular-summernote/dist/angular-summernote.min.js"></script>
<!-- endbuild -->
Considering I actually installed summernote using bower, I find this to be somehow strange. Further insights to this problem would be appreciated.