CODEWITHSUNDEEP
javascriptangularjs
Naresh Raj
Naresh Raj

Reputation: 307

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

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

Upvotes: 2

Views: 389

Answers (1)

Omri Aharon
Omri Aharon

Reputation: 17064

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.

Upvotes: 4

Related Questions