Javascript 链接不能与angular ui路由器一起使用_Javascript_Angularjs

Javascript 链接不能与angular ui路由器一起使用

javascript angularjs

Javascript 链接不能与angular ui路由器一起使用,javascript,angularjs,Javascript,Angularjs,所以我已经设置了ui路由器，几分钟前我让它工作了，它可以显示从另一个html文件加载的内容的模板，但是没有一个链接可以工作。现在什么都不起作用了：模板显示了，但内容没有拉入，链接也没有起作用 Ctrl.js var site = angular.module('site', ['ui.router']); site.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('page'

所以我已经设置了ui路由器，几分钟前我让它工作了，它可以显示从另一个html文件加载的内容的模板，但是没有一个链接可以工作。现在什么都不起作用了：模板显示了，但内容没有拉入，链接也没有起作用

Ctrl.js

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

site.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('page', {
      url: '/page',
      templateUrl: 'page.html',
    })
    .state('about', {
      url: '/about',
      templateUrl: 'about.html',
    });
    $urlRouterProvider.otherwise('/page');
  })

<li><a ui-sref="about">about</a></li>

Index.html

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script src="scripts/ctrl.js"></script>
    <link rel="stylesheet" href="style/main.css">
  </head>
  <body ng-app="site">

    <nav class="navbar  navbar-default navbar-fixed-top" id="navigate">
      <div class="container">

      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navSmall">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
            </div>
            <div class="collapse navbar-collapse" id="navSmall">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#/about.html">about</a></li>
              </ul>
            </div>


     </div>
    </nav>

  <div class="jumbotron text-center container-fluid">
    <div ui-view></div>


  </div>


<footer class="footer">
<div id="note" class="container">
  <div class="row">
    <div class="col-sm-8">
     -----Footer Content-----
    </div>
    <div class="col-sm-4">
    </div>
  </div>
</div>
</footer>

  </body>
  </html>

您的州URL是

/about

，而不是

/about.html

在任何情况下，使用，这就是它的用途

<a ui-sref="about">about</a>

用于您的本地开发
看一下（甚至只是克隆作为基础）。它为首次角度开发提供了一个很好的起点。
试试这个，只要确保test.html就可以了
<!DOCTYPE html>
    <html lang="en">
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
            <script>
                var module = angular.module("sampleApp", ['ngRoute']);

                module.config(['$routeProvider',
                function($routeProvider) {
                    $routeProvider.
                        when('/route1', {
                            controller: 'myCtrl',
                            templateUrl: 'test.html'
                        }).
                        otherwise({
                            redirectTo: '/'
                        });
                }]);

              module.controller("MainController", function($scope) {

        });

        module.controller("myCtrl", function($scope) {
            $scope.my = 10;
            ab = function() {
                alert($scope.my);
            }
        });
            </script>
        </head>
        <body ng-app="sampleApp">
          <div ng-controller="MainController"> 
               <a href="#/route1" role="button">Route</a> 
                <ng-view>

                </ng-view> 
            </div> 
        </body>
    </html>


var module=angular.module（“sampleApp”，['ngRoute']）；
module.config（['$routeProvider'，
函数（$routeProvider）{
$routeProvider。
当（“/route1”{
控制器：“myCtrl”，
templateUrl:'test.html'
}).
否则({
重定向到：'/'
});
}]);
模块控制器（“主控制器”，功能（$scope）{
});
模块控制器（“myCtrl”，函数（$scope）{
$scope.my=10；
ab=函数（）{
警报（$scope.my）；
}
});
您将状态URL搞错了
您的代码

您可以通过浏览器中的URL访问状态，但引用应用程序的其他部分是一种不良做法，尽管它仍然有效

这样做
var site = angular.module('site', ['ui.router']);

site.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('page', {
      url: '/page',
      templateUrl: 'page.html',
    })
    .state('about', {
      url: '/about',
      templateUrl: 'about.html',
    });
    $urlRouterProvider.otherwise('/page');
  })

<li><a ui-sref="about">about</a></li>

关于
有关您需要使用的工作链接
    <a href="#/about">about</a> 



而不是
    <a href="#/about.html">about</a>. 

。

同样，对于数据绑定之类的内容，您需要使用controller。
您的状态URL错误，是/about not/about.html
试试这个
<li><a ui-sref="about">about</a></li>

关于
@Phil:但如果它自然可以是相同的呢？是的，我已经编辑了它，因为Tventina在路由中使用了状态概念；）这似乎是解决方案的一部分，但它仍然没有传递来自其他模板的任何内容。@Tvantina:我已经更新了我的答案，请尝试演示givenHey Jingar，这个演示看起来不错，但似乎有所不同，因为我相信它使用的是Angular的内置ngRoute vs ui路由器。我从未使用过ngRoute，您建议我使用它吗？它与index.html
位于同一目录下？另外，您在about.html
中有ui view=“about”
，这将是您在子状态的命名视图中使用的东西，但您似乎没有这些。你确定那是命中注定的吗？最后，切换到未缩小版本的angular.js
，以便在您仍在开发时获得更好的错误消息您是否碰巧通过文件：//
协议加载了应用程序，例如file:///some/path/to/index.html
？如果您在父级
中加载它，about.html中是否还需要
？对于给定的导航/路由器设置，这可能不是必需的。嘿，Phill，这似乎确实是问题所在。然而，我最近开发了一个带有ui路由器的两页小应用程序，在Chrome或Firefox中都没有问题，所以我对此感到困惑。我添加了整个文件路径，看起来很有效。@tfantina你在那个应用程序中使用的是templateUrl
？也许您已经将浏览器设置为允许本地AJAX请求，或者您正在内联提供模板，例如…