Fatal编程技术网
  • javascript/
  • Javascript AngularJS:Can'；我认不出我的控制器

Javascript AngularJS:Can'；我认不出我的控制器

javascript html angularjs

Javascript AngularJS:Can'；我认不出我的控制器,javascript,html,angularjs,Javascript,Html,Angularjs,由于不熟悉编码和角度，因此我对基础知识的理解可能有问题 起初我的应用程序还不错，但当我尝试在其中构建路由时，我遇到了一些错误。我觉得一开始我太雄心勃勃了，试图为我还没有构建的功能创建单独的控制器文件（新手错误）。现在，我似乎无法获得一个基本页面（homepage.html）来显示输入到文本框中的内容。它只显示{{inputs}}，我相信这意味着它没有连接到控制器。我认为这也是因为我的CSS没有加载（指向CSS的链接在index.html中） 以下是我的JSLint错误： 在定义“var app=

由于不熟悉编码和角度，因此我对基础知识的理解可能有问题

起初我的应用程序还不错，但当我尝试在其中构建路由时，我遇到了一些错误。我觉得一开始我太雄心勃勃了，试图为我还没有构建的功能创建单独的控制器文件（新手错误）。现在，我似乎无法获得一个基本页面（homepage.html）来显示输入到文本框中的内容。它只显示{{inputs}}，我相信这意味着它没有连接到控制器。我认为这也是因为我的CSS没有加载（指向CSS的链接在index.html中）

以下是我的JSLint错误：

在定义“var app=angular.module（'myApp'，['ngRoute']）之前使用了1'angular

4缺少“严格使用”声明$路由提供者

25缺少“严格使用”声明$scope.inputArry=[]； . 更多的“使用严格”信息

48不要在循环中生成函数-->很快就会改变这一点

index.html


尼克试验
您的控制器应该是这样的

mainController.js：

app.controller('mainController', ['$scope', function ($scope) {

    $scope.inputArray = [];
    $scope.stuffToShow = "";

    $scope.addInput = function () {
        $scope.inputArray.push($scope.stuffToShow);
        $scope.stuffToShow = "";
    };

    $scope.clear = function () {
        $scope.inputArray = [];
    };
}]);

app.controller('loginController', ['$scope', function ($scope) {
    $scope.userName = "Nick";
    $scope.password = "123456";
    $scope.verification = true;

    do {
        $scope.userNameCheck = function (name) {
            if (name !== $scope.userName)
                $scope.verification = false;
        };
        $scope.passwordCheck = function (pass) {
            if (pass !== $scope.password)
                $scope.verification = false;
        };
    } while (!$scope.verification);
}]);
loginController.js：

app.controller('mainController', ['$scope', function ($scope) {

    $scope.inputArray = [];
    $scope.stuffToShow = "";

    $scope.addInput = function () {
        $scope.inputArray.push($scope.stuffToShow);
        $scope.stuffToShow = "";
    };

    $scope.clear = function () {
        $scope.inputArray = [];
    };
}]);

app.controller('loginController', ['$scope', function ($scope) {
    $scope.userName = "Nick";
    $scope.password = "123456";
    $scope.verification = true;

    do {
        $scope.userNameCheck = function (name) {
            if (name !== $scope.userName)
                $scope.verification = false;
        };
        $scope.passwordCheck = function (pass) {
            if (pass !== $scope.password)
                $scope.verification = false;
        };
    } while (!$scope.verification);
}]);
index.html： 编辑

<html ng-app="myApp">
<head>
    <title>My app</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/main.css" rel="stylesheet" />
</head>
<body>
    <nav>
        <!--ADD # FOR ng-route -->
        <a href="#/">Home</a>
        <a href="#/about">About</a>
        <a href="#/contact">Contact</a>
        <a href="#/homepage">Homepage</a>
    </nav>
    <div ng-view>
        <!--HELLO WORD! -->
    </div>
    <!--YOUR JS FILES -->
    <script src="js/angular.min.js" type="text/javascript"></script> <!--I RECOMMEND YOU DOWNLOAD IT -->
    <script src="js/angular-route.min.js" type="text/javascript"></script>
    <script src="js/app.js" type="text/javascript"></script>
    <script src="js/loginController.js" type="text/javascript"></script>
    <script src="js/mainController.js" type="text/javascript"></script>
</body>
}))

基本上，您的脚本很好，您只需要更改几个小细节

我做了一个小提琴，显示你的代码工作

您的

另外，您的
需要引用一个URL，而不是模板文件，因此将其更改为


.otherwise({
    redirectTo: "/login"
});



最后一件事，如果您从CDN加载，那么您也可以从CDN加载ngRoute。
我已经找到了解决问题的方法。事实证明，因为我没有在服务器上托管文件，Chrome给了我错误，尤其是


XMLHttpRequest cannot load file:///C:/Users/**/partials/homepage.html.


及


我通过安装node.js并设置自己的文件服务器修复了这个问题，瞧！加载模板时没有问题。
它只显示{{inputs}
：打开js控制台，阅读angularjs告诉您的内容。你可以点击一个链接来获取详细信息。啊，是的，我忘了提到JSLint给我的错误。它说：“angular在被定义之前就被使用了。var app=angular.module（'myApp'，['ngRoute']）；“我第一次制作这个应用程序时出现了这个错误，并通过将CDN脚本放在我的app.js脚本之上修复了它。但现在我似乎无法找出错误发生的原因。我已经移动了所有脚本的顺序，但没有用。您也可以键入
“使用strict”
位于所有JS文件的顶部，以便在控制台日志中获得更详细的信息，并使用更准确的错误/警告检查器验证JS代码。它还将删除有关“使用严格”问题的错误/警告。添加了角度文件并更改了控制器参数的结构，但错误仍然相同。我编辑了我的答案，请查看是否适合您index.html页面从未出现过任何问题。相反，我试图修复的是homepage.html。如果加载它，可以看到它显示{{inputs}}，而不是提交到文本框中的内容。但是，我添加了
#
并更改了
，否则


XMLHttpRequest cannot load file:///C:/Users/**/partials/homepage.html.



Error: [$compile:tpload] Failed to load template: partials/homepage.html (HTTP status: -1 )