Question

我是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";
});

文件夹结构

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

我哪里出错了。我完全遵循EggHead Tutorial

中显示的内容

为什么ui-view没有出现？没有错误出现让我进一步参考。

请任何专家帮助我。如果事情不顺利，那真是令人困惑。

提前致谢。

Answer 1

代码看起来很好，所以我说这是一个CORS问题。

您正在加载看似file:///C:/Users...网址的内容。

这意味着它不会加载其他文件 - 你应该看到这样的错误：

XMLHttpRequest无法加载file：/// C：/ Users / ....交叉原始请求只支持协议方案：http，data，chrome， chrome-extension，https，chrome-extension-resource。

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

我建议你看看here来找出你的问题。

如果您启动并运行本地服务器，您的代码将起作用。

$ stateProvider不工作，不在控制台中显示错误

1 个答案: