2014-02-22 65 views
2

我想使用AngularJS構建我的登錄頁面,但是我在顯示它時遇到問題。Grails - 使用AngularJS登錄頁面

這是我web-app/apps/loginPage/app.js的登錄頁面:

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

app.config(function ($routeProvider) { 
    $routeProvider. 
     when('/', { 
      templateUrl: 'apps/loginPage/views/login.html' 
     }). 
     otherwise({ 
      redirectTo: '/' 
     }); 
    }); 

這是我grails-app/views/login/auth.gsp代碼:

<html> 
<head> 
    <meta name='layout' content='main'/> 
    <script src="${resource(dir: 'js', file: 'jquery-1.9.1.js')}"></script> 
    <script src="${resource(dir: 'js', file: 'angular.js')}" ></script> 
    <script src="${resource(dir: 'js', file: 'angular-route.js')}"></script> 
    <script src="${resource(dir: 'apps/loginPage', file: 'app.js')}"></script> 
</head> 
<body> 
    <div ng-app="login-app"> 
     <div ng-view> 
    </div> 
</body> 
</html> 

的問題是,當我瀏覽到http://localhost:8080/myApp/login/auth,頁面加載角的應用程序,但沒有按從login.html文件加載登錄表單,因爲它試圖在http://localhost:8080/myApp/login/apps/loginPage/views/login.html而不是http://localhost:8080/myApp/apps/loginPage/views/login.html

如何修復路徑?我如何才能告訴角色使用localhost:8080/myApp作爲資源的根? (請注意,我已經在web-app/apps/ * .gsp在grails-app/views文件和角APP)

我不知道這是否是問題Grails的配置或角。

+1

如果您將此視爲一般AngularJS + Grails問題而不是Spring Security特有的問題,您可能會獲得更多幫助。它與安全無關,你不包括那些可能幫助你但不知道Spring Security的人 –

+0

查看我的回答如下 – Jagadeesh

回答

1

在經歷了3個項目的Grails & Angular之後,我建議您在純Angular中完成整個前端部分。我甚至沒有在Angular中混合使用GSP,而是使用帶有句柄和本地化的純HTML通過角度平移。應用程序登錄是通過Spring Security AJAX登錄實現的。

如果您完全將前端與後端分開,則可以使用前端現有腳手架工具(如Yeoman或Brunch)。此外HTML片段提供可以被緩存,壓縮等

+0

我也在想它,但我聽說使用靜態頁面更適合搜索引擎,這就是爲什麼我想與gsp混合角色。例如,我想建立我的主頁,常見問題,公司信息等靜態頁面,但用戶配置文件控制面板,以及每個窗體或列表視圖與角。也許我會改變這個概念。感謝您提供有關使用純Ajax保持Spring安全登錄頁面的提示。 – akn

+0

你說得對,搜索引擎需要「靜態」html。所以你有兩個選項,Grails有一個插件,它將你的服務與一個服務集成在一起,爲SPA應用程序生成HTML輸出。或者,您可以將應用程序分爲公共部分和常規GSP呈現以及部分behing安全性(可以是SPA)。我已經創建了2個這樣的應用程序,工作沒有麻煩:-) –

+0

@Tom請看看這個問題http://stackoverflow.com/questions/25152633/grai-as-single-app-or-different-back-端和 - 前端應用內 – Vish