Attaching individual css and javascript file with partial view of angular route - javascript

I have tried many different approach but nothing is working as I expected. I've few css and javascript files, that I want to load along with partial associated to my Angular route. Is there any way I can do this? There were some solution around on the web, but nothing seems to work as per their instruction.

Related

Loading js file in nested partial

Forgive me for my lack of MVC knowledge - still in the process of teaching myself.
Basically started a new job which they primarily use MVC, learning curve is steep. Iv'e been tasked with calling a Javascript file when required in a nested partial view, Whilst I'm comfortable with the former, I seem to be having trouble with loading the script. I've tried sections which didn't work to well and I believe cannot be done.
So I have:
Index.cshtml > Loads in AddressList.cshtml > which loads in Address.cshtml
When the address.chtml partial view has been loaded, I'd like to load the js file.
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?sensor=false'></script>
This is very trivial to some but never the less cannot seem to get it to work.
The task at hand is part of a much larger feature which I've built and works great when loading the js file in the main layout view. Circumstances have changed and now the js file needs to be moved.
Any help greatly appreciated.
Javascript and PartialViews don't work well together, since you can use your PartialView multiple times and, if you add your PartialView twice, the script will also be.
One way to get around is moving your script section to your main view, which calls your PartialView later in the process.
Or, if you don't mind on using third party frameworks, there is ForLoop HtmlHelper which allows you to use javascript inside a PartialView and control the scripts to be added correctly.

Print AngularJS application

We have a complex AngularJS-based application with different loaded stylesheets. I need to print the separate page with nice styling, exactly how it looks in the browser, plus several elements need to be opened via ng-show for the print.
Looking for potential existing solutions, I've found the following AngularJS directive: https://dzone.com/articles/building-simple-angularjs. I had to slightly update it to load css stylesheets. Eventually, when I click the Print button, I can generate the huge HTML file with css references in <head/>. Being posted directly into browser, it looks more or less nice, but:
Ng-show /ng-hide are fully ignored, and that is expectable. How to deal with it?
Mostly important - when I try to Ctrl-P this HTML, it doesn't looks nice in preview at all. What I'm doing wrong?

How to move .js from View to Separate asset - Ruby On Rails

This is a seemingly easy problem but it might not be. I am new to rails. As such I am still learning the in's and out's of the asset pipeline. I have an understanding of the assets/stylesheets and can get those to edit my view. However, I cannot get my assets/javascripts to work. The js does work if it is embedded in the view however.
I was hoping someone could take a peek at the source: https://github.com/Brownkyle219/clemson-sustainability
and you can see it functionally here:
http://clemson-sustainability.herokuapp.com
(I am aware that there is a routing issue when you click on the other tabs). Ignore the google charts stuff. My main focus is at the bottom of index.html.erb about the slider. All I want to do is move that script to a separate file in assets/javascripts. Any advice would be great! Thanks
You need to wrap your JS in $(document).ready(function({ yourCodeHere })
Otherwise, the JS gets executed before the elements they target are actually loaded and will not work.

How to decide when to use ngView or ngInclude?

Just trying to understand the exact difference in approaches of using ngView and ngInclude in AngularJS. When would is it correct to use one over the other? Thanks.
ngView works together with routing, and is mostly essential to an angular SPA. It's normally used to include the main content of your site, the bit in between the header and footer that changes every time a user clicks a link. Its integration with routing means changing the ngView content changes the controller too (depending on your configuration).
ngInclude is a general purpose include, you may not even need it. You'd sometimes use it inside a view to avoid repeating yourself, in the cases where several views need the same code included.

angularjs "node is undefined" error in Firebug when moving templates into main html file

I'm working on a landing page that is written largely with Angular JS 1.0.2. Upgrading to a later version may not be in the cards, at least not right away. It's working fine, but we're trying to do a bit of optimization. For a bit of background, we have a number of directives set up for various modal windows and other custom elements on the page. These use tempateUrl parameters and grab them from separate html files which contain all of the necessary HTML. Quick and dirty example as there's way too much code for me to post a full one:
Landing page html:
<div help-menu />
Angular directive:
module.directive('helpMenu', function(){
templateUrl: helpMenu.html,
controller: ...
link: ...
});
Where helpMenu.html contains simple html for the element in question.
This hasn't been a problem, but the number of html files keeps going up and I'd like to merge them into the main html file for the landing page to reduce the number of GET requests. Doing so basically involves snipping the HTML from each of the files and placing it at the end of the landing page html file (while wrapped in a div with an id to grab). The directive is changed to use:
template: $('#helpMenu')
This works just fine if helpMenu contains no angular code. However, I get a "node is undefined" or "linkNode is undefined" error in Firebug if I the html contains any angular code, ie, an ng-repeat, ng-show, etc. The odd thing is that everything works as expected despite the error, but I'd really like to get rid of it regardless.
I've tried a few ways to fix this (attempting a $compile at various points hasn't helped), but with no success, and there is very little information on this particular error. I'm baffled as to why it's a problem when the html that comes in will be identical in both methods. Perhaps template and templateUrl handle things differently?

Categories

Resources