projects / JavaScriptForFun / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 4deda89)
showcase: ng-app vs angular.bootstrap, in my case using ng-app
authorGustavo Martin Morcuende <gu.martinm@gmail.com>
Sun, 16 Aug 2015 20:48:51 +0000 (22:48 +0200)
committerGustavo Martin Morcuende <gu.martinm@gmail.com>
Sun, 16 Aug 2015 20:48:51 +0000 (22:48 +0200)
angularjs/showcase/app/app.config.js patch | blob | history
angularjs/showcase/app/app.module.js patch | blob | history
angularjs/showcase/app/index.html patch | blob | history

diff --git a/angularjs/showcase/app/app.config.js b/angularjs/showcase/app/app.config.js
index bc41983..b86a7f0 100644 (file)
--- a/angularjs/showcase/app/app.config.js
+++ b/angularjs/showcase/app/app.config.js
@@ -9,12 +9,13 @@
 
       function($stateProvider, $urlRouterProvider) {
         var welcome = {
+          abstract: false,
           url: '/welcome',
           templateUrl: 'app/welcome/welcome.html'
         };
 
-        $urlRouterProvider.otherwise('app/welcome');
-        $stateProvider.state('app.welcome', welcome);
+        $urlRouterProvider.otherwise('welcome');
+        $stateProvider.state('welcome', welcome);
       }
     ]);
 }());
\ No newline at end of file
diff --git a/angularjs/showcase/app/app.module.js b/angularjs/showcase/app/app.module.js
index 678ef64..cc245ef 100644 (file)
--- a/angularjs/showcase/app/app.module.js
+++ b/angularjs/showcase/app/app.module.js
@@ -7,4 +7,5 @@
     'ui.bootstrap',
     'ui.bootstrap.modal'
   ]);
+
 }());
\ No newline at end of file
diff --git a/angularjs/showcase/app/index.html b/angularjs/showcase/app/index.html
index 7a6a354..b684204 100644 (file)
--- a/angularjs/showcase/app/index.html
+++ b/angularjs/showcase/app/index.html
@@ -46,19 +46,6 @@
     <!-- endbuild -->
 
 
-    <script>
-    (function() {
-      'use strict';
-
-      angular
-        .element(document)
-        .ready(function() {
-          angular.bootstrap(document.body, ['app'
-          ]);
-        });
-    })();
-    </script>
-
 
     <!-- build:remove -->
     <!-- MOCKS -->
@@ -70,10 +57,42 @@
 
   <body>
 
-    <div ng-app="app">
+    <!-- Automatic initialization. Using strict dependency injection.
+
+         In my case title is not going to be changed from AngularJS, so ng-app is being used in body section
+         instead of html section (documentation recommends html section)
+
+         AngularJS will work with DOM elements under the div section where ng-app is declared.
+         This could be useful when using different frameworks in the same html application where one framework
+         works with some DOM elements and another framework works with other DOM elements.
+    -->
+    <div ng-app="app" ng-strict-di>
       <div ui-view></div>
+      <div>
+        <ui-view>
+          <i>Hello World!!! You should never see this if ui-router works as expected.</i>
+        </ui-view>
+      </div>
     </div>
 
+    <!-- Manual initialization, instead of ng-app. It could be useful in case of loading more
+         than one AngularJS application (what is not usual) In my case I load just one, called 'app'.
+         I will always use strict dependency injection.
+    <script>
+      (function() {
+        'use strict';
+
+        angular
+          .element(document)
+            .ready(function() {
+              angular.bootstrap(document.body, ['app'], {
+                strictDi: true
+              });
+            });
+      })();
+    </script>
+    -->
+
   </body>
 
 </html>
JavaScript for fun