Question

我正在尝试使用AngularJS构建一个小型网络应用程序。我在 root 目录中有 index.html ，在 html 子目录中有3个其他html页面

login.html
list.html
detail.html
1. 第一次， index.html 必须加载 login.html 。在此页面有3个输入用于在另一个验证系统中发送数据登录。登录后确定：

现在，我的index.html没有显示login.html代码！

有代码

HTML部分

的index.html

<!DOCTYPE html>
<html  >
    <head lang="en">
        <meta charset="UTF-8">
        <title>CV Alibo - Tab</title>
        <link rel="stylesheet" href="./css/style.css"/>
        <script src="./lib/angular.js"></script><!-- angular-min.js , version stable by angularJS.org -->
        <script src="./lib/angular-route.js"></script>
        <script src="./js/cvAliboApp.js"></script>
        <script src="./js/cvAliboController.js"></script>
    </head>
    <body ng-app="cvAliboApp">
        <div>
            <h1>Test JS</h1>
            <p>Between two rows, you can see more page</p>
        </div>
        <hr/>
        <div ng-view>
        </div>
        <hr/>
    </body>
</html>

HTML / login.html的

<div ng-controller='cvAliboLogin'>
    <h1>CV Alibo - Login</h1>
    <p>
        <input type="text"    name="username" >
        <input type="text"    name="password" >
        <input type="button"  name="login" >
    </p>
</div>

HTML / list.html

<div ng-controller='cvAliboList' id="list">
        <h1>LIST</h1>
</div>

HTML / detail.html

<div ng-controller='cvAliboDetail' id='detail'>
    <h1>DETAIL</h1>
</div>

的Javascript

JS / cvAliboApp

'use strict';


var cvAliboManager = angular.module('cvAliboApp', ['ngRoute']).
config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl:'html/login.html', controller: 'cvAliboLogin'
      }).when('/list', {
            templateUrl:'html/list.html',   controller: 'cvAliboList'
      }).when('/list/:id', {
            templateUrl:'html/detail.html', controller: 'cvAliboDetail'
      }).otherwise({redirectTo: '/'});
});

JS / cvAliboController.js

'use strict';

var cvAliboManager = angular.module('cvAliboApp', []);
    cvAliboManager.controller('cvAliboLogin',
        function cvAliboLogin($scope) {
           alert("cvAliboLogin");
        }
    );

    cvAliboManager.controller('cvAliboList',
        function cvAliboController($scope) {
            alert("cvAliboList");
        }
    );

    cvAliboManager.controller('cvAliboDetail',
            function cvAliboController($scope) {
                alert("cvAliboDetail");
            }
        );

    /*
     * maybe error syntax? TODO ctrl 
    module.run(function($http){
        $http.get('/resources/fakeData.json')
             .success(function(data){
                 alert("OK)");
             })
             .error(function(data){
                 alert('Error');
            });
    });*/

AngularJS版本为1.2.18。
角度路由文件是单独导入的
使用 alert ，我看到 module.run 是不正确的，我对此进行了评论，避免了加载JavaScript代码时的语法错误
JS安全导入
声明并实施了构造词

为什么 index.html 不显示 login.html ？为什么它没有显示任何内容？

欢迎任何建议......

Answer 1

我认为问题出在你的js / cvAliboController.js的第一行：通过执行var cvAliboManager = angular.module('cvAliboApp', []);，您无需任何依赖即可重新定义您的应用，即无需使用ngRoute，因此无法解析路由，也无法显示任何内容。

尝试在没有括号的情况下调用它：var cvAliboManager = angular.module('cvAliboApp');

ng-view或控制器无法正常工作

1 个答案: