Javascript 我的ui路由器链接不工作，angularJS_Javascript_Angularjs

Javascript 我的ui路由器链接不工作，angularJS

javascript angularjs

Javascript 我的ui路由器链接不工作，angularJS,javascript,angularjs,Javascript,Angularjs,这是我索引页面的代码，我添加了ui视图，我的应用程序文件名为“route app.js”，并使用了bower angular ui路由器 <!DOCTYPE html> <html lang="en" ng-app="router"> <head>   <script src="route

这是我索引页面的代码，我添加了ui视图，我的应用程序文件名为“route app.js”，并使用了bower angular ui路由器

   <!DOCTYPE html>

<html lang="en" ng-app="router">
  <head>
      <!-- JS dependencies -->
<!-- AngularJS library -->
          <script src="route-app.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
      <script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>

<!-- AngularJS UI-Router -->
<!-- Our application -->

      <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <h1></h1>
      <a href="#/"></a>

<div ui-view></div>


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

每次我点击链接都不会弹出。我做错了什么。

$StateProvider

应该是

$StateProvider

（第一个字母是小写）

请参阅此处的文档以获取参考：

同时打开开发控制台，可能会出现一些控制台错误，这些错误可能会帮助您找出问题所在

angular.module('router', ['ui.router'])
.config(['urlRouterProvider', '$stateProvider', function($urlRouterProvider, $StateProvider){
    $urlRouterProvider.otherwise('/');

    $StateProvider

        .state('home', {
        url: '/',
        templateUrl: 'home.html'
    });

}]);

问题是，您使用了数组表示法进行依赖项注入，但实际上没有注入任何内容。

好的，因此您有几个错误

首先，也是最重要的一点，是在包含angular脚本之前定义自定义脚本。因此，如果您查看控制台，您将看到“参考错误：角度未定义”错误

第二和第三，正如Alex和Vishal指出的，注射是错误的。以下是更新后的HTML（我从代码中删除了所有不必要的注释，以明确我在何处更改了任何内容。您当然可以将它们保留在页面中）：

建议使用浏览器控制台（按F12键）。它将为您提供脚本中发生的错误

注意：可以在angular库之前包含自定义脚本，但这是毫无意义的，需要额外的代码才能工作，所以不要这样做。

在脚本文件中，将TemplateURL属性的值从'home.html'更改为'/home.html'。你必须给出根目录。仅仅给出文件名是行不通的

angular.module('router', ['ui.router'])
.config([function($urlRouterProvider, $StateProvider){
    $urlRouterProvider.otherwise('/');

    $StateProvider

        .state('home', {
        url: '/',
        templateUrl: './home.html'
    })

}]);

首先，您应该使用

ui sref

属性，而不是普通的

href

属性来使ui路由器正常工作。其次，你的链接不应该包含标签。在这种情况下，它必须是“/”，而不是“#/”

您单击了什么链接？对不起，我的意思是我的href链接在使用ui路由器时不起作用。

<!DOCTYPE html>

<html lang="en" ng-app="router">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
    <script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>

    <!-- JS dependencies: MUST COME AFTER THE ANGULAR DEPENDENCIES -->
    <script src="route-app.js"></script>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Template</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
   <h1></h1>
   <a href="#/"></a>

   <div ui-view></div>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
  </body>
</html>

angular.module('router', ['ui.router'])
  .config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('home', {
        url: '/',
        templateUrl: 'home.html'
    });

  }]);

angular.module('router', ['ui.router'])
.config([function($urlRouterProvider, $StateProvider){
    $urlRouterProvider.otherwise('/');

    $StateProvider

        .state('home', {
        url: '/',
        templateUrl: './home.html'
    })

}]);