Hot reload (live reload) page and module example with bs-injular plugin for browser-sync

gulp/scripts.js

@@ -9,18 +9,24 @@ var browserSync = require('browser-sync');
 var $ = require('gulp-load-plugins')();
 
 
-gulp.task('scripts-reload', function() {
-  return buildScripts()
-    .pipe(browserSync.stream());
+gulp.task('scripts-reload', function () {
+
+    var bsOptions = {};
+    if (conf._gulpWatchEvent) {
+        bsOptions.match = conf._gulpWatchEvent.path;
+    }
+
+    return buildScripts()
+        .pipe(browserSync.stream(bsOptions));
 });
 
-gulp.task('scripts', function() {
-  return buildScripts();
+gulp.task('scripts', function () {
+    return buildScripts();
 });
 
 function buildScripts() {
-  return gulp.src(path.join(conf.paths.src, '/app/**/*.js'))
-    .pipe($.eslint())
-    .pipe($.eslint.format())
-    .pipe($.size())
+    return gulp.src(path.join(conf.paths.src, '/app/**/*.js'))
+        .pipe($.eslint())
+        .pipe($.eslint.format())
+        .pipe($.size())
 };

gulp/server.js

@@ -47,6 +47,18 @@ browserSync.use(browserSyncSpa({
   selector: '[ng-app]'// Only needed for angular apps
 }));
 
+var bsInjular = require('bs-injular');
+
+browserSync.use(bsInjular, {
+    templates: ['/app/pages/**/*.html','/app/my-module/**/*.html'],
+    controllers: ['/app/pages/**/*.controller.js','/app/my-module/**/*.controller.js'],
+    directives: ['/app/pages/**/*.directive.js','/app/my-module/**/*.directive.js'],
+    filters: ['/app/pages/**/*.filter.js','/app/pages/**/*.filter.js'],
+    angularFile: '/bower_components/angular/angular.js',
+    moduleFile: '/app/app.js',
+    ngApp: 'BlurAdmin'
+});
+
 gulp.task('serve', ['watch'], function () {
   browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
 });

gulp/styles.js

@@ -34,6 +34,7 @@ var buildStyles = function () {
 
   var injectFiles = gulp.src([
     path.join(conf.paths.src, '/sass/**/_*.scss'),
+    path.join(conf.paths.src, '/app/**/*.scss'),
     '!' + path.join(conf.paths.src, '/sass/theme/conf/**/*.scss'),
     '!' + path.join(conf.paths.src, '/sass/404.scss'),
     '!' + path.join(conf.paths.src, '/sass/auth.scss')

gulp/watch.js

@@ -16,7 +16,9 @@ gulp.task('watch', ['inject'], function () {
 
   gulp.watch([
     path.join(conf.paths.src, '/sass/**/*.css'),
-    path.join(conf.paths.src, '/sass/**/*.scss')
+    path.join(conf.paths.src, '/sass/**/*.scss'),
+    path.join(conf.paths.src, '/app/**/*.scss')
+
   ], function(event) {
     if(isOnlyChange(event)) {
       gulp.start('styles-reload');
@@ -26,11 +28,13 @@ gulp.task('watch', ['inject'], function () {
   });
 
   gulp.watch(path.join(conf.paths.src, '/app/**/*.js'), function(event) {
+    conf._gulpWatchEvent = event;
     if(isOnlyChange(event)) {
       gulp.start('scripts-reload');
     } else {
       gulp.start('inject-reload');
     }
+    delete conf._gulpWatchEvent;
   });
 
   gulp.watch(path.join(conf.paths.src, '/app/**/*.html'), function(event) {

package.json

@@ -2,8 +2,9 @@
   "name": "blur_admin",
   "version": "1.2.0",
   "devDependencies": {
-    "browser-sync": "~2.9.11",
+    "browser-sync": "^2.18.2",
     "browser-sync-spa": "~1.0.3",
+    "bs-injular": "^0.6.0",
     "chalk": "~1.1.1",
     "del": "~2.0.2",
     "eslint-plugin-angular": "~0.12.0",

src/app/app.js

@@ -14,5 +14,6 @@ angular.module('BlurAdmin', [
   'angular-progress-button-styles',
 
   'BlurAdmin.theme',
-  'BlurAdmin.pages'
+  'BlurAdmin.pages',
+  'my-module'
 ]);

src/app/my-module/my-module.js

@@ -0,0 +1,17 @@
+
+/**
+ * Created by sguilly on 23/10/16.
+ */
+(function () {
+    'use strict';
+
+    /* @ngdoc object
+     * @name models
+     * @description
+     *
+     */
+    angular
+        .module('my-module', [
+           'my-page'
+        ]);
+}());

src/app/my-module/my-page/my-page.controller.js

@@ -0,0 +1,24 @@
+/**
+ * Created by sguilly on 22/11/16.
+ */
+(function () {
+    'use strict';
+
+    /**
+     * @ngdoc object
+     * @name category.controller:CategoriesCtrl
+     *
+     * @description
+     *
+     */
+    angular
+        .module('my-page')
+        .controller('MyPageCtrl', MyPageCtrl);
+
+    function MyPageCtrl($scope, $state,MyPageService) {
+
+        var vm = this;
+        vm.ctrlName = 'My Hot Reload Page :)';
+
+    }
+}());

src/app/my-module/my-page/my-page.directive.js

@@ -0,0 +1,46 @@
+/**
+ * Created by sguilly on 21/10/16.
+ */
+
+/**
+ * Created by sguilly on 19/10/16.
+ */
+
+(function () {
+    'use strict';
+
+    // <div address-input max="77" ng-model="poi.address"></div>
+
+    angular
+        .module('my-page')
+        .directive('myPageDirective', myPageDirective);
+
+    function myPageDirective() {
+        var directive = {
+            restrict: 'EA',
+            template: '<div class="blue">{{vm.text}} - {{vm.serviceText}}</div>'
+            ,
+            scope: {
+
+                text: '=?',
+                ngModel: '=',
+
+            },
+            require: 'ngModel',
+            controller: MyPageDirectiveCtrl,
+            controllerAs: 'vm',
+            bindToController: true
+        };
+
+        return directive;
+    }
+
+    MyPageDirectiveCtrl.$inject = ['HotReloadService'];
+    function MyPageDirectiveCtrl(MyPageService) {
+        var vm = this;
+
+        vm.serviceText = MyPageService.getText()
+
+    }
+
+}());

src/app/my-module/my-page/my-page.html

@@ -0,0 +1,9 @@
+<div class="widgets red">
+
+ {{vm.ctrlName}}
+
+    <my-page-directive text="'my directive text'"></my-page-directive>
+
+</div>
+
+

src/app/my-module/my-page/my-page.module.js

@@ -0,0 +1,16 @@
+/**
+ * Created by sguilly on 22/11/16.
+ */
+(function () {
+    'use strict';
+
+    /* @ngdoc object
+     * @name categories
+     * @description
+     *
+     */
+    angular
+        .module('my-page', [
+            'ui.router'
+        ]);
+}());

src/app/my-module/my-page/my-page.routes.js

@@ -0,0 +1,24 @@
+/**
+ * Created by sguilly on 22/11/16.
+ */
+(function () {
+    'use strict';
+
+    angular
+        .module('hotReloadPage')
+        .config(config);
+
+    function config($stateProvider) {
+        $stateProvider
+            .state('my-page', {
+                url: '/my-page',
+                templateUrl: 'app/my-module/my-page/my-page.html',
+                controller: 'MyPageCtrl',
+                controllerAs: 'vm',
+                title: 'my-page',
+                sidebarMeta: {
+                    order: 0,
+                },
+            });
+    }
+}());

src/app/my-module/my-page/my-page.scss

@@ -0,0 +1,13 @@
+.blue {
+  background-color: #777aff;
+  color: white;
+  margin : 20px;
+  padding : 20px;
+}
+
+.red {
+  background-color: #e81c2e;
+  color: white;
+  margin : 20px;
+  padding : 20px;
+}

src/app/my-module/my-page/my-page.service.js

@@ -0,0 +1,16 @@
+/**
+ * Created by sguilly on 22/11/16.
+ */
+
+'use strict';
+
+angular.module('my-page')
+
+    .service('MyPageService', function () {
+
+        this.getText = function()
+        {
+            return 'MyService'
+        }
+
+    });

src/app/pages/hotReload/hotReload.js

@@ -0,0 +1,17 @@
+
+/**
+ * Created by sguilly on 23/10/16.
+ */
+(function () {
+    'use strict';
+
+    /* @ngdoc object
+     * @name models
+     * @description
+     *
+     */
+    angular
+        .module('BlurAdmin.pages.hotReload', [
+           'hotReloadPage'
+        ]);
+}());

src/app/pages/hotReload/hotReloadPage/hotReload.controller.js

@@ -0,0 +1,24 @@
+/**
+ * Created by sguilly on 22/11/16.
+ */
+(function () {
+    'use strict';
+
+    /**
+     * @ngdoc object
+     * @name category.controller:CategoriesCtrl
+     *
+     * @description
+     *
+     */
+    angular
+        .module('hotReloadPage')
+        .controller('HotReloadCtrl', HotReloadCtrl);
+
+    function HotReloadCtrl($scope, $state,MyPageService) {
+
+        var vm = this;
+        vm.ctrlName = 'Hot Reload Page';
+
+    }
+}());

src/app/pages/hotReload/hotReloadPage/hotReload.directive.js

@@ -0,0 +1,46 @@
+/**
+ * Created by sguilly on 21/10/16.
+ */
+
+/**
+ * Created by sguilly on 19/10/16.
+ */
+
+(function () {
+    'use strict';
+
+    // <div address-input max="77" ng-model="poi.address"></div>
+
+    angular
+        .module('hotReloadPage')
+        .directive('hotReloadDirective', myPageDirective);
+
+    function myPageDirective() {
+        var directive = {
+            restrict: 'EA',
+            template: '<div class="blue">{{vm.text}} - {{vm.serviceText}}</div>'
+            ,
+            scope: {
+
+                text: '=?',
+                ngModel:'=',
+
+            },
+            require: 'ngModel',
+            controller: HotReloadDirectiveCtrl,
+            controllerAs: 'vm',
+            bindToController: true
+        };
+
+        return directive;
+    }
+
+    HotReloadDirectiveCtrl.$inject = ['HotReloadService'];
+    function HotReloadDirectiveCtrl(HotReloadService) {
+        var vm = this;
+
+        vm.serviceText = HotReloadService.getText()
+
+    }
+
+}());