Angular ui ui-sref 链接不可点击答案

【问题标题】：Angular ui ui-sref links are not clickableAngular ui ui-sref 链接不可点击
【发布时间】：2018-02-22 12:14:43
【问题描述】：

我正在练习角度 ui 路由，所以我写了这个简单的应用程序，但页面上的 ui-sref 链接不可点击！。

我知道有人问过这个问题here，但我的问题不同（我检查了我的链接）。

html页面

<html>

<body ng-app="myApp">
<a ui-sref="home"> home </a>
<div class="container" style="margin-top: 53px">
    <ui-view ="home"> </ui-view>
</div>
</body>
</html>

脚本

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 
    <script src=“http://unpkg.com/@uirouter/angularjs@latest/release/angular-ui-router.min.js”></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script>
    myApp = angular.module("myApp",['ui.router'])
        .config(function ($stateProvider,$urlRouterProvider) {
            $stateProvider
            .state("home",
            {
                url:"/home",
                views:{
                    'home':{template:"home.html"}
                } 
            })

            .state('otherwise'),
            {
                template:"page not availabe "
            });
        });
</script>

css 引导

【问题讨论】：

你已经用 '' 关闭了 ''
我纠正了自己，但它不起作用

标签： angularjs angular-ui-router

【解决方案1】：

<script>
    myApp = angular.module("myApp",['ui.router'])
        .config(function ($stateProvider,$urlRouterProvider) {
            $stateProvider
            .state("home",
            {
                url:"/home",
                views:{
                    'home':{template:"home.html"}
                } 
            })

            .state('otherwise'),
            {
                template:"page not availabe "
            });
        });
</script>

尝试如上所述创建模块和配置。可能有帮助！

【讨论】：

无法实例化模块 myApp 由于：错误：[$injector:nomod] errors.angularjs.org/1.6.4/$injector/nomod?p0=myApp
您的 ui-router 脚本似乎没有正确加载。确保它加载。然后代码似乎没有问题。

【解决方案2】：

ui-router 指令的工作方式如下：

查看

<div ui-view="home"></div>

默认

<ui-view></ui-view>

您的代码很好，但首先检查您的脚本网址，确保它有效，然后在线测试。

您的 ui 路由器脚本已经像 “http://unpkg.com/@uirouter/angularjs@latest/release/angular-ui-router.min.js” 这样粘贴，从您的网址的第一个和最后一个删除 “url” 并将其替换为 "url"。

将angular.js 和ui-rourer 文件替换为该示例的脚本

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

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state("home", {
    url: "/home",
    views: {
      'home': {
        template: "home.html"
      }
    }
  });

  $urlRouterProvider.otherwise("/home");

});

<script src="http://localhost:50299/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="http://localhost:50299/bower_components/angular/angular.min.js"></script>

<div ng-app="app">

  <a ui-sref="home"> home </a>
  <hr />
  <div>
    <div ui-view="home"></div>
  </div>

  <script type="text/ng-template" id="home.html">
    <h1>Home</h1>
  </script>

</div>

【讨论】：

我试过你的代码，它甚至没有将主页显示为超链接fiddle.jshell.net/2dqpqub9/2
我检查了脚本的链接但同样的控制台错误
未能实例化模块应用程序，原因是：错误：[$injector:nomod] errors.angularjs.org/1.4.8/$injector/nomod?p0=app at