href angularjs没有路由答案

【问题标题】：href angularjs not routinghref angularjs没有路由
【发布时间】：2016-09-27 00:46:30
【问题描述】：

我已经这样定义了我的 href 链接：

   <div id="left-menu">
      <div class="sub-left-menu scroll">
        <ul class="nav nav-list">
            <li><div class="left-bg"></div></li>
            <li class="time">
              <h1 class="animated fadeInLeft">21:00</h1>
              <p class="animated fadeInRight">Sat,October 1st 2029</p>
            </li>
            <li class="active ripple">
              <a href="#hosts">
                  <span class="fa-home fa"></span> Dashboard
              </a>
            </li>
            <li class="ripple">
                <a href="hosts/hosts.html">
                    <span class="fa fa-calendar-o"></span> Calendar
                </a>
            </li>
          </ul>
        </div>
    </div>

但是，当我单击 <a> 标记时，它似乎并没有拉回我的 hosts.html 文件中保存的内容。浏览器中的 url 也不会随着基本 url 的变化而改变 http://localhost/dashboard/#/main 当我单击主机时，所需的输出应该是 http://localhost/dashboard/#/hosts 并显示正确的内容。这是我正在使用的主题包http://akivaron.github.io/miminium/

这是我的 angularjs 文件，以应用本身“dashApp”开头

'use strict'

// Declare app level module which depends on views, and components
angular.module('dashApp', [
  'ngRoute',
  'dashApp.main',
  'dashApp.hosts'
])

.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider
    .otherwise({redirectTo: '/main'});
}]);

这是我的主要内容：

'use strict'

angular.module('dashApp.main', ['ngRoute'])

.config(['$routeProvider', function($routeProvider){
  $routeProvider.when('/main', {
    templateUrl: 'main/main.html',
    controller: 'mainController'
  })
}])

.controller('mainController', function($scope, $http, $window){

});

这是我的主机文件：

'use strict'

angular.module('dashApp.hosts', ['ngRoute'])

.config(['$routeProvider', function($routeProvider){
  $routeProvider.when('/hosts', {
    templateUrl: 'hosts/hosts.html',
    controller: 'hostsController'
  })
}])

.controller('hostsController', function($scope, $http, $window){
});

这是项目结构： https://gyazo.com/fb5e2a2651fe8cc460fde783237ddd9c

【问题讨论】：

标签： javascript angularjs html routing

【解决方案1】：

删除href中的/。他们需要匹配你的路由配置中的 url

例子

<a class="tree-toggle nav-header" href="#/main/" target="_self">

应该是

<a class="tree-toggle nav-header" href="#/main" >

【讨论】：

这似乎并没有解决问题，它仍然和我的帖子中提到的一样
您确定模板路径正确吗？添加路由更改错误处理程序并获取错误详细信息。您还在主页中添加了ng-view 吗？
我在哪里实现这个？在应用程序或主模块中？
这个答案应该可以解决您的问题。您在 hrefs 中的路线错误。
@charlietfl 错误处理程序，我的主页中确实有一个 ng-view

【解决方案2】：

我认为你应该删除哈希。

<a class="tree-toggle nav-header" href="/main">link</a>

【讨论】：

这也不起作用，我尝试将静态网址输入谷歌，但当我点击它时也不起作用
也许ng-href 应该有不同的输出。很抱歉，我现在不能尝试。
不，这也不起作用，当我点击链接时，它根本没有做任何事情。
你能不能试着用你的确切代码制作一个 jsfiddle、plunkr 或 codepen，这样更容易理解。
我不认为这是一个角度问题，我可以右键单击并在新选项卡中打开，这很有效。我想也许是一个CSS问题？我的链接顶部有什么东西阻止我点击它们？我正在使用主题包并尝试将其与 Angular 集成，我将使用当前 HTML 标记和我正在使用的主题包更新帖子

【解决方案3】：

“Href”链接应该在 ng-app 内，ng-view 也在应用内。如下图

<div ng-app="myApp" ng-controller="myController">
    <a href="#/home">home</a>
    <a href="#/book">books</a>
    <div ng-view></div>
</div>

首先检查上述内容，然后更新您的 js 文件，如下所示：-

var app=angular.module("myApp",['ngRoute']);
app.config('$routeProvider',function($routeProvider){
$routeProvider
   .when('/home',{
     templateUrl:'path/some.html'
    })
});

如有任何疑问，请随时询问。

【讨论】：