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.

rethabile
  • 3,029
  • 6
  • 34
  • 68
  • Have you tried with $location.path("/stateName"); in $scope.ChangeState(). – N.Raval May 06 '16 at 09:35
  • The problem is I don't even get to test the `$scope.ChangeState()` because nothing get shown in `
    ` even though home url is specified as ' / '.     – rethabile May 06 '16 at 09:38
  • Have you tried moving the `angular-ui-router` script tag to the ``, 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. – Mourndark May 06 '16 at 09:42
  • Have you written .run(function($ionicPlatform) {} in app.js?? – N.Raval May 06 '16 at 09:45
  • @N.Raval Unless I'm missing something, the OP doesn't appear to be using any Ionic components? – Mourndark May 06 '16 at 09:48
  • @N.Raval I'm new to this angular, am following the tutorial in the link. I don't even know what Ionic components are. – rethabile May 06 '16 at 09:56

2 Answers2

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

Community
  • 1
  • 1
thepio
  • 6,193
  • 5
  • 35
  • 54
  • 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? – rethabile May 06 '16 at 10:34
  • 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. – thepio May 06 '16 at 10:39
  • @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. – Mourndark May 06 '16 at 10:49
  • 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: http://stackoverflow.com/questions/20041656/xmlhttprequest-cannot-load-file-cross-origin-requests-are-only-supported-for-ht Hopefully this is helpful to you. – thepio May 06 '16 at 10:52
  • I added an edit to my answer which I think will be great for you cause. – thepio May 06 '16 at 11:00
  • great. let me grab node.js and see how things turn out. :) – rethabile May 06 '16 at 11:13
  • I've picked an even super super easier route. Since I would like to add asp.net web api back-end later on, I've decided to work with visual studio community 2015 and IIS express. – rethabile May 06 '16 at 12:37
  • That's very good that you found a solution that works best for you :) – thepio May 06 '16 at 12:55
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).

Community
  • 1
  • 1
Mourndark
  • 2,526
  • 5
  • 28
  • 52