2015-07-08 6 views
5

मैं एक सिम्फनी 2 बंडल के भीतर एक कोणीय जेएस 1.4 आवेदन विकसित कर रहा हूं। सिम्फनी "बैकएंड" (एपीआई) और कोणीय अग्रभाग प्रदान करता है (बेशक)।नए कोणीय राउटर के साथ सिम्फनी 2 में AngularJS टेम्पलेट स्थानों के साथ सर्वश्रेष्ठ अभ्यास?

मैं नए राउटर का उपयोग कर रहा हूं और कई गाइड और सर्वोत्तम अभ्यास उदाहरणों द्वारा सुझाए गए घटक संचालित फ़ोल्डर दृष्टिकोण पर चिपक रहा हूं। लेकिन चूंकि मैं अपने जेएस को गल्प के साथ बनाता हूं और केवल पूर्ण बिल्ड-फाइल्स को शामिल करता हूं, वहां कोणीय नियंत्रकों के साथ समस्याएं होती हैं जो उनके टेम्पलेट नहीं ढूंढती हैं।

(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]; 
    }); 
} 
}()); 

मैं src/myBundle/Resources/js/ में मेरे कोणीय कोड लिख सकते हैं और घूंट src/myBundle/Resources/public/ जो करने के लिए अंतिम बिल्ड डालता है तो टहनी खाका कि कोणीय एप्लिकेशन रखती में उपलब्ध है:

मैंने तुम्हें अपनी समाधान है, जो मैं पसंद नहीं दिखाने ।

मैं अभी क्या कर रहा हूं, मूल रूप से मेरे घटकों के टेम्पलेट्स को जहां वे संबंधित हैं (वह src/myBundle/Resources/js/components/dashboard/ होगा डैशबोर्ड उदाहरण के लिए) लेकिन src/myBundle/Resources/public/templates में।

मुझे राउटर को यह बताना है कि टेम्पलेट $componentLoaderProvider.setTemplateMapping() के माध्यम से कहीं और स्थित है।

मैं दो प्रश्न हैं:

  1. मैं एक और अधिक सुरुचिपूर्ण तरीके से इस टेम्पलेट स्थान समस्या को हल कर सकते हैं?
  2. क्या मैं सीधे राउटर को बता सकता हूं (AppController में) जहां टेम्पलेट है?

उत्तर

7

एपीआई आधारित आर्किटेक्चर के साथ अच्छी चीज यह है कि आप फ्रंटेंड (एंगुलरजेएस ऐप) से बैकएंड ऐप (एपीआई) को बेकार कर सकते हैं।

मैं फ्रंटेंड और बैकएंड के लिए दो अलग-अलग एप्लिकेशन बनाने की सलाह देता हूं। प्रत्येक अनुप्रयोग की अपनी Git भंडार में होना चाहिए और अंत में अपने स्वयं के सर्वर पर होस्ट किया जा सकता है:

  • Symfony आवेदन Symfony Best Practices अनुसरण करता है और केवल एक REST API उजागर करता है। इसमें सभी व्यावसायिक तर्क हैं। इसमें कोई टेम्पलेट नहीं है (आप टवीग को हटा सकते हैं)। जेएसओएन में डेटा अधिमानतः उजागर किया जाएगा।
  • एंगुलरजेएस एप्लिकेशन आपके इच्छित सभी फ्रंटेंड टूल्स (गुलप, यमन ...) पर निर्भर करता है और एपीआई का उपभोग करता है। यह प्रस्तुति का प्रबंधन करता है और इसमें केवल "संपत्ति" (एक स्थिर index.html फ़ाइल, जावास्क्रिप्ट फ़ाइलें, सीएसएस स्टाइलशीट, छवियां ...) शामिल हैं।

एपीआई दोनों तरफ के बीच अनुबंध है और वे अलग से विकसित हो सकते हैं। रखरखाव आसान हो गया है और युग्मन तंग है। फ्रंटएंड ऐप को सीडीएन पर सीधे होस्ट किया जा सकता है जैसे अधिकतम प्रदर्शन के लिए अमेज़ॅन क्लाउडफ्रंट या गिटहब पेज।

मैंने an article detailing this approach and presenting some tools I've built लिखा है। यह सिम्फनी और एंगुलरजेएस का उपयोग करता है।

आप अभी भी एक भी आवेदन करना चाहते हैं:

  • एक गैर सरकारी निर्देशिका जैसे app/frontend
  • कॉन्फ़िगर Gulp लिपि में web/
  • होना जिले फ़ाइलें लिखने के लिए AngularJS एप्लिकेशन डाल सीएसआरएफ हमलों के लिए सावधान रहें (DunglasAngularCsrfBundle पर एक नज़र डालें)
+0

धन्यवाद। हालांकि यह कुछ परिदृश्यों में सच है जहां आपकी बैकएंड एपीआई (उदा। सिम्फनी) और आपके फ्रंटएंड एप्लिकेशन (जैसे एंगुलरजेएस) दो स्वतंत्र चीजें हैं। परियोजना में इस quesion का मूल्यांकन किया, हम एक सिम्फनी आवेदन के एक हिस्से के रूप में एक कोणीय आवेदन के साथ शुरू किया। लेकिन हम पहले से ही एंगुलर के पक्ष में सिम्फनी द्वारा प्रदान किए गए सभी दृश्यों को छोड़कर पुनर्निर्मित कर चुके हैं, इसलिए हो सकता है कि आपका दृष्टिकोण हमारे लिए एक विकल्प बन जाए। लेकिन उस मामले में सिम्फनी में कोणीय templating का पूरा सवाल पहली जगह में नहीं उठाता है। :) – Daniel

+0

मैंने एक ऐप के साथ एक उदाहरण जोड़ने के लिए प्रश्न संपादित किया है। –

2

केविन के रूप में सबसे अच्छा तरीका आपके सामने को अलग करना है -और और बैक-एंड इस तरह से करें कि भले ही आप बैक एंड को दूसरी तकनीक में बदल दें, आपको अपने फ्रंट-एंड को बदलने की आवश्यकता नहीं है।

2 गीट परियोजनाएं भी हैं जो आपको एक अच्छा ऐप रखने में मदद कर सकती हैं।

1) FOSJsRoutingBundle

https://github.com/FriendsOfSymfony/FOSJsRoutingBundle जो तुम अपना JavaScript कोड में अपने Symfony मार्ग उपयोग करने की अनुमति

2) कोणीय स्कीमा फार्म

https://github.com/json-schema-form/angular-schema-form जो एक गतिशील है फॉर्म जनरेटर। यह एक JSON स्कीमा से एक फॉर्म बनाता है और मान्य करता है।

तो मैंने सिम्फनी में एक कोणीय स्कीमा फॉर्म सीरियलाइज़र बनाने के लिए एक सिम्फनी फॉर्म को जेसन स्कीमा में परिवर्तित करने के लिए किया था जिसका उपयोग कोणीय-स्कीमा-फॉर्म द्वारा मेरे रूपों को गतिशील रूप से उत्पन्न करने के लिए किया जा सकता है। इस मामले में मुझे HTML में फॉर्म को लागू करने की आवश्यकता नहीं है। यहां तक ​​कि अगर मैं एपीआई बदलता हूं तो मुझे अपने फॉर्मों के लिए एक ही जेसन स्कीमा प्रदान करने की आवश्यकता है।

0

सबसे अच्छा तरीका सिग्फ़नी बैकएंड से पूरी तरह से अपने कोणीय ऐप को अलग करना है। लेकिन यदि आप अपने विरासत ऐप के कुछ बहुत ही कम हिस्से में कोणीय का उपयोग करना चाहते हैं, तो आप पूर्व के लिए अपने बेसURL को अपने घटक में पास कर सकते हैं। :

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

और फिर अपने templateUrl समारोह में इसका इस्तेमाल अपने विचारों के लिए

templateUrl: function($attrs) { 
       return $attrs.baseurl + 'templats/yourComponent.template.html'; 
      } 
संबंधित मुद्दे