将文件中的Javascript与AngularJS和Apache Tiles一起使用

Use in-file Javascript with AngularJS and Apache Tiles

本文关键字：Tiles Apache 一起 AngularJS 文件 Javascript      更新时间：2023-09-26

我一直在学习AngularJs，目前有一个使用Apache Tiles的应用程序。在将AngularJs添加到应用程序之前，我在页脚tile中有一段工作代码，它计算了当前年份，如下所示：

footer.html

    <script type="text/javascript">
          var year = new Date().getFullYear();
    </script>
    <tr ng-Controller="AppController">
       <td>Created <script>document.write(year)</script>
       </td>
    </tr>

controller.js

    var controllers = {};
    controllers.AppController = ['$scope', function ($scope) {
    $scope.currentYear = new Date().getFullYear();
    }];
    proxy.controller(controllers);

app.js

     var proxy = angular.module('proxy',['ngRoute'])
           .config(function($routeProvider) {
            $routeProvider.when('/index',{
                 templateUrl: 'search.jsp',
                 controller: 'AppController'
            });
     });

页脚现在只在index.html页面上显示"已创建"。有没有一种方法可以用angular成功地计算年份？为什么当AngularJs被添加到应用程序时，这个文件中的JS会停止工作？

由于您使用的是AngularJS，因此可以编写如下代码：

<script type="text/javascript">
        angular.module('app', []).controller('YearController', ['$scope', function ($scope) {
            $scope.currentYear = new Date().getFullYear();
        }]);
</script>
<table ng-app="app">
    <tr ng-controller="YearController">
        <td>
            Created {{currentYear}}
        </td>
    </tr>
</table>

编辑：如果它在自己单独的HTML和JavaScript文件中，它会是这样的。

index.html:

<!DOCTYPE html >
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="app">  
    <div ng-include="'footer.html'"></div>
</body>
</html>

footer.html：

<table>
    <tr ng-controller="YearController">
        <td>
            Created {{currentYear}}
        </td>
    </tr>
</table>

app.js（最好有自己的独立文件）：

var app = angular.module('app', []);
var controllers = {};
controllers.YearController = ['$scope', function ($scope) {
    $scope.currentYear = new Date().getFullYear();
}];
app.controller(controllers);
相关文章：