I'm following angularui tutorial from here. But it seems things aren't cooperating, I just get a blank ui-view.
directory structure:
routes-app/
index.html
app.js
routes.js
home/
home.html
homeController.js
github/
github.html
githubController.js
gallery/
gallery.html
galleryController.js
files:
<!--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);
};
}]
);Edit:
Console error message:
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.
