1

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.

Improve this question
6
  • Have you tried with $location.path("/stateName"); in $scope.ChangeState(). Commented May 6, 2016 at 9:35
  • The problem is I don't even get to test the $scope.ChangeState() because nothing get shown in <div ui-view></div> even though home url is specified as ' / '. Commented May 6, 2016 at 9:38
  • Have you tried moving the angular-ui-router script tag to the <head>, after the angular one? Depending on your browser it may not have loaded it before it loads the ui-view div and therefore won't know what to do with it. Commented May 6, 2016 at 9:42
  • Have you written .run(function($ionicPlatform) {} in app.js?? Commented May 6, 2016 at 9:45
  • @N.Raval Unless I'm missing something, the OP doesn't appear to be using any Ionic components? Commented May 6, 2016 at 9:48

2 Answers 2

Reset to default
3

Your routes.js is missing a closing bracket. It should be like this:

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

}]);

EDIT:

Upon your comments you may want to setup a local server. Here is a great SO answer to doing so:

How to create a localhost server to run an AngularJS project

Quote "if you're running node.js http-server is super easy. Install: npm install -g http-server. After installation cd into your project folder and run http-server -o. -o is to open browser to the page."

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

this didn't help. I think the problem is bigger than I can imagine now because even the Get Started example on ui-router github repo doesn't work. Could the problem be that I'm running the html files without a server of some sort?
Well, I tested your code by copying all the files to my own starter app and it showed me the home page correctly after that change mentioned in my answer. I don't know about your example code, but I would imagine the problem does not have anything to do with a server. Have you taken a look at the development console if it outputs any errors to you? And if it does can you add them to your question. This way we could get more information about the issue you are having.
@rm Yes, that is probably the reason. While the behaviour may be inconsistent across browsers, in my experience neither ui-router nor ngRoute behave reliably when they are not served properly.
Ok so you are opening your html straight from your directory to your browser I would imagine. I would suggest you read through the answer in this question on SO: stackoverflow.com/questions/20041656/… Hopefully this is helpful to you.
I added an edit to my answer which I think will be great for you cause.
|
1

Aside from the syntax errors mentioned by thepio, you will need to host your application in a web server rather than run the files from your disk. As you're using Chrome which has a strict Same-origin policy, you may also need to get your web server to add this header to its responses:

Access-Control-Allow-Origin: *

See this question for more on Cross-Origin Resource Sharing (CORS).

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.