I'm working on a project with Yii2 and Angular. The structure of the code is as follows:
<html ng-app="myApp">
<head.../>
<body>
...
<div class="body-content"> MAIN CONTENT GOES HERE </div>
...
</body>
</html>
The page contains a header and a column on the left and a center area which is rendered inside the .body-content div. Now, as you can imagine, I have some buttons in there, some other angular widgets, etc..
Yii2 has a really cool feature called renderPartial that will re-render a view file without wrapping it again in the <head> and <body>. I use that to update the content of my main area, by calling that function, getting the response with jQuery and replacing the content.
Now, that causes all buttons that where binded with Angular to stop working (I'm guessing why). My question is: How can I make Angular re-run or re-bind all my (new) DOM elements to their actions?
You would have to use the manual bootstrap way (explained in https://docs.angularjs.org/guide/bootstrap) for angular but doing that would cause a memory leak over time as angular add listener on DOM that you destroy and is not aware of it's removal, so they stay, and so does for the controller / directives / binding and other features that are referenced by your code.
Is yii2 could be wrapped into an angular directive?
I am not sure if I am getting you right - you use a frontend framework AND a backend framework to control your frontend, the latter one deliveres new DOM content you inject into your HTML?
As far as I got it, Angular is best in handling everything while getting the data (be it from the backend in JSON or other format of your choice), NOT new DOM elements.
Angular itself binds to whatever DOM nodes it is added to, handles the content and dependency injection and thus displays your data. In your case the backend PHP framework seems to hand in new DOM elements that Angular thinks of "Hey - you don't want me to be adding them? fine, then I don't." and breaks.
Maybe there are solutions for this specific case, but if I were you I would rethink the concept in terms of "Where do I want my views/templates to be rendered? What part of the whole is responsible for what?" Using two different frameworks, let alone languages, to do the same job and interfering with one another would make a mess I wouldn't want to clean up.
So if you like this Yii2 feature and want to make it work, fine - but in that case - what do you need angular for? And if you'd rather stick to Angular you just have a backend that handles data and hands it back to the frontend to do it's job with it.
Related
Before learning AngularJS I learned jQuery ( + mustache for templates). Now It is difficult to understand how to work with AngularJS...
I am trying to show modal window for user. Early (jQuery) I created a template, parsed it and appended it to the DOM.
In AngularJS, if I understand correctly, there are more than one way to do it. I can use ngView directive, ngInclude directive, ngBingHtml directive, create custom directive with 'templateUrl', and may be something else...
But I dont want to load templates from server on demand, I want to create script section with type='text/ng-template' and use it.
First of all I cant understand what the right way to choose, second is how dynamicly change templates (I need put template into directive, work with template, delete template, but not directive... yes?)
Thank a lot.
I have searched ALOT for this question and didnt find an answer,
I designed a complex HTML template and I tried to make a Joomla template based on it
I found the whole process time consuming and I cant get exactly same result as I wanted, also even If I do this I dont have a user friendly Joomla panel and for changing every module and component the Admin should know a basic HTML understanding to edit my tags and doesnt mess up my code
so I realized what If I use modern Joomla template instead with a user friendly panel
and bring the content to the page and rewrite the whole DOM via Javascript like this
1)first make variables and store the content on the rendered template
2)$('body').innerHTML = "" (make the DOM empty)
3)$('body').innerHTML => rerwrite my structure using variables I stored
then every element is exactly the same and my css, js files do the rest
Is it usual to do this way?
whats the problem with this method?
Thanks
In an ASP.NET Core app, I've a dashboard with widgets. Every widget has its own PartialViews, so the full page is generated in the following way:
-Layout.cshtml
--Dashboard.cshtml
--- Widget1.cshtml
--- Widget2.cshtml
Following best practices according to fast page load times, JavaScript is loaded before the closing </body> tag in Layout.cshtml. After that, there is a section for custom JS, which I commonly use to initiate objects on page load. So this section looks like this:
<script asp-append-version="true" type="text/javascript" src="~/clientscript/page.min.js"></script>
#RenderSection("Js", required: false)
In my Views, which are using the Layout.cshtml as layout (in this example, its Dashboard.cshtml), I can define a section like
#section Js {
// Js Code here
}
which is rendered after the script tag containing all script files. So I can be sure, that all dependencies like jQuery or custom classes are avaliable here.
But I also need to do this in widgets like Widget1.cshtml for example. The problem is: I load the PartialView Widget1.cshtml in Dashboard.cshtml. In the documentation is written, that this is not possible:
If you declare a Razor section in a partial view, it will not be visible to its parent(s); it will be limited to the partial view.
But that's exactly what I need. Is there a way to work around this limitation? Shortly, the goal is to inject JavaScript from a PartialView to the LayoutView, with an regular View between them.
The only way I know is the usage of setInterval() with a low interval like 50ms, and check there if jQuery or some of my custom class is defined in a loop until they are. Its a JS solution yes. But it makes it possible to include the script-block directly in the PartialView without making usage of sections. It fits well when you depend on a single variable like jQuery.
But I need to wait for custom classes to get loaded. They're included after jQuery. So writing a generic function like waitForTypeLoaded(type, callback) is not possible. It would cause me to write always the raw setInterval() code, which seems not a smart solution for me.
Something I did to get my scripts to run after Jquery was done loading was in my Partial Views and View Components I used the "DOMContentLoaded" event to load all my jQuery js script after the page was done loading. That way I could defer the Load of jQuery and Still Have jQuery code on my pages.
<script>
window.addEventListener('DOMContentLoaded',
function() {
$('body')....
});
</script>
Your problem can be solved as mentioned in my answer to this post:
How to render scripts, generated in TagHelper process method, to the bottom of the page rather than next to the tag element?
To sum up, you can create a pair of tag helpers, one that can be located in a partial view and just stores its content in a temporary dictionary, and the other that renders the content at the appropriate position (e.g. in the layout page). I use it extensively to render small dynamically created scripts as the final scripts of the body.
Hope it helps.
Honestly, I would make one step back and look at architecture once again if you have such dilemmas.
Why not add to required scripts which will be used on a couple of views/partial views to the main layout? In ASP.NET MVC you can use bundling mechanism (or you can write our own) - minify and bundle them with other required. It won't be heavy...
Your approach looks like unnecessary complicated.
I am having a problem with angular js.
The thing is, I have bought a html template on the web which has custom javascript that is triggered on document.ready (contains a lot of code) and it does something with the GUI to set it all up and running.
As i switch my routes the the initial logic of the document.ready that was done for the elements inside the ng-view is lost and GUI looks awful.
Can someone tell me what is the best way to solve this issue?
When AngularJS changes the view/you switch your route, it will execute the associated controller-function. Therefore, you could call your initialization code from the controller.
I have jQuery based template from themeforest and
i building on this ASP.NET Web Application.
But i have a problem, when my javascripts files
from template are included, my asp.net things
don't work how should, eg. dropdownlist events
not rising... When i comment javascript templates
file then everything works fine.
Someone can help me solve this?
Thanks,
Many jQuery UI elements (dialog, for example) are rendered at the end of the BODY tag. This means their contents are moved outside the FORM tag, and are thus ignored by ViewState. This will prevent their associated events from being triggered (and will prevent their updated data from making it back to the code-behind at all).
If you use firebug to examine the rendered HTML, you should be able to confirm whether this is the root cause of your problem.
If so, see this SO discussion for a resolution / workaround. HTH