I'm very sorry If I don't explain myself very well, so here goes. Basically I'm having trouble trying to work this issue out. I am using Yeoman to generate my angular project. I have a header and footer, footer will be static and header will need its own controller. The problem I am having is, I don't particularly want the header to be outside other controllers. Maybe I'm wrong and it's not actually a problem and best practice would obviously be to have the header outside ng-view? This is what I have so far:
<head>
<!-- head stuff here -->
</head>
<body ng-app="dscover.me">
<div ng-include src="'partials/header.html'"></div>
<div ng-view="">
</div>
<div ng-include src="'partials/footer.html'"></div>
</body>
Is this a correct way of including a header and footer outside the MainCtrl? It makes sense to me only because, if I was to create a new controller / page, I'd still have access to the controllers outside it? The problem again is I want to refrain myself from using rootScope and unfortunately this seems to be the only way when it comes to having the header outside the MainCtrl?
I'm sorry for the terrible explanation, but I hope you guys understand. If there is a better way of doing this, please let me know. Any help will be appreciated!
First of all, I would try to rely on the given functionality of AngularJS as possible. There are three ways to implement the header and footer in the app:
ng-include
The reason why you'd like to use it is simplicity and less to code. From docs:
Fetches, compiles and includes an external HTML fragment
So, it simply includes an external chunk of html.
ng-view
This is a default router in Angular (before 2.0) and there is a better option called ui-router.
The UI-Router is a routing framework for AngularJS built by the AngularUI team. It provides a different approach than ngRoute in that it changes your application views based on state of the application and not just the route URL.
It supports features like nested views etc. The main reason to use it would be to separate controllers and scopes of those views. In terms of headers and footers, if you want to have a completely separate logic inside, then go for it.
custom directive
This option should be used in case if you have a logic overlapping in the main content scope and header / footer. Also you get additional perks with it like reusability etc.
So, your choice to pick one, but don't be lazy to search and read (here, here, here or here) before you write.
Related
I'm trying to use nextjs for just a part of my web-site.
The navbar already exists in other frameworks, not even react. i want to use nextjs in a <div id="nextjs_div">...</div>, ie. just a part of my website.
The problem is that nextjs renders a whole HTML page with head and body components. so what I want basically is to delete these components and render just one div that will be mounted in my page.
I tried to modify the page/_document but couldn't succeed.
Do you have an idea of how i can do this.
Next.js is a framework intended to create full pages and most likely not appropriate tool to use for creating a part of a page. You could use just React then.
If you can make an HTML from the navbar then you could insert it into Next.js project.
See Add HTML header to Document.js example
I have a web site of more than 20 pages, all using the same dropdown menu. Currently, each page contains redundant HTML code for the menu, so if I want to change one thing in a menu, I have to change it for all the pages. I am using plain html/css and some javascript for my site. Is there a way to have my dropdown menu all in one file and include the reference to that file for all 20 pages?
I tried using the <embed> element to include the menu, but it did not work out for me since I cannot adequately align it as it leaves a large empty area right below it to allow for dropdown options. Not sure what is the best way to handle that
As suggested by Quetin Veron in the comment, PHP include statements are the best way to deal with it.
However, in case you're not interested in writing backend code, you can do that using JavaScript by parsing a json or an ini file/text in your script and converting it into the required links on the menu.
[Do note that you'll still have to use JavaScript for that]
If you'd not even prefer to use JS (Not recommended), you can use an iframe as the navigation menu
When you do that, add <base target="_parent"> in the head section of your iframe.
And then, in all other pages, add <iframe src="menu.html"></iframe> and replace menu.html with the path to the menu.
I hope this helps. However, please note that this just is a workaround if you wish to use frontend technologies only.
Otherwise use <?php include "menu.php";?> for PHP or for Node with EJS, use <%include "menu.ejs";%>
In my Rails webapp I would like to have a view that only gets its css from a specific css/scss file. I have tried several suggested solutions on here but none to my avail.
However, would I be able to place the example.css.scss file outside of the assets/stylesheets directory and restrict the view file example.html.erb to the example.css.scss styling only for example.html.erb?
From what I understand by reading rails asset pipeline all files in the myapp/app/assets directory inherits its css rules from the application.css file and as well the corresponding css file when the controller is generated creating a view file, css file, etc. etc.
I've created a webapp using Ruby on Rails. The app is almost done and is staged. I had an idea that a landing page would be a nice opener to the webapp.
My goal is to create a landing page for webapp. The landing page consists of a background image with a text centered link, which I would like to link to the home page of the webapp and not receive any styling from the application.css file.
Basically I want this view file to have nothing to do with the application.css file.
Thanks in advance.
While there may be reasons to use a totally different css file that's not part of the asset pipeline (e.g. landing page working while rails is restarting, keeping landing page lightweight, etc.), my guess is that you're more motivated by getting something to work.
I'm assuming you've got styles for most of your app that would conflict with the landing page, so if the styles from app apply also to the landing page, the landing page looks funny, and vice versa. So my guess is that you're looking for a way to have some styles apply to the app, and other styles apply to the landing page.
For this, I would first of all bypass your regular layout - see bypass application.html.erb in Rails app
Then, I would update your regular layout to somehow indicate that it is the app and not the landing page. There are any number of ways to do this, but I might do the following:
application.html.erb:
<body class='app'><!-- etc. -->
landing_page.html.erb:
<body class='landing_page'><!-- etc. -->
Then, in your scss files, update it thus:
application.css.scss:
body.app {
/* All your regular app styles */
}
body.landing_page {
/* All your landing page styles */
}
Of course you can split those into multiple files, etc..
TL;DR
Unless you're running into loading time issues or you have some other reason why you really really don't want app styles loading for the landing page, then just put it all together but scope the styles so that they don't apply when they shouldn't.
You are already working in the Rails domain, so it would probably be easier to continue to stay in that domain.
In my opinion, the best/easiest thing to do would be to create a welcome controller. Create an empty index action in the controller and a view for that action. The view you are creating seems rather simple, so you can just prefix the class/id names (which don't seem like many) with welcome_ and this will differentiate them from your normal class/id names. The link for the homepage text will point to the index action of that particular controller.
Then you can create the root route in your routes.rb file to point to welcome#index.
I'm using Bootstrap's single page view template, specifically this one:
http://www.bootply.com/85746
I'm at the point where I have almost 500 lines of code in my view and I'm going to have many more.
Is there a way to create partial views with Angularjs where every section in the view will render from a partial view? I understand that I can only use one ng-view directive in a page so using it is not going to work. I could not find any solution for it on the web.
Thank you,
Mila
Try ui-router, which is a great solution to flexible routing with nested views.
I have to create Joomla website. I am PHP programmer, but new to Joomla.
I have spent a lot, reading tutorials and other staff.
The website is very simple, it is visit card for restaurant.
I have installed Joomla 2.5. Spending two days I have managed to do the following:
- create menu
- create multi language site (2 languages) with language swicher
- create simple static pages (articles)
- create one page as contact
- create simple template just for my website
However, I cannot do some things and I have not found any answers in tutorials or google.
If you open this file http://img1.uploadscreenshot.com/images/orig/1/2621034793-orig.jpg you can see images with three different pages on the site:
1) Article with three images on the right.
Basically, I do not know what is the best practice to create article with some custom HTML in it (in this case these are images). For example, i can create table with two columns - one for text, another for images. Without Joomla I would create two divs, but how this can be done here??? Also with custom html I need to do the same for each language - I need to add images for each language, I do not like this. I really have not found any solutions for this. Do you have some suggestions?
2) Article with three buttons on the right side. This is article on landing page.
This is probably the same question - how to create article with some custom HTML in it (in this case these are three buttons - links to pages inside the website)? Again I can create table with text and buttons, but this should be done for each language. Is it a good practice? Do you have some other suggestions to create article with three buttons on the right side? Maybe I can create some custom module, but this sounds strange.
3) Contact page with google map.
I have create contact page with contact details. This is another question, I would ask other time.
Hello Renathy and welcome to Joomla!
1) You can of course insert divs in the editor and style them with floats; but as you mention this is pretty bad for translation, and allows the user to easily break the layout.
You have the following options:
1.a)
Joomla 2.5+ supports an article image and thumbnail that you can specify in the Images and Links group for each article. Quite some work to extend to 3 images, you would need to write a plugin (or do a nasty core hack) and override the view; also it's not well documented. There is a discussion here about it: Add additional images to articles in Joomla 2.5
1.b)
Add the extra images as above with the plugin. Then use a module for displaying the images instead of the view override.
1.c)
Use a custom image management solution to link images to an article, then a plugin to display them. Easier, but still a lot of work. I have done this on one site and worked fine, although I would change a lot of code now. As far as I know there are no extensions available that will do this.
All three solutions allow you to use proper floating of the contents using divs floats responsive as appropriate, and will isolate the layout of the content from the images, thus obtaining a solid environment for the content editors, and easy translation (although, if you go with 1.a) or 1.b), I strongly advise you to use a proper translation suite such as Falang or JoomFish (Falang is a different port of Joomfish from the old 1.5 version)
2)
You will address this as above, with a module.
Create in your template a main
<div class="content-box">
<div class="content-main"> here you will place your component's output.</div>
<div class="content-sidebar"> here you will output a new module position, name it "article-sidebar"</div>
Then style it like this:
div.content-box {
/* here you need a clearfix choose one here: https://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best/211467#211467 */
}
div.content-box div.content-main {
width:70%;display:inline-block;float:left;
}
div.content-box div.content-sidebar {
width:29.99%;float:right;
}
div.content-wide div.content-sidebar {
display:none;
}
But you may not want this on all pages, then you can deal with it programmatically when generating the template.
The idea is: in your template output, where you are writing
<div class="content-box">
instead add a class conditionally when your article-sidebar contains something:
<div class="content-<?php
if ($this->countModules("article-sidebar")==0)
echo "wide";
else
echo "box";
?>">
This will dinamically change the class of the div, so you only serve 1 css.
At this point, create a module and choose to display it "Only on selected pages" .
3)
When you want to change a view, never change the file in place. Instead copy all the view's php to a folder under your template's folder / html/com_contact/contact. Even if you're changing a different layout, you will still need to copy there the default.php.
Then change it inserting the google maps.
A final consideration. You should refrain from editing core files. Joomla sometimes issues security updates, and applying them will be painful. Good luck with your site.