0

正在制作主页，有这么麻烦的事情。

localhost:9000/ 这个网址是我的主页。

主页顶部有a、b、c三个类别。

当我点击 a 时，url 将更改为 localhost:9000/a

我可以看到显示一句话“hello world！”的局部视图。它运作良好。

但是当我点击刷新（F5）时，视图会显示 {{sentence}}。

我认为看不到正确视图的原因是a.html无法加载资源。

只有 main.html 有一个完整的 html 结构。而其他html没有。

a.html 只有

{{句子}}

.

下面是javascript中的小代码块。

myApp.config(['$routeProvider','$locationProvider' ,function($routeProvider,$locationProvider){
    $routeProvider
        .when('/a',{
            templateUrl:'a',
            controller:'aCtrl'
....
}
myApp.controller('aCtrl',['$scope',function($scope){
    $scope.message = "hello world!";
}]);

是路线

GET        /               controllers.Application.index
GET        /a              controllers.Application.a

这是Application.java

package controllers;

import play.*;
import play.mvc.*;

import views.html.*;

public class Application extends Controller {

    public static Result index() {
        return ok(index.render("Your new application is ready."));
    }

    public static Result a(){ return ok(a.render());}
}

那么有什么解决办法吗？？我真的找不到解决方案。

或者在angularJs中是正常的吗？因为它是单页应用程序。

只有主页可以使用刷新（F5）。它显示正确的视图。

请帮我！！！！！！！OTL

4

1 回答 1

0

Play Framework 和 AngularJS 都有一个路由系统，在您的示例中不能很好地匹配。

由于有几个选项可以匹配它们，假设您只想依赖 AngularJS 路由系统，并且想要大的浏览器兼容性（请参阅AngularJS routing without the hash '#'）。

conf/routes：你捕获到同一个控制器的所有 URL

GET     /$id<[a-c]?>                controllers.Application.index(id: String)
GET     /assets/*file               controllers.Assets.at(path="/public", file)

Application.scala：索引函数在非根 URL 上添加 # 符号，以触发 AngularJS 侧的路由更改

package controllers
import play.api._
import play.api.mvc._

object Application extends Controller {
  def index(id: String) = Action {
    if (id.nonEmpty) {
      Redirect("/#/"+id)
    } else {
      Ok(views.html.main("Hello"))
    }
  }
}

在 AngularJS 方面，您可能不必进行更改，因为 AngularJS 会根据您的描述更改路由。作为参考，这是一个工作示例：

main.js

var app=angular.module('main', ['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider.when('/a',        {templateUrl: '../assets/tpl/a.html', controller: 'a'});
    $routeProvider.when('/b',        {templateUrl: '../assets/tpl/b.html', controller: 'b'});
    $routeProvider.otherwise(        {templateUrl: '../assets/tpl/default.html', controller: 'default'});
});
app.controller('default', function($scope, $http, $location) {
    console.log('default controller');
});
app.controller('a', function($scope, $http, $location) {
    console.log('controller a');
});
app.controller('b', function($scope, $http, $location) {
    console.log('controller b');
});
于 2014-12-26T11:01:59.587 回答