如何查看第一个Angular模板?

我正在尝试构build一个非常基础的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下的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/ 。 不幸的是,屏幕仍然是白色的。 它确实从服务器加载(我看到它向terminal中的节点发出请求),但在浏览器中什么也看不到。 我尝试过各种url,比如:

 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/#/ 

但没有任何工作。

有没有人知道我如何查看我创build的第一个模板? 所有的提示,欢迎!

[编辑]控制台没有错误,当我查看页面的来源,我看到我的HTML。 我只是没有看到像是我在main.html中定义的Yes yes people什么东西。 所以我的模板是根本不加载。 任何想法?

       

网上收集的解决方案 "如何查看第一个Angular模板?"

对于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> 

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

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