플레이 프레임워크 2.1 - 각도JS 라우팅 - 최적의 솔루션?
앵귤러 호를 통과해서JS 튜토리얼Angular는 자체 JS 라우팅 메커니즘을 사용하여 단일 페이지 앱을 허용합니다.Angular 라우팅 파일의 예는 다음과 같습니다.
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: '/partials/phone-list', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
파셜(각선 고유의 HTML 파일)을 저장할 수 있는 장소를 찾고 있습니다.이상적으로는 Play 내에서 템플릿을 작성할 수 있으면 좋겠습니다(*.scala.html 파일).다음과 같이 Play routes 파일을 사용하여 이를 수행할 수 있습니다.
GET /partials/phone_index controllers.Application.phone_index
기본적으로 다음과 같은 컨트롤러 동작을 좋아합니다.
def phone_index = Action {
Ok(views.html.partials.phone_index())
}
제가 찾고 있는 솔루션은 두 가지 이상의 조합입니다.
- /partial/* 아래에 있는 파일에 접속하여 부분 파일을 가져올 수 있는 매핑이 있습니다.
- 컨트롤러 액션을 사용하여 데이터(희귀)를 동적으로 채울 수 있도록 특정 부분으로의 루트를 덮어씁니다.
좋은 생각 있어요?
비슷한 것을 시도해 본 결과, 2부분으로 나누어 깨뜨리는 것이 좋다고 생각했습니다.
- Ajax 콜을 통해 대화하는 백엔드로 Play 사용
- Angular 템플릿을 Play
public폴더(와 같은 것)/public/angular/기본 AngularJs 방식을 사용하여 템플릿을 매핑합니다.
좋은 생각이 아닌 것 같고, 어떻게 하면 좋은지 당신의 질문에 대답할 수 없다는 것을 알지만, 템플릿과 그 URL이 Angular에 매핑되는 방법 때문에 두 프레임워크를 링크하려고 하면 문제가 생길 수 있습니다.또한 어떤 변경도 많은 작업을 수반하기 때문에 이점은 매우 작기 때문에 Play와 Angular의 주요 이점을 빠르게 제거할 수 있습니다.발전.
이를 통해 관심사를 더 잘 분리할 수 있습니다. 프로젝트가 커지면 Angular를 선택할 수 있기 때문에 중요해질 수 있습니다.JS는 백엔드에 접속하는 독립형 앱으로 코드화 되어 정상적으로 동작합니다.
내가 말한 샘플 코드를 볼 수 있습니다(각도의 TODO 튜토리얼에 기반).JS)를 이 Github 저장소에 저장합니다.경고하는데, 코드가 너무 좋진 않지만 아이디어를 줄 수 있고 보너스로서 어떻게 재스민을 플레이에 통합할 수 있는지 보여줄 수 있어, 앵글을 위해.JS 유닛 테스트
최종 시드(https://github.com/angyjoe/eventual)는 Play + Angular를 작성하는 또 다른 방법입니다.JS 앱. 코드는 사랑스럽고 문서화되어 있어.
이것은 당신의 질문에 직접적으로 대답하지는 않지만, 나는 이것이 Play + Angular 앱을 만드는 가장 좋은 방법이라는 것을 알게 되었다.
https://github.com/typesafehub/angular-seed-play
예, 클라이언트 측 템플리트의 서버 측 메타 템플리트를 작성할 수 있습니다.이것은 두 방법이 완전히 겹치지 않기 때문에 몇 가지 독특한 능력을 제공합니다.또한 혼란의 여지가 많으므로 Angular 지시문이 아닌 Play 블록을 작성하는 이유를 알고 있어야 합니다.
이 작업을 수행할지 여부는 여전히 미해결 질문으로 남아 있습니다.템플릿의 서버 정보에 실제로 액세스할 필요가 있는지 여부에 따라 달라집니다.이것이 필요하고 적절하다고 생각되는 부분의 예로는 접근통제를 뷰에 실장하는 것이 있습니다.
이제 당신의 질문에 대답하겠습니다.이 문제는 온 디맨드로 로드되는 루트를 제공하는 것이 아니라 파셜을 인라인화하는 것으로 해결됩니다.http://docs.angularjs.org/api/ng.directive:script 를 참조해 주세요.
템플릿의 모양은 다음과 같습니다.
@(id: Long)(implicit request: RequestWithUser[AnyContent])
@import helper._
<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="lib/angular/angular-resource.js"></script>
</head>
<body>
<div ng-view></div>
@ngTemplate("phone-list.html") {
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">Hello @request.user.name</div>
</div>
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
<a href="#/phones/{{phone.id}}">{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
}
@ngTemplate("phone-detail.html") {
<img ng-src="{{mainImageUrl}}" class="phone">
<h1>{{phone.name}}</h1>
<p>{{phone.description}}</p>
<ul class="phone-thumbs">
<li ng-repeat="img in phone.images">
<img ng-src="{{img}}" ng-click="setImage(img)">
</li>
</ul>
<ul class="specs">
<li>
<span>Availability and Networks</span>
<dl>
<dt>Availability</dt>
<dd ng-repeat="availability in phone.availability">{{availability}}</dd>
</dl>
</li>
</ul>
}
</body>
</html>
그리고 앱:
'use strict';
/* App Module */
angular.module('phonecat', ['phonecatFilters', 'phonecatServices']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
다음 도우미만 포함하면 됩니다.
@**
* @ngTemplate
* Generate an AngularJS inlined template.
*
* Note: Do not include scripts in your @template HTML. This will break the template.
*
* @param name
* @param template
*@
@(name: String)(template: Html)
<script type="text/ng-template" id="@name">@template</script>
각진 앱의 루트 범위 내에서 사용하세요.
질문 1에서는 다음과 같은 루트를 도입할 수 있습니다.
/partials/:view controllers.Application.showView(view:String)
그런 다음 컨트롤러에서 뷰 이름에서 실제 뷰로 매핑해야 합니다.
Map("phone_index" -> views.html.partials.phone_index())
템플릿을 느리게 만들거나 요청을 표시해야 할 경우 다음과 같은 작업을 수행해야 합니다.
val routes = Map(
"phone_index" -> { implicit r:RequestHeader =>
views.html.partials.phone_index())
}
동작은 다음과 같습니다.
def showView(view:String) =
Action { implicit r =>
routes(view)
}
특정 루트에 특정 컨트롤러 방식(질문 #2)을 사용하는 경우 다이내믹 루트 위에 루트를 추가합니다.
/partials/specific controllers.Application.specific()
나는 그것이 공손한 마음에서 나온 것이라 할지라도 매우 좋은 생각은 아니라고 생각한다.
모든 생각을 디폴트(구성원칙에 대한 관습)로 두는 것이 매우 좋은 방법이라고 생각합니다.따라서 각 패러다임(Play 및 Angular)을 유지하는 것이 더 흥미로울 수 있습니다.JS) 둘 중 하나 또는 둘 다 가까운 미래 또는 먼 미래에 발전할 수 있기 때문에 분리된 JS).
두 번째 매우 중요한 점은 테스트 가능성입니다.두 가지 테크놀로지를 혼재시키면 어플리케이션 양쪽에서 테스트 범위가 매우 넓어집니다.건배.
이것은 질문에 정확하게 답하지 못할 수도 있지만, Play/scala/Angular 앱을 구축하는 좋은 예처럼 보이므로 이 프로젝트를 따라해 보십시오.
https://github.com/lashford/modern-web-template#master
http://typesafe.com/activator/template/modern-web-template
언급URL : https://stackoverflow.com/questions/16085544/play-framework-2-1-angularjs-routing-best-solution
'programing' 카테고리의 다른 글
| 사용자 지정 위젯이 Visual Composer에 표시되지 않음 (0) | 2023.03.06 |
|---|---|
| 노드에서 HTTP 요청을 통해 JSON 가져오기JS (0) | 2023.03.06 |
| 상태 ''에서 '...'을(를) 확인할 수 없습니다. (0) | 2023.03.06 |
| create-react-app에서 Import 바로가기/에일리어스를 만드는 방법 (0) | 2023.03.06 |
| 앵글시드는 사실상의 빈 프로젝트입니까? (0) | 2023.03.06 |