Ember.JS CLI - Show Preloading Page on Route - javascript

I am new to ember.js and am trying to build a SPA webpage that uses a lot of images.
I am using Ember CLI, and I have one Route. In the route model, I preload the data, as well as preload about 30+ images using RSVP and Promises.
I have a DIV tag in my HBS file that contains my loading screen
<div class="loading-screen"/>
I would like to modify my route so that in the "afterModel" method, I hide the "loading-screen" div tag.
Does anyone know how to accomplish this? I am not sure how to reference the DIV tag and hide it from within the Route.
Thank you.

Related

Tabbed components in React.js HTML include

I am just currently learning React.js and I am trying to work on a simple project that can have some really heavy body content but I have to keep them in one page, so I chose tabbed components as a possible solution.
So what I'm planning is to put the tab contents into separate HTMLs and just include them into the main page hidden until their tab option is clicked, but does this mean that the HTMLs will only be loaded into the app once the tab option is clicked?
Normally I would think that the separate HTMLs would be loaded at the same time the main page is loaded, but using React.js, maybe the functionality is different?
Can someone please clarify this? Thank you very much!
A single page application is generally "loaded" immediately, and the views change based on interaction. So if you properly set up your layout, the content will be interpreted when you load the page.
What you are calling HTMLs is properly called Components. Everything in React is based on JavaScript. You would store your components in JavaScript files that end in .js not .html, and then a JavaScript function would return your JSX Component as its return value, which will trigger the DOM to reload.

AngularJS web application view page source only showing "index.html" contents

I am using AngularJS for web application development. In my application I am using UI-router for routing purpose and yeoman folder structure.
I checked other angular Sites like https://www.amazon.com,https://itunesconnect.apple.com. in these sites view page source are showing the html content used in the page. But in my application it's only showing the scripts added in index.html. I don't know why it's happening in my application. I think this because of my ui-router or folder structure.
How can i make the view page source with corresponding HTML in my application.
Please suggest what approach will resolve this issue.
If I look at the view source for amazon, I can't find any angularJS files and anything related to AngularJS.
Itunes is using AngularJS but if I look at the body tag, there is no much HTML and I can see the ui-view there at,
<div id="view-wrapper" class="flexcol" ui-view></div>
If you use ui-view, the page will be like yours and itunes page. itunes have massive scripts and other items inside the head tag but only few elements in the body tag.
View Source will show the static html whatever loaded as part of initial synchronous request.
And won't show any content dynamically added by asynchronous (ajax) request.
As ui-view is loading the content asynchronously and appending the html dynamically, You can't view the same in the view source.
If you right click on the page in any modern browsers like Chrome, Firefox, IE11+ etc, you can right click and click "Inspect element" to view the dynamically added content.
Still if you want to show the full html in the view source, you need to get rid of ui-view and make all the required html static.

How to add a navigation sidebar and a footer to an AngularJS template without ng-include.?

I'm new to angular development. I have been using a few paid angular admin themes. In all of them, developers have only added ng-view and ng-class attribute to index.html. I just want to know how to add a sidebar navigation and a footer to every page without using any ng-include.
If you do not want to use ng-include, you can put your HTML directly in the index.html. That is called a layout template, which is the view that contains the common elements along your application.
In summary, everything in index.html outside the ng-view element is going to appear in every page (as long as you use any module such as angular-route for routing within the same original HTML document (e.g. index.html)).
I would recommend you to follow the official AngularJS tutorial if you are new to this framework. Also, ng-book by Ari Lerner is a must-read on this topic.

navigation bar in single page app using angular

I've tried to find the answer to my problem with no luck. I'm new to web development and I've been trying to create a simple app using angularjs and bootstrap. There's no much content on my pages, only a couple of inputs and buttons that do nothing.
I placed ng-view in the index.html page as I saw in many tutorials and that allows me to navigate to all my pages. I'm trying to add a navigation bar to all my pages once a user logs in, so I placed another ng-view on my home(page after user logs in), but it seems that angular allows only one view for each app. And also it doesn't allow nested app. If I'm wrong, please correct me (that's what I understood from my Google 'research').
So, my question is: how can I add a navigation bar(or any same html content) to all my pages after the user logs in without copying the same code in each html page?
Btw, I had this working with jQuery, but I don't know how to do it using angularjs
Thanks!
You can use Angular Directive that use a template to create a custom tag and you can use a controller only for this directive. Call this tag to all pages when logging.

AngularJS and Sidebar

I'm very new to AngularJS and I'm trying to figure out the "best practices" method for including the navigation and sidebar.
I'm guessing the approach is similar to Worpdress. I would have a "header" file with content that is displayed on each page, and only call a sidebar (sidebar.html) when the template needs it. At the moment I have a main.html file and I want to include a sidebar.
Should the the sidebar be a separate html file? And how do I call that file when it is need?
Thanks in advance.
Pretty broad question but I'll give it a go.
Angular is built for SPA (Single Page Application). Therefore, you only really need one index page that will have a sidebar + header. Your content will be in separate template files that will be loaded by Angular's $route service.

Categories