使用AngularJS时如何注入模板？答案

【问题标题】：How to inject templates when using AngularJS?使用AngularJS时如何注入模板？
【发布时间】：2015-04-28 09:12:06
【问题描述】：

按照本教程： https://scotch.io/tutorials/angular-routing-using-ui-router

我有三个文件：

index.html

<!DOCTYPE html>
<html>
<head>

    <!-- CSS (load bootstrap) -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <style>
        .navbar { border-radius:0; }
    </style>

    <!-- JS (load angular, ui-router, and our custom js file) -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</head>

<!-- apply our angular app to our site -->
<body ng-app="routerApp">

<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
    </div>
    <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="about">About</a></li>
    </ul>
</nav>

<!-- MAIN CONTENT -->
<div class="container">

    <!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
    <div ui-view></div>

</div>

</body>
</html>

app.js

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

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        // HOME STATES AND NESTED VIEWS ========================================
        .state('home', {
            url: '/home',
            templateUrl: 'partial-home.html'
        })

        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
            // we'll get to this in a bit       
        });

});

部分主页.html

<div class="jumbotron text-center">
    <h1>The Homey Page</h1>
    <p>This page demonstrates <span class="text-danger">nested</span> views.</p>    
</div>

根据教程，这应该呈现以下内容：

但我只得到标题，部分主页模板从未注入。

我哪里出错了？教程发布后有什么变化吗？

【问题讨论】：

你有没有在控制台检查任何 JS 错误？
您的文件夹结构是什么样的？ templateUrl 属性是相对于 app.js
试试templateUrl: '/partial-home.html'。 templateUrl 路径将从应用程序的根目录开始。仔细检查partial-home.html 的位置是否正确。

标签： javascript angularjs angular-ui-router

【解决方案1】：

我做了一个plunkr，它工作正常。

<head>

    <!-- CSS (load bootstrap) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <style>
        .navbar { border-radius:0; }
    </style>

    <!-- JS (load angular, ui-router, and our custom js file) -->
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</head>

只需检查文件和路径。

【讨论】：

【解决方案2】：

哎呀...

原来我没有从网络服务器运行我的应用程序。我刚刚在浏览器中打开了文件，这就是它不起作用的原因。

应用在服务器上运行时一切正常 =)

【讨论】：