Home Ask Login Register

Developers Planet

Your answer is one click away!

Naresh Raj February 2016

$stateProvider not working and not displaying error in console

I am a beginner in Angular JS, recently tried $stateProvider refering a tutorials-eggHead. Find code from below:

I am not getting correct response.


<!DOCTYPE html>
<html ng-app="myApp">
        <title>Home Page</title>
        <h1>Hello World</h1>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
        <script src="js/app.js"></script>


    <input type="text" ng-model="first.message" />
    <h1>{{ first.message }} {{ "Naresh" }}</h1>


var app = angular.module( "myApp", ["ui.router"] );

app.config( function config($stateProvider){
    $stateProvider.state("index", {
        controller:"CtrlOne as first",

app.controller( "CtrlOne", function CtrlOne(){
    var first = this;
    first.message = "Hi";

Folder Structure Folder Structure Here

My Output with no error in console

Output That I am getting. No error in Console

Where did I go wrong. I followed exactly what was shown in the EggHead Tu


Omri Aharon February 2016

The code looks fine, so I'd say this is a CORS issue.

You are loading something that looks like a file:///C:/Users... URL.

That means it won't load other files - you should be seeing an error like this:

XMLHttpRequest cannot load file:///C:/Users/.... Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

This is what I see when loading your code:

enter image description here

I suggest you take a look here to figure out your issue.

If you get a local server up and running your code will work.

Post Status

Asked in February 2016
Viewed 3,079 times
Voted 13
Answered 1 times


Leave an answer

Quote of the day: live life