navigation bar in single page app using angular - javascript

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.

Related

Can I nest an web app in another web app?

At the moment, I need to create an app that will dynamically change it's sections
This is the app layout.
The main section would be an independent webapp, because it would keep changing it's contents.
The nav bar it's basically a set of images that work as buttons and change the contents of the main section.
The side bar have some parallel uses, but it can work with the "main webapp" (the one that contains all sections
That's why I think having a nested webapp would be the best solution. I tried google site but since I can't really control it I dropped the idea.
But it's possibly to achieve that? At the moment the app need to refresh the whole page to apply even the smallest HTML change
Im a little confused, You could have that part dynamically generate information in the main section and everything else be static.
And the web app will update anytime you change the code weather its a small html changes or logic changes. unless its deployed and you dont have sync on, then you need to manually sync it to show the changes.
Update:
I solved my issue stacking divs and changing the active one by hiding the others.
I also using an include with my templates, in a way I can split my HTML code in a main template.
I use two types of includes:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
And
function includeTemplate(template) {
return HtmlService.createTemplateFromFile(template).evaluate().getContent();
}
one used to include static HTML and other dinamic HTML (templates)

React - Multi HTML Pages

I'm building an application using React. My problem is that I have multiple HTML pages and I want to open one of them when I click on a button. But when that HTML opens up, React does not render that page although. What should I do to resolve that?
I've already seen React Router but it seems like to be for the same HTML page. I want to open a different HTML page not to render on the same page at different times.
I tried to do this in the HTML I open when I click the button
<script src="../src/app.js"></script>
but it does nothing.
tl;dr - A button opens a new HTML page. How to make React render that page?
If you really need to do this, then you need to reformulate the question. You might need to add iframes of external static html files.
This is something that was answered here correctly, so I won't duplicate.
Render HTML inside a React app using iframe
Hope this helps!

SEO problems using jQuery load()

I have created a modal window with load function with links inside the modal window. The crawler is unable to read and index those links. I need a way to make crawler index those links.
I see websites using angular js ranking such as https://www.dailyobjects.com/designer-cases (This website has a similar modal window) ranking on top in Google Search and I google never reads or index angular js made pages.
They managed to crawl it, so there must be a way to crawl a javascript modal window which I have made.
How can I achieve this?
Angular uses Server-Side Rendering(SSR) to fix SEO issues. Just read more on this.

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.

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