how to integrate a static landing page with its own design at root route using ui-router

Question

I am working on an angular js 1.x application by using ui-router and have come up with a bottleneck since I am new to angular js ,so please forgive me if I sound silly.

Problem:

I have a main angular js app which has its own css files and script files(controllers,directives 3rd party libraries like bootstrap,angular etc and services files).

Now I have a landing page which has its separate design(it has its own css,scripts and images files).

Now I want to integrate the above mentioned landing page with its own separate files on the root route of the angular js app.

So my question is how should I do that ? , so that the css and scripts files don't conflict with each when I try to visit landing page and the route for the main application back forth.

I have tried oclazyloading the required files for landing page state and the main apps files respectively but they seem to conflict with each other's files.Since from what I think is happening is that the files that are already lazily loaded for the landing page conflicts with the files lazily loaded for the main app when I click on the main app link on the landing page.

Edit 1:

I also tried using angular-ui-router-styles it does the job since it unloads all the lazily loaded files before adding new files but what happens is that on page reload unstyled page occurs and then after few seconds it gets style because the package loads the css files after appending it in head tag

score 1 · Answer 1 · answered Feb 08 '17 at 07:35

Suppose you have index.html in which you have to insert one page then your body section should be like this

<body>
<div>
<ui-view></ui-view>
</div> 
</body>.

Now in your controller file suppose index.js your code should be like this

var myApp=angular.module("myModule",["ui.router"])

.config(function($stateProvider,$urlRouterProvider){
 $urlRouterProvider.otherwise("/home");
$stateProvider
    .state("homePage",{
            url:"/home",
            templateUrl:"site/homepage.html",
            controller:"homePageController as homePageCtrl"
            })
     .state("Dashboard",{
            url:"/dashboard",
            templateUrl:"site/dashboard.html",
            controller:"DashboardController as homePageCtrl"
            })

)}

Explanation: you have to inject $urlRouterProvider service in your config to make by default route to specific state. in this example we make`

$urlRouterProvider.otherwise("/home");

so it will route to url "/home" which is url specified for homePage state. So it will load respective html page of that state i.e homePage.html. if you want other static page to be your default page when your project is loaded,just specify its url in $urlRouterProvider(). Don't forget to inject $urlRouterProvider service. Also in your index.html add all your custom css files if it overrides the boootstrap css files then make sure that add your ids to your html and specify css for that. Hope i have cleared your issues.

score 1 · Answer 2 · answered Feb 11 '17 at 19:26

I did this by keeping the two projects completely separate. When I deploy the projects to my server, I put the Angular app into a sub-directory of the landing page project.

To do this, you need to tell the Angular app that it's running in a sub-directory, and not at the root of the site. At deploy time I have a gulp task modify the <base href="/"> tag in the Angular app's index.html so it looks like this: <base href="/sub-directory-name/">

I use the gulp task so that when I'm developing locally I can run the Angular app from the root, not the sub-directory.

Modifying the <base> tag means you won't have to change any of the URLs in your Angular app to reflect it's new location in the sub-directory.

Finally, my web server (nginx in my case), is configured to serve the landing page at the root, and the single page app from the sub directory.

how to integrate a static landing page with its own design at root route using ui-router

2 Answers2