如何查看第一个 Angular 模板？答案

【问题标题】：How to view first Angular template?如何查看第一个 Angular 模板？
【发布时间】：2015-07-29 09:44:45
【问题描述】：

我正在尝试构建一个非常基本的 Angular 应用程序，但在查看第一个模板时遇到了问题。我的 html 看起来像这样：

<html ng-app="formApp">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>

和我的app.js 是这样的：

'use strict';
var formApp = angular.module('formApp', ['ui.router']);
formApp.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('main', {
            url: '/main',
            templateUrl: 'templates/main.html',
            controller: 'MainCtrl'
        });
    $urlRouterProvider.otherwise('/main')
});

和我的controllers.js 是这样的：

var formControllers = angular.module('formControllers', []);
formControllers.controller('MainCtrl', function($scope){
    $scope.lala = 'lalallala';
});

templates/main.html 名下的模板如下所示：

<h1>Yes yes people</h1>
{{lala}}

所以我使用命令http-server -a 0.0.0.0 -p 8000 启动node，然后在浏览器中访问http://0.0.0.0:8000/。不幸的是，屏幕仍然是白色的。它确实从服务器加载（我看到它向终端中的节点发出请求），但我在浏览器中什么也看不到。我尝试了各种网址，例如：

http://0.0.0.0:8000/
http://0.0.0.0:8000/#
http://0.0.0.0:8000/#/main
http://0.0.0.0:8000/app
http://0.0.0.0:8000/app/#/

但没有任何效果。

有人知道如何查看我创建的第一个模板吗？欢迎所有提示！

[编辑] 控制台没有给出任何错误，当我查看页面的源代码时，我确实看到了我的 html。我只是没有看到我在 main.html 中定义的 Yes yes people 之类的东西。所以我的模板根本没有加载。有什么想法吗？

【问题讨论】：

首先包含 app.js
检查控制台是否有错误
我不确定。你能试试这样吗：//0.0.0.0:8000/{你的文件夹名称}/app/main
重新排列js文件后尝试使用//0.0.0.0:8000/{your folder name}/index.html
@soosmca - 但是 app.js 不依赖于 controllers.js，因为（根据 dfsq 的回答）我需要提供 formControllers 作为 formApp 的依赖项？

标签： javascript angularjs node.js templates url-routing

【解决方案1】：

对于 UI-Router，您应该使用 ui-view 指令而不是 ng-view。所以你的 html 应该是这样的：

<html ng-app="formApp">
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body>
        <div ui-view></div>
    </body>
</html>

【讨论】：

太棒了，就是这样！谢谢！

【解决方案2】：

由于您在单独的 formControllers 模块中定义了控制器，因此您需要将其作为对主应用程序模块的依赖项提供：

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

【讨论】：

好的，有道理。不幸的是，我仍然看到白屏。知道还有什么问题吗？
还有，我应该使用哪个网址？
模板路径应该是相对于应用基本路径的。还要确保你使用ui-view，作为 Nilesh 在 cmets 中的指针。