无法获得Angular Routing Working

Question

我正在尝试使用AngularJS构建SPA。但是，我不能让路由工作为我的生活。基本上我无法把它带到点击其中一个列表项的地方，它会路由视图以显示不同的内容。

我在想，也许其中一个angularJS文件正在取消它或者我正在弄乱指令中的东西。
的index.html：

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(
  ["$stateProvider", "$urlRouterProvider",
    function($stateProvider, $urlRouterProvider) {

      $urlRouterProvider.otherwise("/home");

      $stateProvider
        .state("home", {
          url: "/home",
          templateUrl: "assetView.html",
          controller: "MainController"
        })
        .state("assetView", {
          url: "/assetView",
          templateUrl: "assetView.html",
          controller: "MainController"
        })



      ;

    }
  ]);
var myApp = angular.module('myApp', ['ui.bootstrap']);

myApp.controller('MainController', function MainController($scope){

console.log("inside of MainController");
var vm = this;
$scope.selectedAsset = undefined;
$scope.startDate;
$scope.endDate;
// Current array for testing typeahead feature
// This needs to be an ajax call in the future to populate
// the asset array w/ all ticker symbols
$scope.asset = ['AAAP', 'AABA', 'AABA', 'AAME', 'AAOI',
  'AAON', 'AAPL', 'AAWW', 'AAXJ', 'BMTC', 'BNCL',
  'BNDX', 'BNFT', 'BNSO', 'CAKE', 'CALA', 'CALD', 'CALI',
  'CALL', 'CALM', 'DWTR', 'DXGE', 'DXJS', 'ERII',
  'ESBK', 'ESCA'];

  /* Datepicker Functions */
  $( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#from" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          changeYear: true,
          numberOfMonths: 1
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
          startDate = getDate(this);
          console.log("start date: " + startDate);
        }),
      to = $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        changeYear: true,
        numberOfMonths: 1
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
        endDate = getDate(this);
        console.log("end date: " + endDate);
      });

    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }

      return date;
    }
  } );
/* End of Datepicker functions */


/* Chart Data */
    var myChart = Highcharts.chart('highchartsContainer', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stock Header Here'
        },
        colors: ['#4BA2EA', '#CBCBCB', '#266FAD'],
        xAxis: {
            categories: ['Div', 'EL Fix', 'LTT']
        },
        yAxis: {
            title: {
                text: ''
            }
        },
        series: [{
            name: 'Sample1',
            data: [1, 4, 4]
        }, {
            name: 'Sample2',
            data: [5, 7, 3]
        },{
            name: 'Sample3',
            data: [2, 3, 4]
        }]
    });
/* End Chart Data */
/* Highchart 2 */
var myChart2 =
 Highcharts.chart('highchartsContainer2', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stock Header Here'
    },
    colors: ['#4BA2EA', '#CBCBCB', '#266FAD'],
    xAxis: {
        categories: ['Div', 'EL Fix', 'LTT']
    },
    yAxis: {
        title: {
            text: ''
        }
    },
    series: [{
        name: 'Sample1',
        data: [3, 1, 1]
    }, {
        name: 'Sample2',
        data: [9, 8, 2]
    },{
        name: 'Sample3',
        data: [9, 2, 5]
    }]
});
/* End Highchart 2 */
/* Highchart 3 */
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=goog-c.json&callback=?', function (data) {
    Highcharts.stockChart('highchartsContainer3', {
        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'GOOG Stock Price'
        },

        series: [{
            name: 'GOOG Stock Price',
            data: data,
            marker: {
                enabled: true,
                radius: 3
            },
            shadow: true,
            tooltip: {
                valueDecimals: 2
            }
        }]
    });
});

/* End Highchart 3 */



});

/* Body Styling */
body {
    background-image: url("images/background_image1.png");
}
/* End Body Styling */
/* help.html div */
#helpDiv{
    height: 500px;
    width: 500px;
    background-color: red !important;

}
/* End help.html div */
/* Wrapper Styling */
.wrapper{
    background-color: #FFFFFF;
    box-shadow: 0px 30px 40px rgba(0,0,0,.5);
    margin: 0 auto;
    margin-top: 60px;
    margin-bottom: 80px;
    width: 1200px;
    height: 1350px;
}
/* End Wrapper Styling */
/* Header Styling */
.header{
    background-color: #66A8EA;
    margin: 0 auto;
    width: 1250px;
    height: 100px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    left: 0;
    right: 0;
}
.leftTriangle{
    width: 0;
    height: 0;
    margin-top: 46px;
    border-style: solid;
    border-width: 0 25px 20px 0;
    border-color: transparent #054e9c transparent transparent;
}
.rightTriangle{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 25px 0 0;
    border-color: #054e9c transparent transparent transparent;
    margin-top: -20px;
    margin-left: 1225px;
}
#stockImageSVG{
    height: 65px;
    width: 65px;
    margin-left: 40px;
    margin-top: 20px;
    position: absolute;
}

#uncImageSVG{
    margin-left: 150px;
    margin-top: 10px;
    height: 80px;
    width: 300px;
    position: absolute;
}
#searchBar{
    margin-left: 760px;
    margin-top: 20px;
    width: 388px;
    margin-right: 60px;
}
#searchBarButton{
    margin-top: -1px;
}
/* Typeahead Dropdown Styling */
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
    color: #333333;
    text-decoration: none;
    background-color: #B9DDFA !important;
}
/* End Typeahead Dropdown Styling */
#dateRangeSelector{
    position: absolute;
    color: white;
    margin-left: 760px;
    margin-top: 60px;
}
#from, #to{
    color: #5B5B5B;
    border-radius: 2px 2px 2px 2px;
    border-style: solid;
    border-width: thin;
    border-color: #D4D4D4;
    font-family: Arial;
}
#toLabel{
    margin-left: 26px;
}
/* End Header Styling */

/* Navbar Styling */
#custom-bootstrap-menu{
position: absolute;
margin-top: 140px;
margin-left: 30px;
margin-right: 30px;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(119, 119, 119, 1);
}
#custom-bootstrap-menu.navbar-default {
    font-size: 12px;
    background-color: rgba(230, 225, 225, 0.51);
    border-width: 0px;
    border-radius: 0px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    width: 93px;
    text-align: center;
    color: rgba(119, 119, 119, 1);
    background-color: rgba(247, 247, 247, 1);
    margin: 0 auto;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(169, 207, 242, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(85, 85, 85, 1);
    background-color: rgba(219, 219, 219, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: #dbdbdb;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: #dbdbdb;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #dbdbdb;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #e6e1e1;
}
/* End Navbar Styling */
/* Data Table Styling */
#tableArea{
    display: inline-block;
    background-color: #EBEBEB;
    border-radius: 0px 0px 0px 0px;
    margin-top: 190px;
    margin-left: 30px;
    height: 500px;
    width: 500px;
}
#tableContainer{
    position: absolute;
    margin-top: 10px;
    margin-left: 40px;
    width: 500px;
    height: 480px;
    background-color: #fff;
}
#dataTable2{
    margin-top: 20px;
    margin-left: 50px;
    margin-right: 10px;
    width: 400px;
    background-color: #F9F9F9;
}
/* End Data Table Styling */
/* Chart Area Styling */
#chartArea{
   display: inline-block;
   background-color: #EBEBEB;
   border-radius: 0px 0px 0px 0px;
   margin-left: -10px;
   margin-top: 190px;
   height: 500px;
   width: 621px;
}
#chartContainer{
    background-color: #fff;
    margin-top: 10px;
    margin-left: 80px;
    height: 480px;
    width: 500px;
}
/* End Chart Area Styling */
/* customArea3 Styling */
#customArea3{
    display: inline-grid;
    height: 520px;
    width: 555px;
    margin-left: 30px;
    margin-top: -10px;
    background-color: #EBEBEB;
    border-radius: 0px 0px 0px 5px;
}
#customArea3Container{
    height: 480px;
    width: 500px;
    margin-top: 10px;
    margin-left: 40px;
    background-color: #fff;
}
/* End Custom Area 3 Styling */
/* customArea4 Styling */
#customArea4{
    display: inline-grid;
    position: relative;
    margin-top: -10px;
    height: 520px;
    width: 561px;
    margin-left: -5px;
    background-color: #EBEBEB;
    border-radius: 0px 0px 5px 0px;
}
#customArea4Container{
    height: 480px;
    width: 500px;
    margin-top: 10px;
    margin-left: 20px;
    background-color: #fff;
}
/* End Custom Area 4 Styling */
/* Highcharts Styling */
#highchartsContainer{
    position: absolute;
    margin-top: 60px;
    margin-left: 10px;
    width: 480px;
    height: 350px;
}
#highchartsContainer2{
    position: absolute;
    margin-top: 60px;
    margin-left: 10px;
    width: 480px;
    height: 350px;
}
#highchartsContainer3{
    position: absolute;
    margin-top: 60px;
    margin-left: 10px;
    width: 480px;
    height: 350px;
}
/* End Highcharts Styling */
/* Print Button Styling */
#printButton{
    position: absolute;
    margin-top: 200px;
    margin-left: 1150px;
}
#printButton:hover{
    background-color: #99badd;
    border-color: #fff !important;
}
/* End Print Button Styling */

<!doctype html>

<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>c426</title>

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />

  <!-- Angular JS / Angular JS UI Router CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>

  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- Style Sheets -->
  <link rel="stylesheet" href="project.css">
  <!-- Controllers -->
  <script src="js/app.js" type="text/javascript"></script>
  <script src="js/MainController.js" type="text/javascript"></script>

  <!-- SweetAlert2 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.10.1/sweetalert2.all.min.js"></script>

  <!-- Highcharts CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/adapters/standalone-framework.js"></script>
  <script src="https://code.highcharts.com/stock/highstock.js"></script>
  <!-- Favicon for Browser Tab -->
  <link rel="shortcut icon" type="image/x-icon" href="images/uncIcon2.ico">

</head>
<body ng-controller="MainController">
<div class="header">
    <img id="stockImageSVG" src="images/stock_bar_image.svg"/>
    <a href="http://www.unc.edu/" target="_blank">
        <img id="uncImageSVG" src="images/UNC_logo_white.png"/>
    </a>
    <div id="dateRangeSelector">
            <label for="from">From</label>
            <input type="text" id="from" name="from">
            <label id="toLabel" for="to">To</label>
            <input type="text" id="to" name="to">
     </div>
<div class="row">
  <div class="col-lg-6">
    <div id="searchBar" class="input-group">
      <input type="text" class="form-control" placeholder="Search for asset..."
      uib-typeahead="name for name in asset | filter:$viewValue | limitTo:8" class="form-control"
      ng-model="selectedAsset"/>
      <span class="input-group-btn">
        <button id="searchBarButton" class="btn btn-default glyphicon glyphicon-search" type="button"></button>
      </span>
    </div>
  </div>
</div>
    <div class="leftTriangle"></div>
    <div class="rightTriangle"></div>
</div>
<div class="wrapper">


    <div id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="#">GOOGL</a></li>
                <li><a ui-sref="assetView">BIDU</a></li>
                <li><a ui-sref="home">YNDX</a></li>
                <li><a href="#">AAPL</a></li>
                <li><a href="#">IBM</a></li>
                <li><a href="#">TWTR</a></li>
                <li><a href="#">VZ</a></li>
                <li><a href="#">WIFI</a></li>
                <li><a href="#">FB</a></li>
                <li><a href="#">IAC</a></li>
                <li><a href="#">GDDY</a></li>
                <li><a href="#">AOL</a></li>
            </ul>
</div> <!-- Ends Custom Navbar -->
<button type="button" id="printButton" onclick="window.print();"
    class="btn btn-default glyphicon glyphicon-print"
    title="Print Page"></button>
    <!-- MAIN CONTENT -->
    <!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
    <div class="container">
        <div ui-view></div>
    </div>

<div id="assetView">
    <div id="tableArea">
        <div id="tableContainer">
        <table id="dataTable2" class="table table-bordered">
       <thead>
         <tr>
           <th>{{asset[0]}}</th>
           <th>{{asset[11]}}</th>
           <th>{{asset[17]}}</th>
           <th>{{asset[20]}}</th>
           <th>{{asset[25]}}</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>a</td>
           <td>0.001</td>
           <td>0.002</td>
           <td>0.001</td>
           <td>0.002</td>
         </tr>
         <tr>
           <td>b</td>
           <td>0.002</td>
           <td>0.003</td>
           <td>0.001</td>
           <td>0.002</td>
         </tr>
         <tr>
           <td>c</td>
           <td>0.2</td>
           <td>0.3</td>
           <td>0.001</td>
           <td>0.002</td>
         </tr>
       </tbody>
     </table>
     </div>
    </div>
    <div id="chartArea">
        <div id="chartContainer">
            <div id="highchartsContainer"></div>
        </div>
    </div>
    <div id="customArea3">
        <div id="customArea3Container">
            <div id="highchartsContainer2"></div>
        </div>
    </div>
    <div id="customArea4">
        <div id="customArea4Container">
            <div id="highchartsContainer3"></div>
        </div>
    </div>
</div>

</div>

</body>
</html>