路由不在angular.js中工作 - 没有控制台或语法错误

时间:2016-01-29 15:15:42

标签: javascript angularjs module dependencies

我无法理解为什么路由不起作用。 我已多次检查语法错误或拼写错误,但似乎并非如此。我也检查了控制台,它什么也没有返回。似乎没有任何问题。



var app = angular.module("myApp", ['ngRoute']);

// Main Controller	
app.controller("controller", function($scope) {
  $scope.search = {};
});

// Routing
app.config(function($routeProvider) {
  console.log("working");
  $routeProvider.when('/', {
    controller: "controller",
    templateUrl: "templates/listings.html"
  }).when('/login', {
    controller: "controller",
    templateUrl: "templates/login.html"
  })
});

<html ng-app="myApp">

<head>
  <title>logo</title>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>


  <!-- ANGULAR FILES -->

  <!-- Angular.js -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>

  <!-- ngRoute Script -->
  <script type="text/javascript" src="js/angular-route.js"></script>

  <!-- Route -->
  <script type="text/javascript" src="routes/route.js"></script>

  <!-- Angular App  -->
  <script type="text/javascript" src="app.js"></script>

  <!-- Json Data -->
  <script type="text/javascript" src="data.js"></script>

  <!-- ======================================================================->


	<!-- Index CSS ( Mainly All The CSS) -->
  <link rel="stylesheet" type="text/css" href="css/style.css">

  <!-- Login CSS -->
  <link rel="stylesheet" type="text/css" href="css/login.css">




  <!-- Montserrat -->
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

  <!-- Open Sans -->
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

  <!-- neutron -->
  <link href='https://fonts.googleapis.com/css?family=Neuton' rel='stylesheet' type='text/css'>

  <!-- Lato -->
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>


</head>


<body ng-controller="controller">

  <div class="wrapper">

    <div ng-include="'includes/navbar.html'"></div>

    <!-- NG VIEW -->
    <div ng-view></div>

    <div class="footer">
      <!-- footer content goes here -->
    </div>

  </div>
</body>

</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您的代码似乎正确无误。目前您只是加载页面,而不对URL进行任何更改,因此角度路由器不会执行任何操作。

基本上,您需要通过.otherwise$routeProvider添加默认路由,/将重定向到$routeProvider.when('/', { controller: "controller", templateUrl: "templates/listings.html" }) .when('/login', { controller: "controller", templateUrl: "templates/login.html" }) .otherwise({ redirectTo: '/' }); 默认页面。

<div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
    </ul>
</div>
  
    

确保您拥有相同版本的angularjs&amp;角路径

  

Working Fiddle感谢@Denis创建小提琴。