New implementation using promises, now loads template and controller in paraller, removed old custom directives

Author: matys84pl

app/css/app.css

@@ -1,2 +1,6 @@
 /* app css stylesheet */
 
+body {
+    padding-left: 20px;
+    padding-top: 20px;
+}

app/index.html

@@ -13,12 +13,8 @@
     <a href="#/view2" class="btn">view2</a>
 </div>
 
-<div mb-lazy-controller-view ng></div>
+<div ng-view class="well well-small"></div>
 
-<div class="well" mb-lazy-controller="controllers/third">
-    <h1>{{message}}</h1>
-</div>
-
-<script data-main="js/main" src="lib/requirejs/require.js"></script>
+<script data-main="js/main" src="lib/require/require.js"></script>
 </body>
 </html>

app/js/controllers/first.js

@@ -7,23 +7,11 @@
 
 'use strict';
 
-define(['app'], function (app) {
+define([], function () {
 
-    var FirstController = function ($scope, $timeout) {
-        var message = "I'm the 1st controller! random: ";
-        $scope.message = message;
-
-        function update() {
-            $scope.message = message + Math.random();
-            $timeout(update, 1000);
-        }
-
-        update();
+    function FirstController($scope) {
+        $scope.message = "I'm the 1st controller!";
     }
 
-    FirstController.$inject = ['$scope', '$timeout'];
-
-    app.controller('FirstController', FirstController);
-
     return FirstController;
 });

app/js/controllers/second.js

@@ -7,24 +7,11 @@
 
 'use strict';
 
-define(['app'], function (app) {
+define([], function () {
 
-    var SecondController = function ($scope, $timeout) {
-        var message = "I'm the 2nd controller! random: ";
-
-        $scope.message = message;
-
-        function update() {
-            $scope.message = message + Math.random();
-            $timeout(update, 1000);
-        }
-
-        update();
+    function SecondController($scope) {
+        $scope.message = "I'm the 2nd controller!";
     }
 
-    SecondController.$inject = ['$scope', '$timeout'];
-
-    app.controller('SecondController', SecondController);
-
     return SecondController;
 });

app/js/controllers/third.js

@@ -10,6 +10,7 @@
 require.config({
     baseUrl:'js',
     paths:{
+        text:'../lib/require/text',
         jquery:'../lib/jquery/jquery',
         angular:'../lib/angular/angular'
     },
@@ -26,9 +27,9 @@ require.config({
 
 require([
     'angular',
+    'text',
     'jquery',
     'app',
-    'directives',
     'routes'
 ], function (angular) {
     //This function will be called when all the dependencies

app/js/directives.js

@@ -9,14 +9,41 @@
 
 define(['app'], function (app) {
 
-    return app.config(function ($routeProvider) {
-        $routeProvider.when('/view1', {
-            templateUrl:'partials/view1.html'
-        });
-        $routeProvider.when('/view2', {
-            templateUrl:'partials/view2.html',
-            controllerModule:'controllers/second'
-        });
+    function viewConfig(controllerProvider, controllerName, templateUrl) {
+        var defer,
+            html,
+            routeDefinition = {};
+
+        routeDefinition.template = function () {
+            return html;
+        };
+        routeDefinition.controller = controllerName;
+        routeDefinition.resolve = {
+            delay:function ($q,  $rootScope) {
+                defer = $q.defer();
+                if (!routeDefinition.html) {
+
+                    require([controllerName, "text!" + templateUrl], function (controller, template) {
+                        controllerProvider.register(controllerName, controller);
+                        html = template;
+                        defer.resolve(true);
+                        $rootScope.$apply()
+                    })
+
+                } else {
+                    defer.resolve(true);
+                }
+                return defer.promise;
+            }
+        }
+
+        return routeDefinition;
+    }
+
+    return app.config(function ($routeProvider, $controllerProvider) {
+        $routeProvider.when('/view1', viewConfig($controllerProvider, 'controllers/first', '../partials/view1.html'));
+        $routeProvider.when('/view2', viewConfig($controllerProvider, 'controllers/second', '../partials/view2.html'));
+
         $routeProvider.otherwise({redirectTo:'/view1'});
     });