Question

我正在关注来自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.

Answer 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'
  });

}]);

修改

根据您的意见，您可能想要设置本地服务器。这是一个很好的答案：

How to create a localhost server to run an AngularJS project

引用＆＃34;如果您正在运行node.js，http-server非常简单。安装：npm install -g http-server。安装cd后进入项目文件夹并运行http-server -o。 -o是打开浏览器到页面。＆＃34;

Answer 2

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

Access-Control-Allow-Origin: *

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

angularui ui-router不渲染视图

2 个答案: