angularui ui-router 不渲染视图答案

【问题标题】：angularui ui-router not rendering the viewangularui ui-router 不渲染视图
【发布时间】：2016-05-06 18:58:50
【问题描述】：

我正在关注 here 的 angularui 教程。但是好像事情不配合，我只是得到一个空白的ui-view。

目录结构：

routes-app/
   index.html
   app.js
   routes.js
   home/
     home.html
     homeController.js
   github/
     github.html
     githubController.js
   gallery/
     gallery.html
     galleryController.js

文件：

<!--index.html-->
<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  </head>
  <body>
	<h1>UI Router Tut</h1>
	
    <div ui-view></div>	
	
	<!--{{2+3}}-->
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
	<script src="app.js"></script>
	<script src="routes.js"></script>
	<script src="home/homeController.js"></script>
	<script src="github/githubController.js"></script>
	<script src="gallery/galleryController.js"></script>
  </body>
</html>

//app.js
var myApp = angular.module('myApp',['ui.router']);

//routes.js
myApp.config(['$stateProvider', '$urlRouterProvider',

function($stateProvider,$urlRouterProvider)
{
	$urlRouterProvider.otherwise('/');
	
	$stateProvider
	
	.state('home', {
		url: '/',
		templateUrl: 'home/home.html',
		controller: 'homeCtrl'
	})
	.state('gallery', {
		url: '/gallery',
		templateUrl: 'gallery/gallery.html',
		controller: 'galleryCtrl'
	})
	.state('github', {
		url: '/github',
		templateUrl: 'github/github.html',
		controller: 'githubCtrl'
	});

]);

<!--home.html-->
<h2>Hello {{title}}</h2>

<button ng-click="ChangeState("github")">Go to github</button>
<button ui-sref="gallery">Check out gallery</button>

//homeController.js
myApp.controller('homeCtrl', ['$state', '$scope',

function ($state, $scope){
	$scope.title = "Homey";
	
	$scope.ChangeState = function (stateName){
		$state.go(stateName);
	};
}]
);

编辑：

控制台错误信息：

angular.js:11756 XMLHttpRequest cannot load file:///D:/.../Projects/angularapps/routes-app/home/home.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

【问题讨论】：

你试过 $location.path("/stateName");在 $scope.ChangeState() 中。
问题是我什至无法测试$scope.ChangeState()，因为即使主页网址指定为'/'，<div ui-view></div> 中也没有显示任何内容。
您是否尝试过将angular-ui-router 脚本标签移动到<head>，在angular 之后？根据您的浏览器，它可能在加载 ui-view div 之前尚未加载它，因此不知道如何处理它。
你在 app.js 中写过 .run(function($ionicPlatform) {} 吗？？
@N.Raval 除非我遗漏了什么，否则 OP 似乎没有使用任何 Ionic 组件？

标签： angularjs angular-ui-router

【解决方案1】：

您的 routes.js 缺少右括号。应该是这样的：

myApp.config(['$stateProvider', '$urlRouterProvider',

function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/');

$stateProvider

  .state('home', {
    url: '/',
    templateUrl: 'home/home.html',
    controller: 'homeCtrl'
  })
  .state('gallery', {
    url: '/gallery',
    templateUrl: 'gallery/gallery.html',
    controller: 'galleryCtrl'
  })
  .state('github', {
    url: '/github',
    templateUrl: 'github/github.html',
    controller: 'githubCtrl'
  });

}]);

编辑：

在您的 cmets 上，您可能需要设置一个本地服务器。这是一个很好的答案：

How to create a localhost server to run an AngularJS project

引用“如果你运行node.js http-server 超级简单。安装：npm install -g http-server。安装后cd 进入你的项目文件夹并运行http-server -o。-o 是打开浏览器到页面。”

【讨论】：

这没有帮助。我认为问题比我现在想象的要大，因为即使是 ui-router github repo 上的 Get Started 示例也不起作用。问题可能是我在没有某种服务器的情况下运行 html 文件吗？
好吧，我通过将所有文件复制到我自己的入门应用程序来测试您的代码，并在我的回答中提到的更改后正确地向我显示了主页。我不知道您的示例代码，但我想这个问题与服务器没有任何关系。如果它向您输出任何错误，您是否查看过开发控制台？如果确实如此，您可以将它们添加到您的问题中。这样我们就可以获取有关您遇到的问题的更多信息。
@rm 是的，这可能就是原因。虽然跨浏览器的行为可能不一致，但根据我的经验，ui-router 和 ngRoute 在服务不正确时都不会可靠地运行。
好吧，我想你是直接从你的目录打开你的 html 到你的浏览器。我建议你通读这个问题的答案：stackoverflow.com/questions/20041656/…希望这对你有帮助。
我在我的答案中添加了一个编辑，我认为这对你很有帮助。

【解决方案2】：

除了 thepio 提到的语法错误之外，您还需要将应用程序托管在 Web 服务器中，而不是从磁盘运行文件。由于您使用的是具有严格 Same-origin policy 的 Chrome，您可能还需要让您的网络服务器将此标头添加到其响应中：

Access-Control-Allow-Origin: *

有关跨域资源共享 (CORS) 的更多信息，请参阅 this question。

【讨论】：