如何查看第一个 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-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>

如何查看第一个 Angular 模板？

问题描述

2 个解决方案

解决方案1
1 2015-07-29 09:54:53

解决方案2
1 已采纳 2015-07-29 11:14:14

如何查看第一个 Angular 模板？

问题描述

2 个解决方案

解决方案1 1 2015-07-29 09:54:53

解决方案2 1 已采纳 2015-07-29 11:14:14

解决方案1
1 2015-07-29 09:54:53

解决方案2
1 已采纳 2015-07-29 11:14:14