Fixed compiling cached AngularJS templates.

Added UI Bootstrap's Collapse plugin into example app's navbar.
Updated gulp plugins.

Author: mariuszm

bower.json

@@ -1,12 +1,11 @@
 {
   "name": "ng-devstack",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "devDependencies": {
-    "angular": "~1.2.12",
+    "angular": "~1.2.14",
     "angular-bootstrap": "~0.10.0",
-    "angular-mocks": "~1.2.12",
+    "angular-mocks": "~1.2.14",
     "angular-ui-router": "0.2.8-bowratic-tedium",
-    "angular-ui-utils": "~0.1.1",
     "bootstrap-sass-official": "latest"
   },
   "dependencies": {}

gulpfile.js

@@ -65,28 +65,29 @@ gulp.task('vendor:assets', function () {
 // ==================
 
 // Cache AngularJS templates
-var fnHtml2Js = function (path) {
+var fnCacheTpls = function (path) {
     return gulp.src(path)
         .pipe(plugins.minifyHtml({
             empty: true,
             spare: true,
             quotes: true
         }))
-        .pipe(plugins.ngHtml2js({
-            moduleName: 'templates'
+        .pipe(plugins.angularTemplatecache({
+            module: 'ngDevstack.templates',
+            standalone: true
         }))
-        .pipe(plugins.concat('app-templates.js'))
+        .pipe(plugins.concat('templates.js'))
         .pipe(gulp.dest(config.build + '/app'));
 };
-gulp.task('scripts:html2js', function () {
-    return fnHtml2Js(config.paths.templates);
+gulp.task('scripts:cacheTpls', function () {
+    return fnCacheTpls(config.paths.templates);
 });
 
 // Check JavaScript code quality with JSHint
 var fnLint = function (path) {
     return gulp.src(path, { base: config.app })
         .pipe(plugins.plumber())
-        .pipe(plugins.jshint('.jshintrc'))
+        .pipe(plugins.jshint())
         .pipe(plugins.jshint.reporter('default'))
         .pipe(gulp.dest(config.build));
 };
@@ -95,14 +96,14 @@ gulp.task('scripts:lint', function () {
 });
 
 // Concat and minify JavaScript
-gulp.task('scripts', ['scripts:lint', 'scripts:html2js', 'vendor:js'], function () {
-    var arr = (config.vendor_files.js).concat(config.paths.scripts);
+gulp.task('scripts', ['scripts:lint', 'scripts:cacheTpls', 'vendor:js'], function () {
+    var arr = (config.vendor_files.js).concat(config.paths.scripts, config.build + '/app/templates.js');
     return gulp.src(arr)
         .pipe(plugins.concat('main.js'))
         .pipe(plugins.bytediff.start())
         .pipe(plugins.ngmin())
-        .pipe(plugins.uglify())
         .pipe(plugins.removelogs())
+        .pipe(plugins.uglify())
         .pipe(plugins.rename({ suffix: '.min' }))
         .pipe(plugins.bytediff.stop())
         .pipe(gulp.dest(config.dist + '/assets'));
@@ -153,7 +154,7 @@ var fnInject = function (path) {
         }))
         .pipe(gulp.dest(config.build));
 };
-gulp.task('html:inject', ['styles:sass', 'scripts:lint', 'scripts:html2js'], function () {
+gulp.task('html:inject', ['styles:sass', 'scripts:lint', 'scripts:cacheTpls'], function () {
     return fnInject(config.paths.html);
 });
 
@@ -209,7 +210,7 @@ gulp.task('test:watch', ['vendor:assets'], function() {
 // ============
 
 // Add files to Watch
-gulp.task('watch', ['styles:sass', 'scripts:lint', 'scripts:html2js', 'assets:img', 'vendor:js', 'vendor:assets', 'test:watch', 'html:inject'], function () {
+gulp.task('watch', ['styles:sass', 'scripts:lint', 'scripts:cacheTpls', 'assets:img', 'vendor:js', 'vendor:assets', 'test:watch', 'html:inject'], function () {
     require('./server.js')(server);
 
     // watch for JS changes
@@ -235,7 +236,7 @@ gulp.task('watch', ['styles:sass', 'scripts:lint', 'scripts:html2js', 'assets:im
     // watch AngularJS templates to cache
     gulp.watch(config.app + '/+(app|common)/**', function (event) {
         if (event.path.lastIndexOf('.tpl.html') === event.path.length - 9) {
-            return fnHtml2Js(config.paths.templates).pipe(plugins.livereload(server));
+            return fnCacheTpls(config.paths.templates).pipe(plugins.livereload(server));
         }
     });
 
@@ -281,7 +282,7 @@ gulp.task('clean', function () {
 // ===============
 
 gulp.task('build', ['clean'], function () {
-    gulp.start('styles:sass', 'scripts:lint', 'scripts:html2js', 'vendor:js', 'vendor:assets', 'test:run', 'assets:img', 'html:inject');
+    gulp.start('styles:sass', 'scripts:lint', 'scripts:cacheTpls', 'vendor:js', 'vendor:assets', 'test:run', 'assets:img', 'html:inject');
 });
 
 gulp.task('compile', ['build'], function () {

package.json

@@ -1,39 +1,39 @@
 {
   "author": "Mariusz Michalski",
   "name": "ng-devstack",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "licenses": {
     "type": "MIT",
     "url": "https://raw2.github.com/mariuszm/ng-devstack/master/LICENSE.md"
   },
   "devDependencies": {
     "express": "~3.4.8",
-    "connect": "~2.12.0",
+    "connect": "~2.13.0",
     "connect-livereload": "~0.3.2",
     "connect-modrewrite": "~0.5.11",
     "open": "0.0.4",
     "tiny-lr": "0.0.5",
-    "gulp": "~3.5.1",
+    "gulp": "~3.5.5",
+    "gulp-angular-templatecache": "~1.1.0",
     "gulp-autoprefixer": "0.0.6",
     "gulp-bytediff": "~0.1.8",
     "gulp-concat": "~2.1.7",
     "gulp-filesize": "0.0.6",
     "gulp-html-replace": "~0.2.0",
     "gulp-imagemin": "~0.1.4",
     "gulp-inject": "~0.2.2",
-    "gulp-jshint": "~1.3.4",
+    "gulp-jshint": "~1.5.0",
     "gulp-livereload": "~0.3.2",
     "gulp-load-plugins": "~0.3.0",
     "gulp-minify-css": "~0.2.0",
-    "gulp-minify-html": "~0.1.0",
+    "gulp-minify-html": "~0.1.2",
     "gulp-newer": "~0.2.1",
-    "gulp-ng-html2js": "~0.1.4",
     "gulp-ngmin": "~0.1.2",
     "gulp-plumber": "~0.5.6",
     "gulp-removelogs": "0.0.2",
     "gulp-rename": "~0.2.2",
     "gulp-rimraf": "0.0.8",
-    "gulp-ruby-sass": "~0.3.0",
+    "gulp-ruby-sass": "~0.3.1",
     "gulp-size": "~0.1.2",
     "gulp-uglify": "~0.2.0",
     "gulp-util": "~2.2.14",

src/app/app.js

@@ -1,17 +1,19 @@
 'use strict';
 
 angular.module('ngDevstack', [
-    'templates',
+    'ngDevstack.templates',
     'ngDevstack.conf',
     'ngDevstack.home',
     'ngDevstack.about',
+    'ui.bootstrap',
     'ui.router'
 ])
 
-.config(function ($urlRouterProvider, $locationProvider, $stateProvider) {
+.config(function ($urlRouterProvider) {
 
     $urlRouterProvider.otherwise('/');
     // Please enable mod rewrite in server.js when html5Mode is enabled.
+    // Don't forget to inject $locationProvider.
     // $locationProvider.html5Mode(true);
 
 
@@ -42,6 +44,9 @@ angular.module('ngDevstack', [
 
 .controller('AppCtrl', function ($rootScope, $scope) {
 
+    // handling UI Bootstrap Collapse plugin
+    $scope.isCollapsed = true;
+
     $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
         if (angular.isDefined(toState.data.pageTitle)) {
             $scope.pageTitle = toState.data.pageTitle + ' | ng-devstack';

src/app/home/home.tpl.html

@@ -4,7 +4,7 @@ <h1>This is ng-devstack!</h1>
         <p>Everything a front-end developer needs to simplify building AngularJS applications.</p>
         <br>
         <p>
-            <a class="btn btn-primary btn-lg" role="button">
+            <a class="btn btn-primary btn-lg" role="button" href="https://github.com/mariuszm/ng-devstack">
                 <span class="glyphicon glyphicon-download-alt"></span> Download
             </a>
         </p>

src/index.html

@@ -17,10 +17,22 @@
             <div class="col-md-10 col-md-offset-1">
                 <nav class="navbar navbar-inverse" role="navigation">
                     <div class="container-fluid">
-                        <ul class="nav navbar-nav">
-                            <li ui-sref-active="active"><a ui-sref="home">Home</a></li>
-                            <li ui-sref-active="active"><a ui-sref="about">About</a></li>
-                        </ul>
+
+                        <div class="navbar-header">
+                            <button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed">
+                                <span class="icon-bar"></span>
+                                <span class="icon-bar"></span>
+                                <span class="icon-bar"></span>
+                            </button>
+                        </div>
+
+                        <div class="collapse navbar-collapse" collapse="isCollapsed">
+                            <ul class="nav navbar-nav">
+                                <li ui-sref-active="active"><a ui-sref="home">Home</a></li>
+                                <li ui-sref-active="active"><a ui-sref="about">About</a></li>
+                            </ul>
+                        </div>
+
                     </div>
                 </nav>
                 <div ui-view="main"></div>