In my angular application, back-end users can create custom templates. Those custom templates need to be loaded in the angular application at specific positions. I have a custom directive which gets templates
( based on the routes) from the CMS and inject it to my angular application. If I put it into the innerHTML the components will not get rendered correctly. I need componentFactoryResolver and compiler to properly show the components.
The above solution does not work with AOT compilation. Is there any other way I can achieve the same and make use of AOT? Is server side rendering is only solution to this?
Angular doesn't encourage using Compiler to create dynamic template.
Could/would/will code using COMPILER_PROVIDERS be supported by AOT?
But maybe in future it will be possible with without shipping the compiler because new View Engine open new capabilities.
Properties
the generated code relies on very few internals.
we can make the API public and stable
users could ship the generated factory files on npm
this makes calls to ngc in applications faster as it does not need
to compile the code of libraries like Ionic any more.
users could implement their own ViewEngine
this way we can drop the Renderer abstraction, as we already have an indirection via the ViewEngine
users could create templates programmatically during runtime
without shipping the compiler
eg for a dynamic form / ....
we might want to provide a builder for this that calculates indices correctly and can already be used in tests
we could create a new kind of directive that transforms a ViewDefinition, e.g. wraps elements into new ones, ... (similar to the compile in Angular 1).
needs some helpers that maps indices from new to original indices
Read more in Design Doc for View Engine
Related
I am a ServiceNOW Developer. Recently, ServiceNOW replaced their Jelly based Content Management System with an AngularJS based Service Portal. This interface uses AngularJS widgets for display and data manipulation including the ability to create custom widgets. However, the fulfiller interface is still Jelly based.
ServiceNOW has constructs called UI Macros and UI Scripts that can be used within the Jelly interface to develop UI modules for which OOTB constructs are unavialable, like the widgets in the Service Portal. I tried to create an AngularJS based UI Macro that referencess the AngularJS App/Controller through an include of the UI Script that contains them. I created a mirror widget for the Service Portal that uses, essentially, the same AngularJS App/Controller.
The widget works beautifully in the Service Portal. The UI Macro works beautifully in the Service Catalog view. However, when the same UI Macro is included in a fulfillment record, it no longer functions correctly. The console logs indicate that there is a Controller conflict.
I am guessing that where ServiceNOW is inserting my UI Macro is in the middle of another AngularJS Application for which there is no expectation of another AngularJS application, only Jelly.
Therefore, my question is, is there a way to encapsulate my AngularJS Application/Controller in such a way that it will function completely on its own or if it is inserted into some other AngularJS Application/Controller i.e. that it is truly bulletproof and independent of what may be around it?
FYI: The results of a ServiceNOW HI Incident regarding this issue was that UI Macros should only be Jelly. However, the idea of having to maintain two completely different technologies for the same thing is not appealing. Therefore I am exploring all possibilities.
Thank you in advance.
Respectfully,
Robert
One option which is common in servicenow is making use of <iframe> HTML elements, it gives you the ability to have a separate page with a separate scope and a separate JS window object (will not conflict with the internal angular app)
You can encapsulate every thing in a UI page, consider it your Angular JS app main file and you can refer to this UI page like below:
<iframe src='https://<YOUR_INSTANCE>.service-now.com/<YOUR_UI_PAGE_NAME>.do'></iframe>
How is it possible to load external templates from the server during runtime with react-templates (or other reacte template system)?
I can't find any doc's about it but noticed that some people mentioned it as answer in SO questions.
Or should I just implement it my self and use the function "dangerouslysetinnerhtml" to inject the html?
What I want to do?:
Store html/css snippets in xml (or json), that is produced/managed by a CMS and load these in a react app. It makes it very easy to change the html, or support different languages without changing the code and making a new deployment.
I have an app running that is doing exactly that, that I have made with Google GWT, and I want to do the same in the react app.
First of all i am confuse for my project whether it can use angular.js or not, although i have started using it and i created some customization module with this but when i started applying it for all project i got stuck on many things.
My project is a order taking project and it has structure like this.
In the index page it has 3 panels.
left panle that draws all categories
middle panel that draws all category specific productes
and right panel that draws all the basket items with calculations.
On product click there also appears a model that draws all the customization.
I am using MVC-4.
Every thing on index that includes some layout is a partial view _leftpanl, _middlePnl, _rightPnl, _customziaion.
My concern is.
If i define the routes to the module i created how to fix on ng-view because per scope there will be one ng-view only. and my application load atleast 3 partial views to index page at the same time. So how would i fix on ng-view.
Just gimme some guide lines that i should follow to create this kind of application with angular.js.
Or it is not possible with angular because i think it is not a single page application.
Use the Angular-Breeze SPA template provided by the ASP.Net team http://www.asp.net/single-page-application/overview/templates/breezeangular-template
Don't mix up the Razor view/partials with Angular. Use ASP.Net MVC to manage only the REST interface and use AngularJS to embrace the presentation layer.
Learn the Angular Routing and Templates to mimic your requirements.
https://egghead.io/lessons/angularjs-routeprovider-api
https://egghead.io/lessons/angularjs-ng-view
It seems you have a problem to define what you really need.
AngularJS primary purpose is to do some Single Page Application. Which is, code only in HTML/CSS/JS in the front-end, and reuse your abilities in the back-end to produce DATA only (REST-json is the most classic but you can choose whatever you want).
So if you use a tool outside its primary purpose, you have to do some compromises : Of course you can mix backend template with AngularJS, but in this case, you can forget the router and ng-view.
Use AngularJS if you think you have some complex web interface. If it is only some static text, or even a few input forms here and there you don't necesseraly have to AngularJS, you can just use your classic server-side display rendering.
You could use ng-include to include each of your three partials into one view. Then in each partial view you can specify the controller with ng-controller. For creating the modal popup I would probably use ui bootstrap's modal
Alternatively you could use ui-router to create multiple parallel views.
I have following guidelines here which i hope will help you.
Do not mix Server Side MVC and Client Side MVC. AngularJS is primarly meant to augment the HTML and browser capability. The two-way binding of angularjs is excellent and provides lots of dynamic behavior. MVC4 scores best when we have to do lot of server side processing using the .Net platform capabilities.
But as you spent some good effort on this project and the corresponding technologies, there is a way out. Convert all your Controlller Actions in MVC4 to produce JsonResult and when the angularjs needs data use that, e.g. in $http.get( .
I want to create a site using assemble, yeoman, and angularJS.
The plan is that assemble will handle content and AngularJS will handle dynamic content via a REST API. Are the two compatible, is this a good choice of architecture? My concern is with the templating engine Assemble uses (HandleBars) and whether it is compatible with AngularJS as they both seem to use {{}}. I have only started investigating but am struggling to find examples of people using a similar architecture. How do i scaffold with Yeoman?
I'm doing something similar and to handle the issue with the template delimiters I use the angular interpolateProvider to change the delimiters for angular.
var app = angular.module('app', []).config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('{%');
$interpolateProvider.endSymbol('%}');
});
I'm not sure if you can configure Yeoman to automatically use the new delimiters when running some of the scaffolds, but I hope this helps separate your templates from the assemble templates.
I've done similar for a client for a retail site, to create a basis, custom CMS.
Originally I had the idea that all the items for sale (the data i.e model) would be represented via the data files - a mix of .json and yaml. (At least the client could edit the yaml file with some ease as it is sort of human readable).
A later improvement was to allow the client to edit the stock via a webpage - rather than editing the data files directly - Angular was ideal for this to have a webapp that basically allowed editing the data / upload and transform images, etc via a much nicer interface.
Assemble uses Handlebars (among others) to render templates, so you can use its syntax to escape Angular templates in a .hbs file, this way:
\{{ qty * cost | currency }}
I am currently using the Backbone philosophy which involves dust.js for template style. Recently I came across AngularJS, which extends the HTML syntax with custom elements and attributes.
Cons of Backbone+dust.js environment:
Upgrading components is time consuming.
Module specification and identification is not easy.
If I move my functionality to AngularJS will it be helpful or does it feel the same?
Can anyone explain to me what the major differences among these two libs are, as they seem similar to some extent?
dust.js is purely a templating module. So, it allows the combination of json with a template to deliver html output.
Angular.js is client side framework that allows binding of logic to variables defined in a template (your page).
So, with dust.js you are responsible for deciding when to run the json through the template. Typically you feed in the json on the server (or client) and ask it to render the results.
With angular.js when the model (the json) changes the framework re-renders as appropriate. Triggers for that change could be user actions (such as filling a form in) or it could be due to loading some fresh json from a service.
Typically you would use angular.js if you want a single page JS app (think gmail). dust.js is perhaps more akin to a traditional approach with multi pages with content driven by passing in json.
You could even use the both of them in tandem - server side rendering using dust.js with dynamic client side logic in angular.js.