Our angular app is designed with a multi-site architecture, where the base URL of each domain varies. Each site requires a unique header and footer to be incorporated, along with custom CSS and links specific to that site.
Is there a way to dynamically include the relevant header HTML and CSS for each site in AngularJS?
I encountered this issue on two separate occasions and tackled it using distinct strategies.
First instance: I implemented a system where the header and footer components were added dynamically according to the site being accessed, along with loading a custom theme for each site
Second instance: We integrated our angular application within our laravel setup and utilized dynamic header and footer content directly from laravel. As a result, we successfully eliminated the need for managing these elements in the angular app. The outcome has been highly satisfactory.
After analyzing your issue, it seems that the best approach would be to export your Header and Footer components as a separate Angular Module marked as "private". This way, you can easily reuse them in any new project.
For instance:
Project 1
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
...
import { YourHeaderModule } from './your-header.module';
@NgModule({
declarations: [ AppComponent ],
imports: [
BrowserAnimationsModule,
BrowserModule,
...
YourHeaderModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
This allows you to utilize your Header and Footer modules similarly to Material Modules/Components.
www.geo-village.com <- Live Example After setting up my main webpage with CSS and PHP files, I noticed an issue with the navigation bar. Despite having a separate PHP and CSS file for the navigation bar items, the Login and Register buttons on the main ...
I'm attempting to develop a photo gallery that emulates the style of (using the Unsplash API -> ) However, the size of the container box does not adjust properly with the photos. https://i.sstatic.net/1PAQF.jpg <div className="imageGrid_ ...
https://jsfiddle.net/gdrkftwm/ https://i.sstatic.net/CTi2F.jpg I have encountered a problem while creating a table from a Json object. There seems to be an extra td being generated, and I'm not sure why. I want the structure of my table to resemble ...
I am looking to create a list of names that are all the same size. How can I achieve this using Bootstrap? <ul class="list-unstyled"> <li> <a class="btn btn-xs btn-warning"> <span >Loren ipsum</span> </a> ...
describe('getEmployeeDetails', function () { var getEmployeeDetails, httpBackend; //2. beforeEach(function () { //3. load the module. module('nodeApp'); // 4. obtain your service and $httpBackend for mocking. inject(fun ...
Apologies for the beginner question. I am looking to incorporate filtering and sorting by name on my webpage. However, I have encountered two issues after attempting to implement this functionality using a factory in services.js: When typing a search ter ...
Hey, I've got this code snippet: So there are two iframes positioned side by side with a specific ratio as indicated in the link provided. My aim is to maintain that ratio regardless of the screen size where it's viewed. The first iframe is named ...
Here is the code snippet: .nav-link-apple { width: 1.6rem; background: 4.4rem; background: url(./Logo.jpg) center no-repeat; } Although the image I added can be seen in inspect on Chrome, it is not visible on the actual webpage. I have tried s ...
When it comes to shaping text inside li elements, I've encountered a few issues. One of the problems is that the float-right divs aren't floating to the top right corner but instead leaving a space at the top. Additionally, the text isn't &a ...
I've been working with reactjs and material ui, but I'm having trouble changing the background color of selected items in various components, like in the SelectField. <SelectField floatingLabelText="Choose a sport" value={this.state.val ...
I've checked high and low, but I can't seem to find the solution! My webapp has a page that is bogged down with data causing it to load slowly. Is there a way to display a loading div while transitioning to the next page? Perhaps something like ...
I need help extracting all image URLs used in a CSS file. Here is an example snippet from my CSS file: sitewrap { width: 890px; margin: 0 auto; background: #ffffff url(../images/bg_sitewrap.gif) repeat-y; } Can anyone advise on how to extract ...
I am seeking guidance on the proper method for achieving a specific functionality. I have a set of buttons, and I would like the opacity of a button to increase when it is pressed. Here is the approach I have taken so far, but I have doubts about its eff ...
I'm stuck on this problem and could use some guidance. My goal is to refresh a user's access token when it is close to expiration. The authService.isUserLoggedIn() function returns a promise that checks if the user is logged in. If not, the user ...
Why is the background image not showing up in the left column? I've applied the CSS background-image to .left but it's still not working. Any suggestions on what might be causing this issue? It seems like a small problem, but it's really bot ...
We, at $webdevcompany, have been exploring the process of transitioning some of our current web applications to a new framework. In preparation for an upcoming conference, we have incorporated iframes into certain pages to enhance functionality. However, w ...
Looking to incorporate multiple divs that will vanish upon being clicked, while also increasing the score by 1 through javascript. Any suggestions on how to accomplish this? ...
I am currently working on a directive with isolated scope that manages all recording activities such as starting and stopping recordings. Additionally, I need it to call specific callbacks in both directiveA and directiveB when recording starts or finishes ...
I'm having trouble switching between loading and sorting the information in the table using ng-click. The functions to load and sort work correctly individually, but I can't seem to switch between the two. It seems like I reset the countries data ...
Within my application, I am utilizing a broadcast receiver that listens for data equal to false in order to toggle a specific class: $rootScope.$on('toggleRangeMode:broadcast', function (event, data) { $scope.isRangeMode = data; console. ...