2015-07-08 18 views
5

Tôi đang phát triển Ứng dụng AngularJS 1.4 trong Gói Symfony2. Symfony cung cấp "backend" (API) và Angular the frontend (tất nhiên).Thực hành tốt nhất với các vị trí mẫu AngularJS trong Symfony 2 với Bộ định tuyến Angular mới?

Tôi đang sử dụng bộ định tuyến mới và gắn vào các phương pháp tiếp cận thư mục theo thành phần được đề xuất bởi một số hướng dẫn và ví dụ thực hành tốt nhất. Nhưng kể từ khi tôi xây dựng JS của tôi với gulp và chỉ bao gồm Build-Files hoàn chỉnh, có vấn đề với bộ điều khiển Angular không tìm thấy mẫu của họ.

tôi chỉ cho bạn giải pháp của tôi, mà tôi không thích:

(function() { 
'use strict'; 
angular 
    .module('myModule', ['ngNewRouter', 'myModule.dashboard']) 
    .config(TemplateMapping) 
    .controller('AppController', AppController); 

/* @ngInject */ 
function AppController ($router) { 
    $router.config([ 
     { path: '/', redirectTo: '/dashboard' }, 
     { path: '/dashboard', component: 'dashboard' } 
    ]); 
} 

/* @ngInject */ 
function TemplateMapping($componentLoaderProvider) { 
    $componentLoaderProvider.setTemplateMapping(function (name) { 
     return { 
      'dashboard': '/bundles/mybundle/templates/dashboard/dashboard.html' 
     }[name]; 
    }); 
} 
}()); 

tôi viết Mã kiễu góc của tôi trong src/myBundle/Resources/js/ và ngụm đặt Build cuối cùng để src/myBundle/Resources/public/ mà là sau đó có sẵn trong Template Twig chứa ứng dụng kiễu góc .

Điều tôi đang làm ngay bây giờ, về cơ bản là đặt các mẫu của các thành phần của tôi không phải nơi chúng thuộc về (có thể là src/myBundle/Resources/js/components/dashboard/ cho ví dụ trang tổng quan) nhưng vào src/myBundle/Resources/public/templates.

Tôi phải thông báo cho bộ định tuyến rằng mẫu nằm ở nơi khác thông qua $componentLoaderProvider.setTemplateMapping().

Tôi có hai câu hỏi:

  1. Tôi có thể giải quyết vấn đề vị trí mẫu này một cách thanh lịch hơn?
  2. Tôi có thể nói trực tiếp với bộ định tuyến (trong AppController) nơi mẫu đó không?

Trả lời

7

Điều thú vị với kiến ​​trúc dựa trên API là bạn có thể mở rộng ứng dụng phụ trợ (API) từ giao diện người dùng (ứng dụng AngularJS).

Tôi khuyên bạn nên tạo hai ứng dụng riêng biệt cho giao diện người dùng và chương trình phụ trợ. Mỗi ứng dụng phải nằm trong kho lưu trữ Git của riêng nó và cuối cùng có thể được lưu trữ trên máy chủ riêng của mình:

  • Ứng dụng Symfony tuân theo Symfony Best Practices và chỉ hiển thị REST API. Nó chứa tất cả logic nghiệp vụ. Nó không có mẫu (bạn có thể loại bỏ Twig). Dữ liệu sẽ được tiếp xúc tốt nhất trong JSON.
  • Ứng dụng AngularJS dựa trên tất cả các công cụ giao diện người dùng mà bạn muốn (Gulp, Yeoman ...) và sử dụng API. Nó quản lý bản trình bày và chỉ chứa "nội dung" (tệp tĩnh index.html, tệp JavaScript, tệp định kiểu CSS, hình ảnh ...).

API là hợp đồng giữa hai bên và chúng có thể phát triển riêng. Bảo trì được nới lỏng và khớp nối bị chặt. Ứng dụng giao diện người dùng thậm chí có thể được lưu trữ trực tiếp trên CDN, chẳng hạn như các trang Amazon CloudFront hoặc GitHub để có hiệu suất tối đa.

Tôi đã viết an article detailing this approach and presenting some tools I've built. Nó sử dụng Symfony và AngularJS.

Nếu bạn vẫn muốn có một ứng dụng duy nhất:

  • đặt ứng dụng AngularJS trong một thư mục ngoài công lập như app/frontend
  • cấu hình kịch bản Gulp để viết file quận trong web/
  • được cẩn thận đối với các cuộc tấn công CSRF (hãy xem số DunglasAngularCsrfBundle) của tôi
+0

Cám ơn những suy nghĩ của bạn. Mặc dù điều này đúng trong một số trường hợp nhất định nơi API phụ trợ của bạn (ví dụ: symfony) và ứng dụng giao diện người dùng của bạn (ví dụ: AngularJS) là hai thứ độc lập. Trong dự án này, chúng ta bắt đầu với một ứng dụng Angular như một phần của một ứng dụng symfony. Nhưng chúng tôi đã hòa giải tất cả các Chế độ xem được hiển thị bởi symfony có lợi cho Angular vì vậy có thể cách tiếp cận của bạn sẽ trở thành một lựa chọn cho chúng tôi. Nhưng trong trường hợp đó, toàn bộ câu hỏi của Angular templating trong Symfony không tăng lên ngay từ đầu. :) – Daniel

+0

Tôi đã chỉnh sửa câu hỏi để thêm ví dụ với một ứng dụng. –

2

Cách tiếp cận tốt nhất mà Kévin đề cập là tách riêng mặt trước của bạn -end và back-end theo cách mà ngay cả khi bạn thay đổi back-end cho công nghệ khác, bạn không cần phải thay đổi front-end của bạn.

Ngoài ra còn có 2 dự án git có thể giúp bạn có ứng dụng đẹp hơn.

1) FOSJsRoutingBundle

https://github.com/FriendsOfSymfony/FOSJsRoutingBundle nào cho phép bạn sử dụng định tuyến Symfony của bạn trong mã JavaScript của bạn

2) góc-schema-form

https://github.com/json-schema-form/angular-schema-form Đó là một động trình tạo biểu mẫu. Nó tạo và xác nhận một biểu mẫu từ một lược đồ JSON. Vì vậy, những gì tôi đã làm là tạo ra một Angular Schema Form Serializer trong Symfony để chuyển đổi một biểu mẫu Symfony thành một lược đồ Jason có thể được sử dụng bởi dạng lược đồ góc để tạo các biểu mẫu của tôi một cách linh động. Trong trường hợp này, tôi không cần triển khai biểu mẫu bằng html. Ngay cả khi tôi thay đổi API, tôi chỉ cần cung cấp cùng một lược đồ Jason cho các biểu mẫu của mình.

0

Cách tiếp cận tốt nhất là tách hoàn toàn ứng dụng Góc của bạn khỏi chương trình phụ trợ của Symfony. Nhưng nếu bạn muốn sử dụng Góc trong một số phần rất nhỏ của ứng dụng cũ của mình, bạn có thể chuyển baseURL cho thành phần của mình, ví dụ như cũ. :

<yourComponent baseurl="{{ app.request.scheme ~ '://' ~ 
app.request.httpHost ~ app.request.basePath }}"></yourComponent> 

và sau đó sử dụng nó trong chức năng templateUrl bạn

templateUrl: function($attrs) { 
       return $attrs.baseurl + 'templats/yourComponent.template.html'; 
      } 
Các vấn đề liên quan