Play!+AngularJS快速上手

最新推荐文章于 2026-06-23 09:20:39 发布

原创最新推荐文章于 2026-06-23 09:20:39 发布 · 924 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#play #angularjs

Play+AngularJS快速上手系列专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Play框架中集成AngularJS，包括定义对外接口、配置路由、加载模板及实现前后端交互的过程。

访问接口定义

对外接口

对外接口通过play的Routes路由文件定义，根据路由访问相应接口，angularJs通过module中的routeProvider定义。
例如：
在routes中定义一个路由：

GET         /*path               controllers.Application.index(path)

通过页面路径访问

index（path）

@javax.inject.Inject
private HttpConfiguration httpConfiguration;
public Result index(String path) {
    return ok(views.html.index.render(httpConfiguration.context()));
}

然后我们在angularJS的index.scala.html中配置，

@(context: String)
<!DOCTYPE html>
<html lang="zh-CN" ng-app="admin" ng-strict-di>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="author" content="avidmouse">
        <base href="@context/">
        <title>hello world！</title>

        <link rel="shortcut icon" type="image/gif" href="@routes.Assets.versioned("img/favicon.gif")">
        <link href="@routes.Assets.versioned("lib/bootstrap/dist/css/bootstrap.min.css")" rel="stylesheet">
        <link href="@routes.Assets.versioned("lib/font-awesome/css/font-awesome.min.css")" rel="stylesheet">
        <link href="@routes.Assets.versioned("css/main.css")" rel="stylesheet">

        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
        <script src="@routes.Assets.versioned("js/admin/staff.js")"></script>
        <script src="@routes.Assets.versioned("js/app.js")"></script>
    </head>
    <body ng-view ng-class="bodyClass">
    </body>
</html>

ng-app=”admin”：主要定义，绑定module。指定入口。
@routes.Assets.versioned：在routes中定义，找到指定资源文件

# Map static resources from the /public folder to the /assets URL path
GET         /assets/*file           controllers.Assets.versioned(path="/public", file:Asset)

加载模板：

<link href="@routes.Assets.versioned("lib/bootstrap/dist/css/bootstrap.min.css")" rel="stylesheet">
        <link href="@routes.Assets.versioned("lib/font-awesome/css/font-awesome.min.css")" rel="stylesheet">

这两个资源需要在build.sbt中配置：

("org.webjars.bower" % "bootstrap" % "4.0.0-alpha.2").exclude("org.webjars.bower", "jquery"),
"org.webjars.bower" % "font-awesome" % "4.5.0",

<link href="@routes.Assets.versioned("css/main.css")" rel="stylesheet">

该文件main.css为本地文件：
在目录app/assets/css下：main.less,应该也是模板文件，但是调的时候是main.css，需要在build.sbt中配置：

includeFilter in(Assets, LessKeys.less) := "*.less"

LessKeys.compress in Assets := true

LessKeys需要在plugins.sbt中添加依赖：

// web plugins
addSbtPlugin("com.typesafe.sbt" % "sbt-less" % "1.1.0")

angularJS路由配置

angularJS配置路由需要这两个依赖：

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

这两个是直接下载，当然也可以在build.sbt中添加后在这里引用。

        <script src="@routes.Assets.versioned("js/admin/staff.js")"></script>
        <script src="@routes.Assets.versioned("js/app.js")"></script>

这些都是预先加载好的一些js路径，在访问的时候根据ng-app的名字对应
比如该ng-app=”admin”，而对应的
angular.module(‘admin’,[‘ngRoute’, ‘admin.staff’])
在app.js中，所以将这两个绑定在一起，后面[]里有两个参数，第一个即是路由，ngRoute，第二个’admin.staff’即使添加admin.staff module，因为上面的两个js文件中还有一个staff.js，该js中声明了admin.staff的module

angular.module('admin.staff', ['ngRoute'])

也就是这两个module中声明的路由按理说都是可以访问的。
在该例子中，
localhost:9000/admin/staffs/login访问顺序：
先通过play的routes中查找/admin，因为我在application.conf中声明了
play.http.context = “/admin”
所以对应查找routes中的/对应的路由地址
，然后通过index加载angularJS的index.scala.html，然后对应的找到angularJS的staffs/login路由。
然后看一下staff.js中路由的定义：

.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/staffs/login', {
            templateUrl: 'assets/js/tpl/admin/staff/login.html',
            controller: 'admin.staff.LoginCtrl'
            // resolve: {
            //     me: ['$location', 'staff.security', function ($location, security) {
                    // return security.current().then(function (staff) {
                    //     if (staff) $location.path('/');
                    // }, function () { return null; });
                // }]
            // }
        })
        .when('/staffs/me', {
            templateUrl: 'assets/js/admin/me.html',
            controller: 'admin.staff.MeCtrl'
            // resolve: {
            //     me: ['staff.security', function (security) {
            //         return security.current();
            //     }]
            // }
        })

}])

templateUrl：对应的html所在的目录地址，访问该路由即可渲染该html
controller:控制器，在此声明加载的控制器对应的名称admin.staff.LoginCtrl
其中
<body ng-view ng-class="bodyClass"> </body>
中的ng-view即是指定局部刷新的子view，可以使多个页面合为一个页面。也就是angularjs中路由指定的html指定在此处渲染刷新。
和ng-app类似

.controller('admin.staff.LoginCtrl', ['$scope', '$http','staff.security', function ($scope, $http, security) {

    $scope.staff = {};

    $scope.login = function () {
        $http.post('v1/staffs/login', $scope.staff).then(function (res) {
            // security.login(res.data.data);
            // $location.path('/staffs/me');
            if(res.data=="true") {
                security.login();
            }else{
                $scope.error = true;
            }
        }, function () {
            $scope.error = true;
        });
    };

}]);

'$scope', '$http','staff.security', function ($scope, $http, security)

将值对应赋给每个变量，然后post请求接口，

$http.post('v1/staffs/login', $scope.staff).then(function (res) {
    // security.login(res.data.data);
    // $location.path('/staffs/me');
    if(res.data=="true") {
        security.login();
    }else{
        $scope.error = true;
    }
}, function () {
    $scope.error = true;
});

post接口在play的routes中有定义：

POST        /v1/staffs/login        controllers.Application.login

Res.data即post接口返回的值。
staff.security是我们自定义的函数方法

.factory('staff.security', ['$location', function ($location) {

    function login() {
        if ($location.path() != '/staffs/login')
            $location.path('/staffs/login');
    }

    return {
        login: function (staff) {
            $location.path('/staffs/me');
        }
    };

}])