might want to set mangle: false for the uglify. iirc it doesn't play nice with angular. just a suggestion.

Hey, im trying to pass params via the router and keep getting undefined for $stateParams, any ideas?

pagesRoutes.js //

var team = {
        name: 'pages.team',
        url: '/team/:teamId', // The ^ character makes this url override the parent url
        template: '<div about-view></div>',
        controller: 'PagesCtrl',
        data: {
            moduleClasses: 'page',
            pageClasses: 'about',
            pageTitle: 'About',
            pageDescription: 'Some description.'
        }
    };

Hey very neat project and great documentation. Thanks!
I am trying to use your starter as the base of a new application.
I want to use angular-material. I am unsure how to add dependencies properly.

I cloned your project from github and added the angular-material using this:

git clone https://github.com/goodbomb/angular-gulp-browserify-starter.git bigdgulpmd
cd bigdgulpmd
npm install
bower install
bower install angular-material --save --save-dev

Now I have your app which runs properly.
I try to add some Material-Design toolbar to modules/home/home.html:

`

So how to add the dependencies so that it works?

I tried adding
'ngMaterial'
or
require('angular-material').name

to app/app.js
and to app/modules/index.js
and to app/modules/home/index.js

but when I run in the browser I get error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module bigdashboard due to:
Error: [$injector:modulerr] Failed to instantiate module modules due to:
Error: [$injector:modulerr] Failed to instantiate module home due to:
Error: [$injector:modulerr] Failed to instantiate module ngMaterial due to:
Error: [$injector:modulerr] Failed to instantiate module ngAria due to:
Error: [$injector:nomod] Module 'ngAria' 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.
http://errors.angularjs.org/1.3.5/$injector/nomod?p0=ngAria
at http://localhost:5000/bundle.js:18905:12
at http://localhost:5000/bundle.js:20589:17
at ensure (http://localhost:5000/bundle.js:20513:38)
at module (http://localhost:5000/bundle.js:20587:14)
at http://localhost:5000/bundle.js:22892:22
at forEach (http://localhost:5000/bundle.js:19164:20)
at loadModules (http://localhost:5000/bundle.js:22876:5)
at http://localhost:5000/bundle.js:22893:40
at forEach (http://localhost:5000/bundle.js:19164:20)
at loadModules (http://localhost:5000/bundle.js:22876:5)
http://errors.angularjs.org/1.3.5/$injector/modulerr?p0=ngAria&p1=Error%3A%…0at%20loadModules%20(http%3A%2F%2Flocalhost%3A5000%2Fbundle.js%3A22876%3A5)
at http://localhost:5000/bundle.js:18905:12
at http://localhost:5000/bundle.js:22915:15
at forEach (http://localhost:5000/bundle.js:19164:20)
at loadModules (http://localhost:5000/bundle.js:22876:5)
at http://localhost:5000/bundle.js:22893:40
at forEach (http://localhost:5000/bundle.js:19164:20)
at loadModules (http://localhost:5000/bundle.js:22876:5)
at http://localhost:5000/bundle.js:22893:40
at forEach (http://localhost:5000/bundle.js:19164:20)
at loadModules (http://localhost:5000/bundle.js:22876:5)
http://errors.angularjs.org/1.3.5/$injector/modulerr?p0=ngMaterial&p1=Error…0at%20loadModules%20(http%3A%2F%2Flocalhost%3A5000%2Fbundle.js%3A22876%3A5)
at http://localhost:5000/bundle.js:18905:12
at http://localhost:5000/bundle.js:22915:15
at forEach (http://localhost:5000/bundle.js:19164:20)
at loadModules (http://localhost:5000/bundle.js:22876:5)
at http://localhost:5000/bundle.js:22893:40
at forEach (http://localhost:5000/bundle.js:19164:20)
at loadModules (http://localhost:5000/bundle.js:22876:5)
at http://localhost:5000/bundle.js:22893:40
at forEach (http://localhost:5000/bundle.js:19164:20)
at loadModules (http://localhost:5000/bundle.js:22876:5)
http://errors.angularjs.org/1.3.5/$injector/modulerr?p0=home&p1=Error%3A%20…0at%20loadModules%20(http%3A%2F%2Flocalhost%3A5000%2Fbundle.js%3A22876%3A5)
at http://localhost:5000/bundle.js:18905:12
at http://localhost:5000/bundle.js:22915:15
at forEach (http://localhost:5000/bundle.js:19164:20)
at loadModules (http://localhost:5000/bundle.js:22876:5)
at http://localhost:5000/bundle.js:22893:40
at forEach (http://localhost:5000/bundle.js:19164:20)
at loadModules (http://localhost:5000/bundle.js:22876:5)
at http://localhost:5000/bundle.js:22893:40
at forEach (http://localhost:5000/bundle.js:19164:20)
at loadModules (http://localhost:5000/bundle.js:22876:5)
http://errors.angularjs.org/1.3.5/$injector/modulerr?p0=modules&p1=Error%3A…0at%20loadModules%20(http%3A%2F%2Flocalhost%3A5000%2Fbundle.js%3A22876%3A5)
at http://localhost:5000/bundle.js:18905:12
at http://localhost:5000/bundle.js:22915:15
at forEach (http://localhost:5000/bundle.js:19164:20)
at loadModules (http://localhost:5000/bundle.js:22876:5)
at http://localhost:5000/bundle.js:22893:40
at forEach (http://localhost:5000/bundle.js:19164:20)
at loadModules (http://localhost:5000/bundle.js:22876:5)
at createInjector (http://localhost:5000/bundle.js:22802:11)
at doBootstrap (http://localhost:5000/bundle.js:20276:20)
at bootstrap (http://localhost:5000/bundle.js:20297:12)
http://errors.angularjs.org/1.3.5/$injector/modulerr?p0=bigdashboard&p1=Err…20at%20bootstrap%20(http%3A%2F%2Flocalhost%3A5000%2Fbundle.js%3A20297%3A12) angular.js:63(anonymous function) angular.js:63(anonymous function) angular.js:4073forEach angular.js:322loadModules angular.js:4034createInjector angular.js:3960doBootstrap angular.js:1434bootstrap angular.js:1455angularInit angular.js:1349(anonymous function) angular.js:25912u vendor.js:2d.fireWith vendor.js:2Z.extend.ready vendor.js:2a

Hello. I see that you're not focusing on angular at this moment but I need to do a quick mod using this app. I appreciate your help. I see that you have used npm mongodb module. Can you give me a quick syntax on implementing it and where in the app it goes? Just a simple connect so the entire app can use it.

I'm trying add ngTable, but I receive this error:

Error: [$injector:unpr] Unknown provider:
     NgTableParamsProvider <- NgTableParams <- TableCtrl

Or this if I dont add 'NgTableParams' to $inject array

TypeError: NgTableParams is not a function

Can you help me? I follow this steps:

bower install ng-table --save

Next add CSS and JS to gulpfile, next gulp build. I add this to app.js

'use strict';
var angular = require('angular');
angular.module('myApp', ['ngTable']);     // new line. It's correct here?
module.exports = angular.module('myApp',
    [
        require('./common/common.js').name,
        require('./modules').name
    ])
    .config(require('./appConfig'))
    .constant('version', require('../package.json').version)
    .run(require('./common/common-init.js'));

Controller:

'use strict';
function TableCtrl($scope, NgTableParams) {
    var data = [{name: 'Moroni', age: 50} /*,*/];
    $scope.tableParams = new NgTableParams({}, { dataset: data});
}
TableCtrl.$inject = ['$scope', 'NgTableParams'];
module.exports = TableCtrl;

Finally add HTML like http://ng-table.com/ to view.

Regards...

I'm confused about how to inject a service into a controller in the context of this architecture? Could you provide an example.

not sure if this is issue or just my lack of understanding of the setup. I am trying to add chart.js support to the vendor.js build file

bower install angular-chart.js --save

in gulpfile I added the libs to the build

vendorJS: {

        './libs/angular-chart.js/dist/angular-chart.js'

vendorCSS: {

        './libs/angular-chart.js/dist/angular-chart.css', // charts JS

I am getting the following error after build

gulp build

[16:23:19] Finished 'fonts' after 2.41 s
events.js:85
throw er; // Unhandled 'error' event
^
Error: Cannot find module 'angular' from 'libs\angular-chart.js\dist'
at node_modules\browserify\node_modules\resolve\lib\async.js:46:17
at process (node_modules\browserify\node_modules\resolve\lib\async.js:173:43)
at ondir (node_modules\browserify\node_modules\resolve\lib\async.js:188:17)
at load (node_modules\browserify\node_modules\resolve\lib\async.js:69:43)
at onex (node_modules\browserify\node_modules\resolve\lib\async.js:92:31)
at node_modules\browserify\node_modules\resolve\lib\async.js:22:47
at FSReqWrap.oncomplete (fs.js:95:15)

I also need to add the chart.js to the angular injection process in common.js

// app/common/common.js

...
require('chart.js');
module.exports = angular.module('common',
[
'chart.js',
...

Hi @goodbomb,

I've noticed that in gulpfile.js you added vendorJs task for bundle libs.

vendorJS: {
// These files will be bundled into a single vendor.js file that's called at the bottom of index.html
src: [
'./libs/angular/angular.js',
'./libs/angular-animate/angular-animate.js',
'./libs/angular-bootstrap/ui-bootstrap-tpls.js',
'./libs/angular-cookies/angular-cookies.js',
'./libs/angular-resource/angular-resource.js',
'./libs/angular-sanitize/angular-sanitize.js',
'./libs/angular-ui-router/release/angular-ui-router.js',
'./libs/jquery/dist/jquery.js',
'./libs/bootstrap/dist/js/bootstrap.js',
'./libs/domready/ready.js',
'./libs/lodash/lodash.js',
'./libs/restangular/dist/restangular.js'
]
},

But this libraries added in bundle.js also with browserify. And project works without this vendorJs task.

Maybe i missed something else :)

Thanks for great project template.

Could very well be a screw up on my part, but just running a gulp build-prod on a freshly cloned instance yields the following. Have been googling around a bunch, but haven't made much headway into finding if I'm missing a package.

../Projects/angular-gulp-browserify-starter/node_modules/gulp-sourcemaps/index.js:17
if (file.isNull()) {

TypeError: Object (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({ has no method 'isNull'
at Transform.sourceMapInit [as _transform]

I am having an issue with prerender.io and the dist version. Although I have installed prerender.io code properly in the server.js file, for some reason, in the dist version of your framework I am not able to get it to work. Is there something in gulp prod that is affecting this service? Thank you.

Hello,

Many thanks for this starter which is really complete but collapse menu seems not working with every browser.
When I add directly the Bootstrap CDN in index.html, it works.

How would I go about setting up the npm module "crawlme" in your framework? I have a LAMP stack on AWS with nodeJS also installed. I placed crawlme in node_modules using npm. I am essentially ftping the dist folder to the web root. I then use the Fetch As Googlebot tool and although I can see the pages render, the googlebot tool shows a 404. Here is my server.js file:

var express = require('express'),
crawlme = require('crawlme'),
url = require('url'),
proxy = require('proxy-middleware'),
server = express(),
API_URL = process.env.API_URL || 'http://localhost:3000/';

server.set('port', (process.env.PORT || 5000));
server.use(crawlme({waitFor: 2000}));
server.use(express.static(__dirname + '/dist'));

server.listen(server.get('port'), function() {
console.log("Node app is running at localhost:" + server.get('port'));
});

// Proxy settings for connecting to API
// process.env.API_URL is an environment variable set on Heroku
server.use('/api', proxy(url.parse(API_URL)));

When I try push my new branch, the git says:

$ git push  origin fix/use_stric

ERROR: Permission to goodbomb/angular-gulp-browserify-starter.git denied to pablorsk.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

I try with git push origin develp, but I receive the same error.

Where would you recommend adding a common filter? Thanks for releasing this project it provides a great start.

I believe this:

.pipe(prefix("last 1 version", "> 1%", "ie 8", "ie 7"), {map: true})

ought to be this:

.pipe(prefix("last 1 version", "> 1%", "ie 8", "ie 7", {map: true}))

The options object is being passed to .pipe as the second argument rather than to prefix.

Hi,
great repo, very useful!

I tried to use $resources (or other injected bower components) inside common services with no luck.
can you share a more functional example of how this is done please?

thanks in advance.

When developing using your starter, it is hard to understand where code errors are. Can we use your starter without minimize and uglify, so we can diagnose errors in the browser console?

When I inject your included service "ServiceName" into a controller, I am getting an error in the console of:

Error: [$injector:unpr] Unknown provider: ServiceNameProvider <- ServiceName <- HomeViewCtrl

I have the proper spelling, its a function attribute, and have also injected it below in the $inject area. I also see that common.js is requiring all in the services directory.

Hello, Ben.

I was tinkering with karma-coverage to see if I could get it working, and I haven't succeeded. I'm getting an unexpected token < error from framework.browserify when I add browserify-istanbul (or istanbulify) as a transform. Google leads me to believe that this error is universally understood to mean "something really obscure is broken, and we don't know what it is. Good luck figuring it out."

It needs something like this in karma.conf.js:

browserify: {
    debug: true,
    transform: ['debowerify', 'browserify-istanbul'],
    extensions: ['.js']
},
reporters: ['spec', 'coverage'],
coverageReporter: {
      type : 'html',
      dir : 'coverage/'
},

The docs of karma-coverage suggest using 'coverage' as a preprocessor, but we can't do that because of Browserify. Apparently browserify-istanbul or istanbulify can be used to get around that, but, as I said, I haven't succeeded.

What do you think about karma-coverage? Have you already set up such a tool with this architecture before? Do you maybe prefer a different tool? I'd like to hear your opinion.

Links:

• karma-coverage
• browserify-istanbul
• istanbulify
• Some guy apparently got something similar working here
• ... and another one here

Can you please give a clear example of submodules. Specifically what the moduleConfig.js file is supposed to look like? A working example? Currently, I have routes defined in appConfig.js, and I have a modules module that injects those modules defined in appConfig.js. Your file structure defines a module 3 that contains submodules, but you have no examples or explanations on how to get it working. Thank you.

On downloading the package, when you do:

npm install

and

bower install

Still running gulp build throws an exception:

module.js:338
    throw err;
          ^
Error: Cannot find module 'parseurl'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (C:\Users\kamran.ansari\Downloads\angular-gulp-browserify-starter-master\angular-gulp-browserify-starter-master\node_modules\gulp-connect\node_modules\connect\lib\proto.js:13:16)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)

Hello, Ben.

I saw you write a little bit ago that you're really busy. I'll keep this short.

If I build something from a fork of this project and put an MIT license on it, is that okay? Should I put a note in the readme pointing back to you? Is it even "normal" to credit the source of a structural design pattern? If not, is that why you didn't include a license file in the project? The ethics are unclear to me.

Three days until the weekend. :)

I have a question about the way this arch is structured. Since you're using injection through the directives and defining the controller within the module directive and not in the stateProvider state call, will resolves pass through to the controller or is there another way to handle this?

not starting the project

Hello,
Thank you for the great work you have done. My issue is with images. I added the assets/images directory but the build is not bringing the images aboard and there are no errors I can see that would help me otherwise. Can you please suggest a remedy? Thank you.