javascript - $stateProvider 不工作并且不在控制台中显示错误

标签 javascript angularjs

我是 Angular JS 的初学者,最近尝试了 $stateProvider 引用教程-eggHead。从下面找到代码:

我没有得到正确的回应。

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 Here

我的输出在控制台中没有错误

Output That I am getting. No error in Console

我哪里出错了。我完全按照 EggHead Tutorial 中显示的内容进行操作。

为什么 ui-view 不显示?没有显示任何错误供我进一步引用。

请各位专家帮帮我。如果事情运行不正常,那真的很令人困惑。

提前致谢。

最佳答案

代码看起来不错,所以我认为这是一个 CORS 问题。

您正在加载类似于 file:///C:/Users... URL 的内容。

这意味着它不会加载其他文件 - 您应该看到如下错误:

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

这是我在加载代码时看到的内容:

enter image description here

建议你看看here找出您的问题。

如果您启动了本地服务器并运行您的代码就可以工作。

关于javascript - $stateProvider 不工作并且不在控制台中显示错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35277625/

相关文章:

javascript - 如何在像 facebook 一样加载时创建占位符

twitter-bootstrap - Angular 与 Bootstrap 弹出窗口。如何在生成的弹出框主体中应用绑定(bind)?

javascript - 路由器中的 Angular 多重解析

javascript - RxJS:我应该如何通过socket.js事件更新observable中的元素?

javascript - 里面的 HTML 表格只提供单个数据而不是完整数据

javascript - Node js服务器。 http状态 - 404

javascript - 将对象从 Angularjs 传递到 MVC Controller 并映射到类对象

javascript - 在 webpack 的 require 中强制重新缓存 JSON 文件

javascript - 调试麻烦

javascript - 重新加载 angularjs 中的选项卡