Question

编码和Angular的新手，所以我对基础知识的理解可能是错误的。

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

以下是我的JSLint错误：

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

4缺少'use strict'声明。 $ routeprovider。

25缺少'使用严格'声明。 $ scope.inputArry = []; 。更多'使用严格'的消息。

48不要在循环中创建函数 - ＆gt;将很快改变这一点。

的index.html

<!DOCTYPE html>
<html ng-app="myApp">
<body>

<script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
<link href="css/main.css" rel="stylesheet" />

<!--<script src="js/controllers/LoginController.js"></script>
<script src="js/controllers/MainController.js"></script> -->

<div class="header">
    <header>Nick's Test</header>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/contact">Contact</a>
    </nav>
</div>

<div ng-view>
    <!-- HELLO WORLD -->
</div>

</body>
</html>

homepage.html （显示输入文本框的文字的页面）

<div id="header">
    <h1>Home</h1>
</div>

<div id="section" style="overflow:auto">
    <ul class="normal">
    <li ng-repeat="inputs in inputArray track by $index"> {{inputs}}</li>
    </ul>
</div>

<div id="footer">
    <form ng-submit="addInput(stuffToShow)">
        Input:
        <br />
        <input type="text" ng-model="stuffToShow"/>
        <br />
        <button>Submit</button>
    </form>
    <button ng-click="clear()">Clear All</button>
</div>

app.js

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when('/login', {
            templateUrl: "partials/login.html",
            controller: "LoginController"
        })
        .when('/homepage', {
            templateUrl: "partials/homepage.html",
            controller: "MainController"
        })
        .when('/about', {
            templateUrl: "partials/about.html"
        })
        .when('/contact', {
            templateUrl: "partials/contact.html"
        })
        .otherwise({
            redirectTo: "partials/login.html"
        });
});

app.controller('MainController', function($scope) {
    $scope.inputArray = [];
    $scope.stuffToShow = "";

    $scope.addInput = function(x) {
        $scope.inputArray.push(x);
        $scope.stuffToShow ="";
    };

    $scope.clear = function() {
        $scope.inputArray = [];
    };
});

app.controller('LoginController', 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没有完成，里面的代码大多是乱码。

Answer 1

您的控制器应该是这样的

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 = [];
    };
}]);

loginController.js：

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： EDITED !!!

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

EDIT !!

homepage.html

<div id="section" style="overflow:auto">
<ul class="normal">
    <li ng-repeat="inputs in inputArray track by $index">{{inputs}}</li>
</ul>

<div id="footer">
<form>        
    <label>Input:</label>
    <input type="text" ng-model="stuffToShow"/>
    <br />
    <button ng-click="addInput()">Submit</button>                          
</form>
<button ng-click="clear()">Clear All</button>

最后修改你的app.js

var app = angular.module('myApp', ['ngRoute']);

app.config(function ($routeProvider) {
$routeProvider
        .when('/login', {
            templateUrl: "views/login.html",
            controller: "loginController" //change the name of the controller
        })
        .when('/homepage', {
            templateUrl: "views/homepage.html",
            controller: "mainController" //change the name of the 
        })
        .when('/about', {
            templateUrl: "views/about.html"
        })
        .when('/contact', {
            templateUrl: "views/contact.html"
        })
        .otherwise({
            redirectTo: "views/login.html"
        });

}）;

Answer 2

基本上你的脚本很好，你只需要改变一些小细节。

我做了一个小提示，显示你的代码正常工作，https://jsfiddle.net/j752hdnp/

您的<a>需要在网址的开头加#，例如<a href="#/">Home</a>

您的otherwise需要引用您的某个网址，而不是模板文件，因此请将其更改为

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

最后，如果您从CDN加载角度，您也可以从CDN加载ngRoute。

Answer 3

我已经找到解决问题的方法。事实证明，因为我没有在服务器上托管文件，Chrome给了我错误，特别是

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

和

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

我通过安装node.js并设置我自己的文件服务器来解决这个问题，瞧！模板加载没有问题。

AngularJS：无法识别我的控制器

3 个答案: