AngularJS 路由问题 ui-router答案

【问题标题】：AngularJS routing issue ui-routerAngularJS 路由问题 ui-router
【发布时间】：2021-02-28 00:40:32
【问题描述】：

我不知道是什么问题，我有一个 index.html 文件和一个 app.js 文件

Index.html 在锚标签内包含两个 ui-sref
app.js 作为状态提供者。请解决问题。感谢您抽出宝贵的时间

var app=angular.module('myApp',['ui.router']);
app.config(function($stateprovider){
    var home=
        {
            name:'home',
            url:'/home',
            template:"<h1>Home</h1>",
            controller: 'myCtrl'
        };
    var contacts=
        {
            name:'contacts',
            url:'/contacts',
            template:"<h1>Contacts</h1>",
            controller: 'myCtrl'
        };
        $stateprovider.state(home)
        $stateprovider.state(contacts)
});
app.controller("myCtrl",function($scope,$http){
})

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.js"></script>
    <script src="https://unpkg.com/angular-ui-router@0.4.2/release/angular-ui-router.js"></script>
    <script src="./app.js"></script>  
  </head>
  <body  >
      <div ng-controller="myCtrl">
        <ul>
          <li><a ui-sref="home">Home</a></li>
          <li><a ui-sref="contacts">Contacts</a></li>
        </ul>  
        <div>
          <div ui-view>
          </div>    
        </div>
      </div>
  </body>
</html>

【问题讨论】：

为什么 html 中有 2 个 ui-router 的 CDN？
以前，我只有一个CDN，只是为了检查，我又放了一个，但这仍然不能解决问题
尝试将 $stateprovider 更改为 $stateProvider。此外，详细的错误消息将帮助我们更多地调试问题

标签： angularjs angular-ui-router ui-sref

【解决方案1】：

如果你：

角路由器只保留一个脚本（1.0版本是最新的）
将$stateprovider 替换为$stateProvider

效果很好：

var app=angular.module('myApp',['ui.router']);
app.config(function($stateProvider){
    var home=
        {
            name:'home',
            url:'/home',
            template:"<h1>Home</h1>",
            controller: 'myCtrl'
        };
    var contacts=
        {
            name:'contacts',
            url:'/contacts',
            template:"<h1>Contacts</h1>",
            controller: 'myCtrl'
        };
        $stateProvider.state(home)
        $stateProvider.state(contacts)
});
app.controller("myCtrl",function($scope,$http){
})

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.js"></script>
   
    <script src="./app.js"></script>  
  </head>
  <body  >
      <div ng-controller="myCtrl">
        <ul>
          <li><a ui-sref="home">Home</a></li>
          <li><a ui-sref="contacts">Contacts</a></li>
        </ul>  
        <div>
          <div ui-view>
          </div>    
        </div>
      </div>
  </body>
</html>

【讨论】：