角度（离子）状态提供程序模板Url 中断答案

【问题标题】：Angular (ionic) stateprovider templateUrl breaking角度（离子）状态提供程序模板Url 中断
【发布时间】：2023-03-30 16:57:01
【问题描述】：

这是一个奇怪的，我只是要放弃它。我正在 Ionic 中制作一个应用程序，它允许我添加状态就好了，就像这样：

 $stateProvider
        .state('menu', {
            url: "/menu",
            templateUrl: "templates/menu.html",
            controller: "mainCtrl"
        })
        .state('products', {
            url: "/products",
            templateUrl: "templates/products.html",
            controller: "productsCtrl"
        })

等等。我在那里有几个州，几天前一切正常。我今天回到项目并添加了一个新状态 - 它中断了。我添加新状态的方式与旧状态完全相同 - 当我看到它不起作用时甚至复制粘贴。
发生的情况是浏览器开始一遍又一遍地请求默认值（每秒多次）并且没有加载任何模板。

现在是奇怪的部分。这是我的新状态：

.state('settings',{
            url: "/settings",
            templateUrl: "templates/settings.html",
            controller: "settingsCtrl"
        })

但是当我将 templateUrl 更改为 template 并直接插入模板文件的全部内容时 - 它工作得很好。

该模板文件与其他可以正常工作且不会破坏应用程序的模板文件位于完全相同的位置。

更新：如果我将templateUrl 设为一个返回文件绝对路径的函数（尽管不像其他文件那样是相对路径），它也可以工作。也许这是一个缓存问题？

也许我还需要做其他事情？我是 Ionic 和 Angular 的新手。

更新这是我的整个 app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
  // org.apache.cordova.statusbar required
  StatusBar.styleDefault();
   }
});
})

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });

    $stateProvider
        .state('menu', {
            url: "/menu",
            templateUrl: "templates/menu.html",
            controller: "mainCtrl"
        })
        .state('products', {
            url: "/products",
            templateUrl: "templates/products.html",
            controller: "productsCtrl"
        })
        .state('settings',{
            url: "/settings",
            templateUrl: function (){return "myproject/www/templates/settings.html"},
            controller: "settingsCtrl"
        })
        .state('leads', {
            abstract: true,
            url: "/leads",
            template: '<ion-nav-view></ion-nav-view>'
        })
        .state('leads.index', {
            url : "",
            templateUrl: "templates/leads.html",
            controller: "leadsCtrl"
        })
        .state('leads.detail', {
            url: '/{lead_id}',
            templateUrl: "templates/lead.html",
            controller: "leadCtrl",
            resolve:
            {
                lead_id: function ($stateParams) {
                    return $stateParams.lead_id}
            }
        })
    $urlRouterProvider.otherwise('/menu');
});

【问题讨论】：

显示整个 .config 函数
和你的目录文件/结构（tree 命令）

标签： angularjs angular-ui-router ionic

【解决方案1】：

为 $stateChangeError、$stateChangeStart 和 $stateChangeSuccess 添加一个侦听器并登录到控制台 - 您会突然准确地看到您的应用程序中发生了什么。之后应该很容易修复。

查看示例：angularjs routes, how to check if template file exists

【讨论】：

【解决方案2】：

很难说，你的问题在哪里。所以我created working plunker，设置如下。请观察它并与您的本地版本进行比较。它可以帮助您揭示问题

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false,
});

$stateProvider
    .state('menu', {
        url: "/menu",
        templateUrl: "templates/menu.html",
        controller: "mainCtrl",
    })
    .state('products', {
        url: "/products",
        views : {
          "products" : {
            templateUrl: "templates/products.html",
            controller: "productsCtrl"
          }
        }
    })
    .state('settings',{
        url: "/settings",
        //templateUrl: function (){return "myproject/www/templates/settings.html"},
        views : {
          "settings" : {
            templateUrl: "templates/settings.html", 
            controller: "settingsCtrl"
          }
        }
    })

这是 index.html

<body ng-app="starter" animation="slide-left-right-ios7">    

    <ion-tabs class="tabs-icon-top">

      <ion-tab title="Menu" icon="icon ion-home" href="menu">
        <ion-nav-view name=""></ion-nav-view>
      </ion-tab>

      <ion-tab title="Products" icon="icon ion-person" href="/products">
        <ion-nav-view name="products"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Settings" icon="icon ion-settings" href="/settings">
        <ion-nav-view name="settings"></ion-nav-view>
      </ion-tab>

    </ion-tabs>

</body>

在行动中检查它here

【讨论】：