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.
Related
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.
I want to create a universal header (and footer) using HTML/CSS/Javascript so that if I update it to one page, it automatically updates on the rest. I also want to be able to choose which link is showing up with the active class on it. Also, I am using bootstrap. Here are some criteria I need to meet:
No PHP
No Server side (must work on github pages)
Thank you in advance,
Albert
You can use jQuery to .load a HTML file:
HTML
<div id="header"></div>
jQuery
$('#header').load('static.html');
Alternatively, you could use iframe to load your static header. See this answer for more information regarding the available techniques.
Maybe try Jekyll, this is a tool to generate static pages, also this is how the githup page handles your own personal page. You just follow the file structure and set the layout properties in your files, then you can use the universal layout (including header, footer etc.) in your page.
Here is a link to Jekyll.Jekyll
I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:
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.
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.