I have an application I am trying to set up as a SPA with AngularJS that hooks into a REST API off of our internal SharePoint site. I am having issues with ng-view and getting any of the views to actually load. Both views are setup as ng-template and whenever it tries to find one, it kicks back a 404 Not Found like it's still looking for a separate page.
Here is the plnkr.
I know that none of the data will load because of this coming from an internal SharePoint list, but the views should at least load something to give us an idea of what is going on.
Edit: I cannot actually answer this since my account is too new, but I needed to move the ng-template script blocks inside of the ng-app div so that they would be recognized.
Just so that this doesn't stay as unanswered:
I needed to move the ng-template script blocks inside of the ng-app div so that they would be recognized by Angular and not loaded in the wrong order compared to the DOM.
Related
I'm having a problem with scripts in Angular 4. Let me explain: I'm building an Angular app that will be included in a greater web application. So my app is only one among other apps inside this greater web application. In my app I need to include some HTML code representing common areas of this web application. They would be the head, header, menu and footer of the app. My app would be placed in the remaining space. Thus, I retrieve these HTML codes, turn them into SafeValue by bypassing sanitizing and include them by using the innerHTML property of some divs. After that I can see these HTMLs rendered with styling and all.
So this is the context. The problem is that the scripts in these HTMLs don't run. Even though they are not removed (you can examine the page's HTML and see the scripts there), they do not run. I need them to run as they are needed to perform some important tasks such as to fill the menu with links, animate menu expansion and god knows what else.
I have already tried to include these HTMLs in the index.html using the document DOM object to replace a div I've put in index.html as a placeholder, but I've had the same problem: it renders, but the scripts don't run. Something interesting is that if I put the script tag that is not running in the index.html directly (hardcoded, not dynamically) it works.
So, the scripts would have the following form:
<script type="text/javascript" src="//some_external_source"></script>
Only a remark: I have no control over these common HTMLs that I receive. I just receive them and have to use them for the sake of visual identity of the web application.
Sorry if it has already been answered. I have been looking for an answer for days now and I still didn't found one (I did found something similar for AngularJS though), so I posted.
This is not the way angular 2 intended such problems to be solved, if you want to divide your app into separate parts like: content, header, footer you should probably take a look at named router-outlets, or transcludion.
But if you want to do this your way, then do this:
#Component({.your metadata..})
export class SomeComponent{
constructor (private domSanitizer:DomSanitizer){
this.domSanitizer.bypassSecurityTrustScript(yourScript);
}
}
Working on MVC5 asp.net website.
I have a "dashboard" page that allows the user to place pre-defined "widgets" on the page. These widgets are simply MVC 5 partial pages (Razor). I really wanted each widget to be "self-contained" so all references, scripts, etc... are within the widget's cshtml file. BUT, the main "dashboard" page also needs certain references to jQuery, bootstrap, etc...
Of course, doing this, I could encounter conflicts, duplicate references (one from main page, one from widget), etc....
Question: What is the preferred method for this scenario? Should references like jQuery and bootstrap be JUST on the main "dashboard" page? What about javascript or jQuery code that is in the widget itself? Should this remain in the widget? If so, will I encounter the issue where it doesn't have jQuery defined (because it's in the parent page), etc...?
Any thoughts on this would be appreciated?
Thanks!
**** UPDATE ****
TO further clarify: If I put the scripts, references, etc (specific to the widget) at the bottom of the widget, then when the partial page is rendered on the main page, the scripts, etc.. are not rendered at the bottom of the main page. This causes my code to act funny because of the order that things are rendered. This is one reason I ask this question. Hope this makes sense. Thanks.
Put the script code and references that are global to the application , that are used everywhere and that are not specific to a widget in the most outer page.
What i would do, is i would bundle all my script references in one place and add that bundle link to the dashboard page, this makes your code cleaner and your page will have less external references thus a better client side performance.
This is the demo is used to build my project:
https://material.angularjs.org/HEAD/demo/
I changed a lot of menus but the page heading and the data stayed the same. I face the same problem as in the demo. The browser does not render the page instantly but it takes some time in the beginning before the elements content is shown.
You can use ngCloak to prevent that. Put ng-cloak on your body tag and follow the documentation.
When this css rule is loaded by the browser, all html elements (including their children) that are tagged with the ngCloak directive are hidden. When Angular encounters this directive during the compilation of the template it deletes the ngCloak element attribute, making the compiled element visible.
For the best result, the angular.js script must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application.
Your question isn't clear! But from what u r facing seems, your one/more service call(s) taking time to fetch data intially which might be making your application slow. Go to network in dev tools and check which service is taking lots of time!
I opened this template and I found that when I navigate from page to another that a progress bar appear and start to load inside the page itself then disappear and the page appear without the page itself reload like normal using of href tag. The URL become like this
http://localhost/devoops/index.php#ajax/charts_xcharts.html
I want to know only how to load a page like this, what scripts I should use ?. If you gave me just an example or a link to an article that would be enough.
Here is the template please test it to know what I mean as I dont know how to describe that.
devoops template
The magic in this template are made by LoadAjaxContent function on line 1136 on js/devoops.js file.
This function was used to: start on line 3361, menu on line 3400, top menu on line 3466 and search field on the line 3475, all in the same file.
I hope you at least know some knowledge of JQuery which in fact was what was used here.
BTW the link does the rest and all templates are in the ajax folder.
I think what you referred to is so called the partial load or refresh partial views.
There's a lot of frameworks out there can achieve things like this.
Check out AngularJS and a module called ui-router
Basically, say you have a page like this:
http://levi-lu.net/#/about
If I'm using ui-router, http://levi-lu.net is the main view, and the part after hashtag (/about) is a route under this view, switch between routes will only affects part of the page (partial refresh).
I have a HTML page that works as a container of different HTML sub-pages/Usercontrols.
I use Ajax get of jquery to load the HTML of the sub page in the container page.
I am using a angular js directive in one of the sub pages.
The angular js directive is not working in the sub page and the potential issue can be that my anguarl js is firing before the HTML of the subpage gets loaded into the container page. And thats why angular js dont see the directive in the subpage it needs to process.
Is there a way to delay the execution of the angular js until subpage gets loaded.
I agree with #m59's assessment, but if you are unable to follow that route you will need to use the manual bootstrapping see manual initialization