Is it possible to have user-defined templates say based on user-defined parameters from the server - and then have a component take them in as its template?
These templates are user-specific and not available during the build of the angular app.
I was thinking of loading this templates up-front before the entire angular app loads but not clear on how to achieve this using angular-cli.
any ideas?
thanks
Related
Looking for a suggestion of a good way to create an abstract directive in one module and load its template on different modules.
The scenario is the following: I have a web site split into two (web portal and backoffice) which are two different deploys. Both share a lot of modules and the layout but have different functionalities.
I would like for the menu directive and structure to be on a core/common module, but its template should be loaded by the modules, so that the core module doesn't need to know what specific deploy is being used!
I thought about using $templateCache on each module configuration process, but does anyone know a better option for this?
Yes, the only option to keep templates and the rest of the application in different JS bundles is $templateCache. Other options (directive inheritance or requireing and bundling template HTML files with Webpack) will likely result in monolithic bundles.
There's no separate template unit in AngularJS, so in order to be included in module, templates should be defined with $templateCache.put.
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
i am building a single page application using node.js and angular.js.
I wonder if there is any advantage on using a template engine like jade or ejs since angular has the ng-include directive which let you inject html partials inside your main html page, and of course with angular you have two-way data binding. Any thought on this?
It’s good idea to use Jade (or another template engine) for all html pieces in your project even if you’re creating SPA with AngularJS. Jade allows you to generate templates easy and fast. Templates will be neat and easy-to-read.
As for include directive, stick to the following rule in Angular+Jade projects: use Jade’s include for reusing pieces of html when you create static templates, use ng-include for dynamic purposes when partials depend on the App’s state.
How can i add multi web part sharepoint which used angularjs module?
I have web part in which i have used angular the problem is when i want to add this web part for several times in a page i don't know how to separate angular modules name? when there is only one web part added in the page it works properly but when there are more than one problem start
i guess i should create dynamic names for modules in server side am i right? is there any other way?
I used angular.bootstrap.
This resource helped me to figure out how to load different angularjs html+js files in 2 different content editor webparts. I also made sure to load angularjs only once on the page.
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( .