added babel pollyfill, created about/aboutComp/aboutComponent.js and added scss file

Author: nimjetushar

.babelrc

@@ -1,4 +1,7 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
   "plugins": ["angularjs-annotate", "@babel/plugin-syntax-dynamic-import"]
 }

package-lock.json

@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/nimjetushar/angularjs-react#readme",
   "dependencies": {
+    "@babel/polyfill": "^7.0.0",
     "@uirouter/angularjs": "^1.0.20",
     "angular": "1.7.4",
     "bootstrap": "^4.1.3",

package.json

@@ -0,0 +1,4 @@
+<div class="about-container">
+    <h3>About</h3>
+    <p></p>
+</div>

src/about/aboutComp/aboutComponent.html

@@ -1,3 +1,5 @@
+import "./aboutComponent.scss"
+
 aboutCtrl.$inject = [];
 
 function aboutCtrl() {}

src/about/aboutComponent.js renamed to src/about/aboutComp/aboutComponent.js

@@ -0,0 +1,2 @@
+.about-container {
+}

src/about/aboutComp/aboutComponent.scss

@@ -1,17 +1,22 @@
 import angular from "angular";
-import uiRouter from "@uirouter/angularjs";
 
-import aboutComponent from "./aboutComponent";
+import aboutComponent from "./aboutComp/aboutComponent";
 
 const ABOUT_MODULE = angular
   .module("AboutModule", [])
   .config([
-    "$stateProvider",
-    function($stateProvider) {
-      $stateProvider.state("about", {
+    "$stateRegistryProvider",
+    function($stateRegistry) {
+      // any two of the way can be used
+      $stateRegistry.register({
+        name: "about",
         url: "/about",
         component: "aboutComponent"
       });
+      // $stateProvider.state("about", {
+      //   url: "/about",
+      //   component: "aboutComponent"
+      // });
     }
   ])
   .component("aboutComponent", aboutComponent);

src/about/aboutComponent.html

@@ -1,18 +1,19 @@
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <a class="navbar-brand" href="#">Angular React</a>
-    <button class="navbar-toggler" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler" aria-expanded="false" aria-label="Toggle navigation"
+        ng-click="toggleNav()">
         <span class="navbar-toggler-icon"></span>
     </button>
 
-    <div class="collapse navbar-collapse">
+    <div class="collapse navbar-collapse" ng-class="{'show': isNavOpen}">
         <ul class="navbar-nav mr-auto">
-            <li class="nav-item">
+            <li class="nav-item" ui-sref-active="active">
                 <a class="nav-link" ui-sref="landing">Home</a>
             </li>
-            <li class="nav-item">
+            <li class="nav-item" ui-sref-active="active">
                 <a class="nav-link" ui-sref="about">About</a>
             </li>
-            <li class="nav-item">
+            <li class="nav-item" ui-sref-active="active">
                 <a class="nav-link" ui-sref="help">Help</a>
             </li>
         </ul>

src/about/aboutModule.js

@@ -1,6 +1,12 @@
-headerCtrl.$inject = [];
+headerCtrl.$inject = ["$scope"];
 
-function headerCtrl() {}
+function headerCtrl($scope) {
+  $scope.isNavOpen = false;
+
+  $scope.toggleNav = function() {
+    $scope.isNavOpen = !$scope.isNavOpen;
+  };
+}
 
 export default {
   templateUrl: "./headerComponent.html",

src/header/headerComponent.html

@@ -1,4 +1,5 @@
 import angular from "angular";
 import uiRouter from "@uirouter/angularjs";
+import "@babel/polyfill";
 
 import 'bootstrap/scss/bootstrap.scss'