$stateProvider not working and not displaying error in console

Question

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

I am not getting correct response.

index.html

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <title>Home Page</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <ui-view></ui-view>
        <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>
    </body>
</html>

first.html

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

app.js

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

app.config( function config($stateProvider){
    $stateProvider.state("index", {
        url:"",
        controller:"CtrlOne as first",
        templateUrl:"template/first.html"
    })
});

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

Folder Structure

My Output with no error in console

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

Why ui-view is not showing up? NO Errors are being showed up for me to refer further.

Please any experts help me. Its really confusing if things are not working fine.

Thanks in advance.

No errors is shown.. If you can pls try out the same code and check the way I described above. It wil b really helpful. I am breaking my head. — Naresh Raj, Feb 08 '16 at 19:49
Maybe you need to change `url:"",` to `url:"/",` in your state definision? — Alon Eitan, Feb 08 '16 at 19:57
@AlonEitan no need of it. here is full proof [plunkr](http://plnkr.co/edit/qp0YJ3?p=preview) , he must have missed something else — Pankaj Parkar, Feb 08 '16 at 20:02

score 4 · Accepted Answer · edited May 23 '17 at 12:13

4

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:

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.

edited May 23 '17 at 12:13

Community

1
1

answered Feb 08 '16 at 20:05

Omri Aharon

16,959
5
40
58

1

You're correct! https://docs.angularjs.org/tutorial _While Angular applications are purely client-side code, and it is possible to open them in a web browser directly from the file system, it is better to serve them from a HTTP web server. In particular, for security reasons, most modern browsers will not allow JavaScript to make server requests if the page is loaded directly from the file system._ – Alon Eitan Feb 08 '16 at 20:11
@AlonEitan Good find! – Omri Aharon Feb 08 '16 at 20:12
1

Yep. This is correct. got the code running with a node.js server. But the error you specified would be shown only if you add the js code in a script tag in index.html. Thats why he gets no errors – Nijeesh Feb 08 '16 at 20:12
@Nijeesh You're spot on. – Omri Aharon Feb 08 '16 at 20:13
@Nijeesh Changed to a JS file and tried loading that like the OP did, still getting the error for some reason. When thinking about it, loading the `app.js` file also qualifies for the CORS issue, does it not? – Omri Aharon Feb 08 '16 at 20:16
thats a great suggestion. I will follow as you said. Will host these files in an webserver and will update my answer on this. THanks for the tip. I was worried cause my console didnt show up any error. Also as you pointed, mistake i did was trying to open html file directly clicking the .html from file system. – Naresh Raj Feb 08 '16 at 20:17
@OmriAharon This is a relative link, so it probably use the same url schema (i.e `file://`) – Alon Eitan Feb 08 '16 at 20:17
@AlonEitan But so is `first.html` which caused the original error. – Omri Aharon Feb 08 '16 at 20:19
@OmriAharon - Yup, so perhaps a `` tag will be helpful for this – Alon Eitan Feb 08 '16 at 20:20
@Omri Aharon U saved my day.. Your pointed out correct. But I am not sure why the error was not shown in the console when i run the above code through filesystem. – Naresh Raj Feb 09 '16 at 09:26
@NareshRaj Not sure either.. at first I was not seeing it either, only after I reopened the browser I think. – Omri Aharon Feb 09 '16 at 09:27

$stateProvider not working and not displaying error in console

1 Answers1