made bootstrap ui work with dropdowns

aredfox · Mar 29, 2017 · a2967df · a2967df
1 parent 20fc93a
commit a2967df
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -56,4 +56,4 @@
     "angular-ui-router": "^0.4.2",
     "bootstrap": "^3.3.7"
   }
-}
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -3,12 +3,10 @@ import * as angular from 'angular';
 
 // application modules
 import { moduleName as coreModule } from './core/core.module';
-// import { moduleName as contactsModule } from './contacts/contacts.module';
 import { moduleName as todosModule } from './todos/todos.module';
 
 export const moduleName =
     angular.module('application', [
         coreModule,
-        // contactsModule,
         todosModule
     ]).name;
diff --git a/src/app/core/components/root/root.component.html b/src/app/core/components/root/root.component.html
@@ -0,0 +1,41 @@
+<nav class="navbar navbar-default" role="navigation">
+    <div class="navbar-header">
+        <button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
+				<span class="sr-only">Toggle navigation</span>
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+			</button>
+        <a class="navbar-brand" href="#">ToDoSth</a>
+    </div>
+    <div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
+        <ul class="nav navbar-nav">
+            <li><a href="#">Link 1</a></li>
+            <li><a href="#">Link 2</a></li>
+            <li uib-dropdown on-toggle="toggled(open)">
+                <a href id="simple-dropdown" uib-dropdown-toggle>Link 3 <span class="caret"></span></a>
+                <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
+                    <li><a href="#">SubItem 1</a></li>
+                    <li><a href="#">SubItem 2</a></li>
+                    <li><a href="#">SubItem 3</a></li>
+                    <li role="separator" class="divider"></li>
+                    <li><a href="#">SubItem 4</a></li>
+                </ul>
+            </li>
+        </ul>
+        <ul class="nav navbar-nav navbar-right">
+            <li uib-dropdown on-toggle="toggled(open)">
+                <a href id="simple-dropdown" class="nav-text" uib-dropdown-toggle>Signed in as John Doe <span class="caret"></span></a>
+                <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
+                    <li><a href="#">Profile</a></li>
+                    <li role="separator" class="divider"></li>
+                    <li><a href="#">Sign Out</a></li>
+                </ul>
+            </li>
+        </ul>
+    </div>
+</nav>
+
+<div class="container-fluid">
+    <div ui-view></div>
+</div>
diff --git a/src/app/core/components/root/root.component.ts b/src/app/core/components/root/root.component.ts
@@ -5,9 +5,6 @@ export class Root implements angular.IComponentOptions {
     template: string;
 
     constructor() {
-        this.template = `
-        <h1>TODO</h1>
-        <div ui-view></div>
-        `;
+        this.template = require('./root.component.html');
     }
 }
diff --git a/src/index.html b/src/index.html
@@ -1,15 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="utf-8">
-  <meta http-equiv="x-ua-compatible" content="ie=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
-   <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>
+        <%= htmlWebpackPlugin.options.title %>
+    </title>
 </head>
 
 
 <body>
-    <root>Loading</root>
+    <root>Loading...</root>
 </body>
-</html>
+
+</html>
diff --git a/src/vendor.ts b/src/vendor.ts
@@ -1,4 +1,5 @@
 import 'angular';
 import 'angular-ui-router';
+
 import 'angular-ui-bootstrap';
 import 'bootstrap/dist/css/bootstrap.css';
diff --git a/webpack.config.js b/webpack.config.js
@@ -51,7 +51,7 @@ module.exports = {
 
     plugins: [
         new HtmlWebpackPlugin({
-            title: 'AngularJS - Webpack',
+            title: 'ToDoSth',
             template: 'index.html',
             inject: true
         }),