Question

我正在使用Eclipse（动态Web项目），tomcat。附加了项目的所有文件和文件夹结构。

我使用了http://localhost:8080/testing-AngularJS/和http://localhost:8080/testing-AngularJS/Main.html

我看到空白页面不是登录页面。

我的主文件仅包含登录指令。

<!DOCTYPE html>
<html ng-app="testAngular">
    <head>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
        <script type="text/javascript" src="appCode/app.js"></script>
    </head>
    <body ng-controller="appCntrl">
        <login-directive></login-directive>
    </body>
</html>

app.js文件已定义指令和配置。路由到的配置文件登录页面。

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

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
    when('/', {
        templateUrl: 'views/Login.html',
    }).
    otherwise({
        redirectTo: 'views/Login.html'
    });
}]);

app.controller('appCntrl', function ($scope, appService) {
    this.review = {};

    this.addReview = function (product) {

    };
});

app.directive('loginDirective', function () {
        return {
            restrict: 'E',
            templateUrl: '/appCode/views/Login.html'
        };
    }
);

的login.html

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="login-panel panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Sign in</h3>
                </div>
                <div class="panel-body">
                    <form role="form">
                        <fieldset>
                            <div class="form-group">
                                <label>AFT ID</label>
                                <input class="form-control" name="User ID" type="text" value="" />
                            </div>
                            <div class="form-group">
                                <label>Password</label>
                                <input class="form-control" name="Password" type="password" value="" />
                            </div>
                            <a class="btn btn-lg btn-primary btn-block">Login</a>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

WEB.XML

<?xml version="1.0" encoding="UTF-8" ?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
    <display-name>testing-AngularJS</display-name>
    <welcome-file-list>
        <welcome-file>Main.html</welcome-file>
    </welcome-file-list>
</web-app>

ERROR:

无法加载资源：服务器响应状态为404（未找到）

at XMLHttpRequest.w.onload (http://localhost:8080/testing-AngularJS/scripts/angular.min.js:87:78)

Answer 1

你应该：

 templateUrl:'views/Login.html'

而不是

 templateUrl:'/appCode/views/Login.html'

在你的指令和

中

 templateUrl: 'views/Main.html',

您的routeProvider templateUrl

中的

Answer 2

我认为您在模块设置中缺少对ngRoute的依赖。请尝试在app.js：

中添加它

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

tomcat服务器上的基本angularJs指令

2 个答案: