javascript - Angular 用户界面路由器状态模板不起作用

标签 javascript angularjs templates angular-ui-router

我使用 ui-router 创建了一个基本的 Angular 应用程序。我正在使用脚本标签提供来自 index.html 的部分模板,但出现此错误

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:1337/home.html

这是我的代码。

var app = angular.module('smApp', ['ui.router'])
    .config(['$stateProvider', function ($stateProvider) {
        $stateProvider
            .state('home', {
                url: '',
                templateUrl: 'home.html',
                controller: 'homeCtrl'
            })
    }])
    .controller('homeCtrl', ['$scope', function ($scope) {
        $scope.home = 1;
    }]);

index.html

<script type="text/script" id="home.html">
    <div>Home Page {{home}}</div>
</script>
<body>
    <div ui-view></div>
</body>

最佳答案

您需要更改包含模板代码的脚本标记的类型属性。对于 Angular,为了识别模板,您需要将 type 属性从 'text/script' 更改为 'text/ng-template'

你的index.html应该是

<script type="text/ng-template" id="home.html">
    <div>Home Page {{home}}</div>
</script>
<div ui-view></div> 

关于javascript - Angular 用户界面路由器状态模板不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26567455/

相关文章:

javascript - 设置 ESLINT 忽略警告,如 "extra semicolon"

javascript - 列表的自定义过滤器

angularjs - 增加 ngif-tag 之外的范围?

Angularjs localStorage 在cordova 应用程序中存储设置

javascript - CKEditor 的动态模板

javascript - Alpha-Beta 国际象棋引擎搜索算法未做出正确的 Action

javascript - 如何使用 JavaScript 触发模态框?

c++ - 如何在 C++ 中将模板与枚举相结合?

Django 模板 : using forloop. 计数器作为列表的索引

javascript获取选定的文本而不是值