CODEWITHSUNDEEP
angularjsangular-ui-router
rethabile
rethabile

Reputation: 3199

angularui ui-router not rendering the view

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.

Upvotes: 1

Views: 258

Answers (2)

thepio
thepio

Reputation: 6253

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."

Upvotes: 3

MorayM
MorayM

Reputation: 2687

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).

Upvotes: 1

Related Questions