Question

所以我试图构建最简单的Angular JS应用程序，不知道我做错了什么。它由4个文件组成：

index.html - 我使用它来展示main.html
app1.js - 用于定义简单的路由规则，例如/ main应该与MainController一起重定向到main.html;如果找不到有效路径，则恢复为默认值，该默认值等于上一个路径
MainController.js - 我这里只有一些计时器功能
main.html - 显示搜索按钮和搜索文本框

出于某种原因，我无法从我的index.html看到mainvtemplate，它应该将我重定向到/ main。

以下是代码：

index.html文件

<!DOCTYPE html>
<html ng-app="githubViewer">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="angular-route@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="MainController.js"></script>
  </head>

    <body>
        <h1>Github Viewer</h1>
        <div ng-view></div>
    </body>


</html>

app1.js

(function(){

    var app = angular.module("githubViewer", ["ngRoute"]);

    app.config(function($routeProvider){
        $routeProvider
            .when("/main", {
                templateUrl: "main.html",
                controller: "MainController"
            })
            .otherwise({redirectTo:"/main"});
    });

}());

main.html文件：

<div>
    {{ countdown }}
    <form name="searchUser" ng-submit="search(username)">
        <input type="search" required="" ng-model="username" />
        <input type="submit" value="Search" />
    </form>
</div>

您可以忽略倒计时，这是在MainController.js中创建的计时器。我渲染它的简化逻辑：

(function() {

    var app = angular.module("githubViewer");

    var MainController = function($scope, $interval, $location) {

        $scope.search = function(username) {
           if(countdownInterval)    {
               $interval.cancel(countdownInterval);
               $scope.countdown = null;
           }
           $location.path("/user/" + username);
        };

        $scope.countdown = 5;
    };

    app.controller("MainController", MainController);

}());

不奇怪我无法看到搜索按钮和搜索文本框？也许我错过了......这里非常明显。

Answer 1

＆＃13;

in your index.html 
<script src="app.js"></script>

replace with
<script src="app1.js"></script>


main.html
<div ng-app="githubViewer" ng-controller="MainController ">// add ng app ang nd cntroller
    {{ countdown }}
    <form name="searchUser" ng-submit="search(username)">
        <input type="search" required="" ng-model="username" />
        <input type="submit" value="Search" />
    </form>
</div>

＆＃13;

我没有看到角度JS中的预期视图，也许是绑定问题？

1 个答案: