angular · Mango-J · Mar 23, 2015 · Apr 6, 2015 · Jul 26, 2015 · Jul 30, 2015
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,9 @@
 logs/*
 !.gitkeep
 node_modules/
-bower_components/
+app/bower_components/
 tmp
 .DS_Store
-.idea
+.idea
+manifest.json
+dist/
diff --git a/Makefile b/Makefile
@@ -0,0 +1,4 @@
+clean:
+	rm -rf dist/
+	rm -rf node_modules/
+	rm -rf app/bower_components/
diff --git a/app/app.css b/app/app.css
diff --git a/app/app.js b/app/app.js
@@ -1,12 +1,66 @@
-'use strict';
+(function(){
+  'use strict';
 
-// Declare app level module which depends on views, and components
-angular.module('myApp', [
-  'ngRoute',
-  'myApp.view1',
-  'myApp.view2',
-  'myApp.version'
-]).
-config(['$routeProvider', function($routeProvider) {
-  $routeProvider.otherwise({redirectTo: '/view1'});
-}]);
+  // Declare app level module which depends on views, and components
+  angular
+    .module('myApp', [
+      'ui.router',
+      'myApp.header',
+      'myApp.footer',
+      'myApp.view1',
+      'myApp.view2',
+      'myApp.view3',
+      'myApp.version',
+      'ui.bootstrap',
+    ])
+    .config(['$stateProvider', '$urlRouterProvider', config]);
+
+    function config ($stateProvider, $urlRouterProvider) {
+        $urlRouterProvider.otherwise('/view1');
+
+        $stateProvider
+          .state('app', {
+              url: '/',
+              views: {
+                'header': {
+                  templateUrl: 'view_header/header.html',
+                  controller: 'HeaderController'
+                },
+                //'content': {
+                  //template: '<p>default content</p>'
+                //},
+                'footer': {
+                  templateUrl: 'view_footer/footer.html',
+                  controller: 'FooterController'
+                }
+              }
+          })
+          .state('app.view1', {
+              url: 'view1',
+              views: {
+                'content@': {
+                  templateUrl: 'view1/view1.html',
+                  controller: 'View1Ctrl'
+                }
+              }
+          })
+          .state('app.view2', {
+            url: 'view2',
+            views: {
+              'content@': {
+                templateUrl: 'view2/view2.html',
+                controller: 'View2Ctrl'
+              }
+            }
+          })
+          .state('app.view3', {
+            url: 'view3',
+            views: {
+              'content@': {
+                templateUrl: 'view3/view3.html',
+                controller: 'View3Ctrl'
+              }
+            }
+          });
+      }
+})();
diff --git a/app/components/version/interpolate-filter_test.js b/app/components/version/interpolate-filter_test.js
diff --git a/app/components/version/version-directive_test.js b/app/components/version/version-directive_test.js
diff --git a/app/components/version/version_test.js b/app/components/version/version_test.js
diff --git a/app/css/app.css b/app/css/app.css
@@ -0,0 +1,36 @@
+/* app css stylesheet */
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  /* Margin bottom by footer height */
+  margin-bottom: 60px;
+  padding-top: 70px;
+}
+
+body::after {
+  content: "";
+  /*background: url('../img/xxx.png'); */
+  opacity: 0.05;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  z-index: -1;
+  background-repeat: no-repeat;
+  background-position: right bottom;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 60px;
+  background-color: #f5f5f5;
+}
+
+.buffer-top { margin-top:20px; }
diff --git a/app/index-async.html b/app/index-async.html
diff --git a/app/index.html b/app/index.html
@@ -1,43 +1,19 @@
 <!DOCTYPE html>
-<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
+<html lang="en" ng-app="myApp" class="no-js">
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>My AngularJS App</title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
-  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
-  <link rel="stylesheet" href="app.css">
-  <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
+  <link rel="stylesheet" href="css/myapp.css">
 </head>
 <body>
-  <ul class="menu">
-    <li><a href="#/view1">view1</a></li>
-    <li><a href="#/view2">view2</a></li>
-  </ul>
 
-  <!--[if lt IE 7]>
-      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
-  <![endif]-->
+  <div ui-view="header"></div>
+  <div ui-view="content"></div>
+  <div ui-view="footer"></div>
 
-  <div ng-view></div>
-
-  <div>Angular seed app: v<span app-version></span></div>
-
-  <!-- In production use:
-  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-  -->
-  <script src="bower_components/angular/angular.js"></script>
-  <script src="bower_components/angular-route/angular-route.js"></script>
-  <script src="app.js"></script>
-  <script src="view1/view1.js"></script>
-  <script src="view2/view2.js"></script>
-  <script src="components/version/version.js"></script>
-  <script src="components/version/version-directive.js"></script>
-  <script src="components/version/interpolate-filter.js"></script>
+  <script src="js/myapp.js"></script>
 </body>
 </html>
diff --git a/app/view1/view1.html b/app/view1/view1.html
@@ -1 +1,4 @@
-<p>This is the partial for view 1.</p>
+<div ng-controller="View1Ctrl">
+  <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
+  <button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
+</div>
diff --git a/app/view1/view1.js b/app/view1/view1.js
@@ -1,14 +1,22 @@
-'use strict';
+(function(){
+  'use strict';
 
-angular.module('myApp.view1', ['ngRoute'])
+  angular
+    .module('myApp.view1', [])
+    .controller('View1Ctrl', View1Ctrl);
 
-.config(['$routeProvider', function($routeProvider) {
-  $routeProvider.when('/view1', {
-    templateUrl: 'view1/view1.html',
-    controller: 'View1Ctrl'
-  });
-}])
+  function View1Ctrl ($scope) {
+    $scope.alerts = [
+        { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
+        { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
+    ];
 
-.controller('View1Ctrl', [function() {
+    $scope.addAlert = function() {
+        $scope.alerts.push({msg: 'Another alert!'});
+    };
 
-}]);
+    $scope.closeAlert = function(index) {
+        $scope.alerts.splice(index, 1);
+    };
+  };
+})();
diff --git a/app/view2/view2.html b/app/view2/view2.html
@@ -1,5 +1,3 @@
-<p>This is the partial for view 2.</p>
-<p>
-  Showing of 'interpolate' filter:
-  {{ 'Current version is v%VERSION%.' | interpolate }}
-</p>
+<div ng-controller="View2Ctrl as myCtrl">
+  <h2>{{ myCtrl.content }}</h2>
+</div>
diff --git a/app/view2/view2.js b/app/view2/view2.js
@@ -1,14 +1,11 @@
-'use strict';
+(function(){
+  'use strict';
 
-angular.module('myApp.view2', ['ngRoute'])
+  angular
+    .module('myApp.view2', [])
+    .controller('View2Ctrl', View2Ctrl);
 
-.config(['$routeProvider', function($routeProvider) {
-  $routeProvider.when('/view2', {
-    templateUrl: 'view2/view2.html',
-    controller: 'View2Ctrl'
-  });
-}])
-
-.controller('View2Ctrl', [function() {
-
-}]);
+  function View2Ctrl () {
+    this.content = "Content for view2";
+  };
+})();