In my app I have ui-router set up, and in one particular state i.e. "MAP" I want to load a 3rd party Javascript file.
Right now I have it as part of my Index.html at the bottom of the page. But i thought it would be better practice to only load this in view which needs it.
What is the best way to include this script in only specific partial views ?
Turns out you can simply include the <script> tag in your partial. Works perfectly fine for me.
Also, if you have a window.onload function, you can replace it with a self invoking function like
(function(param){
alert("partial running");
bla bla....
})();
so it will run when the partial is pulled up.
Related
How should I proceed when inserting app in a view.
I have a template document the has one app already to control page content. I want to insert other apps in the view. My first app is getting called in the html tag and it is controlling different sections of the page except the view.
Views are another html document that is loaded into a section. Can this other html file contain another app?
I have been trying with include but the app isn't working.
Exemple of code:
<!DOCTYPE html>
<html ng-app="mid" lang="fr">
<nav ng-controller="navCtrl"></nav>
<main><ng-view><ng-view></main>
<footer ng-controller="navCtrl"></footer>
My view would contain :
<div ng-app="my-second-app" ></div>
<div ng-controller="second-app-Ctrl"></div>
Would that work?
When you include your 'My view' to your example code you are nesting AngularJS applications. You can't include another app as view. AngularJS applications cannot be nested within each other.
take look here, and here
It is possible if you use the manual angular bootstrap function, but I find it hard to believe that this is what you want. You don't need to specify another ngapp in the injected view to let him know he is within angular context, he already knows that, anything below the original ng-app you specified is automatically in angular context.
Using another angular app within an angular app should only make things complicated and probably unnecessary especially if you are new to angular.
Any way keep it simple , try using the developers guide in http://angular.org , they should give you a sense of how to start.
I read about angularJS routing. I want to implement it in my web app, but unfortunately I have a rather difficult situation changing to routing now I think. This is how my app works now (and I know it's probably not the way it should, but it does work):
I have one controller for the whole app.
The view is built with some divs, one of which is a menu div. The others are 'partial' views as angularjs calls them I guess. But the problem I see here is that two of my partial views can be shown at the same time (page is built like this, partial view only takes a portion of the page for itself).
So what I am doing is: I click the button on the menu -> one partial view shows up (ng-show), then I can click something on this partial view to get the second partial view opened on the same page (menu and first partial must stay the way they are).
At the moment I include partials within some divs with php include (which is I am sure the wrong way) and the divs have ng-show on them so that nothing is shown on the beginning. Then I manipulate all the clicks in the menu with setting ng-show parameters of all my partials (views). So if one button is clicked I hide all the others (with ng-click and a function inside controller). But this is tedious work and not the angularJS way and that is why I am asking this question here.
Example of my included partial (stripped of all unnecessary css classes etc):
<div ng-show="showNames">
<?php include_once("views/AREA1/names.php") ?>
</div>
And names.php has for instance just some few elements with ng-repeat and other angularJS directives… I have many includes like that and they work with just ng-show manipulation very well. But now that I grasped some of the AngularJS concepts I see that I made a mistake…
To sum up: how can I use angularJS routes (with ng-view perhaps?-not necessary) to show views within my web app? (taking into account the situation that I have described above). I just want user to be able to know on what "part of page" he is at any given moment.
EDIT: I went trough this and I reckon I could work it out: I need a structure similar to the one in this example 2.1 Online Demo, but furthermore I need to be able to click something on ng-view which should open another view (first one should stay in place). Any idea how to accomplish this?
By using routing feature in AngularJS, the html content of ng-view will be totally replaced by the new partial. You should not use ng-view for such a purpose like showing multiple partials at the same time.
But you can think about mix the ng-view and ng-include.
Let's say, we click each item on the menu, ng-view changes the sub-partial, you can have ng-include in your sub-partials which we can all it here like sub-sub-partial.
Try reading ng-include
AngularJS has ng-view which would contain the main theme of current context, rest of the UI elements are all managed by ng-include. Routes also work in sync with nv-view.
If your view requirement are complex look at ui-router component that supports various combinations.
I use ng-view to pull in a partial to page. After that I would like to load in another partial to the page that would be right next to the initial partial that was brought in.
How would I bring in another partial from a angular controller?
Because of how ngRoute was designed, you can only have one ng-view per ng-app instance.
However, it looks like you are looking for ng-include since the routes do not seem to come into play.
Otherwise, to work around the issue of URL routing having only one template, you have two options:
Use ui-router Note: Under heavy development, may introduce breaking changes.
Define and use two angular applications which can reuse the controller/service code. However, then the two applications will not be able to share state.
I want the users to not be able to view the partials directly when accessing their url in the browser. For example if my partial view is located in:
/partials/myPartial.html
I can still directly access it and see the odd markup. Is there a way to prevent it and make the partial views only available through angular? Thanks.
I put a <script> at the top of every view partial that checks if the variable containing the main app Module exists, if not redirect to index.html
If in app.js the appModule is defined in this way:
var appModule = angular.module('myApp',["ngRoute","ngResource"]);`
At the top of the partial insert:
<script type="text/javascript">
if(typeof appModule === 'undefined'){
document.location.href="index.html";
}
</script>
Well, not really.
At the end of a day a browser needs to be able to access a partial to download it. If a browser can do this your users will be able to do so as well. You might eventually make it a bit harder for them to hit partials directly (for example to by configuring your server so it only responds to request with a certain header and configure $http to send this header on each XHR request).
The other possibility is to pre-load partials up-front as described here and not expose them via HTTP at all (actually this is a good practice for production deployments anyway).
Otherwise it is hard to propose a meaningful solution without knowing what is the exact problem (functionally speaking) that you are trying to solve.
I've making use of AngularJS Partial templates to create a dashboard. There is a listing view and when you click on an item, it switches to an Items-Detail partial.
Inside the Items detail partial, I'd like to show some charts via RGraph. However, for the life of me, I can't figure out how to do this.
I can't seem to invoke javascript from inside the partial html. So I think I need to do it in the controller, or maybe create a directive?
I'm pretty new to AngularJS so my understanding is still very rudimentary and likely misguided.
AngularJS ("jqlite") doesn't support <script> tags inside partials.
Include jQuery on your page, however, and it should work. Note that jQuery must be included before AngularJS.
See also AngularJS: How to make angular load script inside ng-include?