如何查看第Angular个模板？

Question

我正在尝试构建一个非常基本的 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 之类的东西。所以我的模板根本没有加载。有什么想法吗？

Answer 1

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

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

Answer 2

对于 UI-路由器，您应该使用 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>

如何查看第Angular个模板？

How to view first Angular template?

javascript

templates

url-routing

node.js

angularjs