Play!+AngularJS快速上手

来源：互联网发布：0.4发热丝数据编辑：程序博客网时间：2024/05/18 03:11

访问接口定义

对外接口

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

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

通过页面路径访问

index（path）

@javax.inject.Injectprivate 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 pathGET         /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 pluginsaddSbtPlugin("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');        }    };}])

调login，

$location.path('/staffs/me');

即是调用angularJS的路由/staffs/me，访问顺序同/staffs/login。

0 0