angularjs node.js ng-view route-provider

Double ng-view/ui-view in AngularJS, is it possible?

I am developing an app with the MEAN stack...and the question is...

How can I divide the interface of my app?

I have a static page(such a webpage) and an application page, the interface is different but the development that I have followed is...

In the file 'index.js' of my app, where I put all the dependencies and set the . In this file I have set the header and the footer of the static page for not repeat it in all the html files. It is working when I navegate above the static page, but when I am developing the app-page I want to change the main interface.

So, Must I repeat the code? or Can I set directives like ng-show to show each interface in each situation?

There I show you the mockups of my app:

Static: Application:

The body target of my 'index.js' file:

<body>

    <script>
            $(document).ready(function(){
                $('.button-collapse').sideNav();
            });
        </script>
    <!-- The var changeInterface control if we are on main page or app page-->
    <header>
            <nav class="dipu-green">
                <div class="nav-wrapper container" role="navigation">
                    <a id="logo-container" href="#" ui-sref="/()" class="" style="color:white" >
                        <b>R.U. Pino Montano</b>
                    </a>
                    <ul class="right hide-on-med-and-down">
                        <li>
                            <a href="#!/" style="color:white" >Inicio</a>
                        </li>
                        <!--data-activates="reportsDropdown"  dropdown-button -->
                        <li>
                            <a href="#!/news" style="color:white">
                                Noticias</a>
                        </li>
                        <li>
                            <a href="#!/info" style="color:white">
                                Información</a>
                        </li>
                        <li>
                            <a href="#!/team" style="color:white">
                                Equipo</a>
                        </li>

                        <li>
                            <a href="#!/services" style="color:white">
                                Servicios</a>
                        </li>
                        <li>
                            <a href="#!/contact" style="color:white">
                                Contacto</a>
                        </li>
                        <li>
                            <a href="#!/app" style="color:white">
                                Resi App</a>
                        </li>
                    </ul>
                    <ul id="nav-mobile" class="side-nav">
                        <li>
                            <a href="#!/">
                                <i class="material-icons">mood</i>Inicio</a>
                        </li>
                        <!--data-activates="reportsDropdown"  dropdown-button -->
                        <li>
                            <a href="#!/news">
                                <i class="material-icons">new_releases</i>Noticias</a>
                        </li>
                        <li>
                            <a href="#!/info">
                                <i class="material-icons">info</i>Información</a>
                        </li>
                        <li>
                            <a href="#!/team">
                                <i class="material-icons">people</i>Equipo</a>
                        </li>

                        <li>
                            <a href="#!/services">
                                <i class="material-icons">business</i>Servicios</a>
                        </li>
                        <li>
                            <a href="#!/contact">
                                <i class="material-icons">contact_mail</i>Contacto</a>
                        </li>
                        <li>
                            <a href="#!/app">
                                <i class="material-icons">exit_to_app</i>Resi App</a>
                        </li>
                    </ul>
                    <a href="#" data-activates="nav-mobile" style="color:white"  class="button-collapse">
                        <i class="material-icons">menu</i>
                    </a>
                </div>
            </nav>
        </header>
        <main>
            <div class="ribbon">
                <span>BETA</span>
            </div>
            <!-- el controlador se añade a una parte del body-->
                <div class="section">
                    <div ui-view></div>
                </div>
        </main>
        <footer class="page-footer dipu-green">
            <div class="container">
                <div class="row dipu-green">
                    <div class="col s12">
                        <div>
                            <h5>Contacto</h5>
                            <ul>
                                <li><i class="tiny material-icons">location_on</i> Avda. Alcalde Manuel del Valle nº 28</li>
                                <li>41008, Sevilla (España)</li>
                                <li><i class="tiny material-icons">account_balance</i> C.I.F.: XXXXX </li>
                                <li><i class="tiny material-icons">local_phone</i> Tel: XXX XXX XXX</li>
                                <li><i class="tiny material-icons">email</i> <a href="mailto:rupinomontano@gmail.com?Subject=Preguntas%20externas" target="_top">rupinomontano@gmail.com</a></li>
                                <li><i class="tiny material-icons">web</i><a href="https://rupinomontano.com" target="_blank"> rupinomontano.com</a></li>

                            </ul>
                        </div>
                    </div>
                    <div class="col s12">
                        <div>
                            <h5>Desarrollo</h5>

                        </div>
                    </div>
                    <div class="col s12">
                        <h5>Síguenos en</h5>
                        <div id="social">

                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-copyright">
                <span style="margin-left:15%;">© 2018 Developed by </span>
            </div>
        </footer>

    </body>

Thank you in advance!

Solution

As you are using angularjs, you can create a single page application. answering to your qustions

Q: Must I repeat the code?

Ans - in angularjs you should not repeat your code, you maintain common part in one page and from that page you can render to diffrent page. this the beauty of single page application. to create a single page application you need routing. to achive routing in angular js you can use angular router package or you can use UI Router package.

please chack this example for angular router : https://www.journaldev.com/6225/angularjs-routing-example-ngroute-routeprovider

please chack this example for UI router : https://scotch.io/tutorials/angular-routing-using-ui-router

Q: Can I set directives like ng-show to show each interface in each situation?

Ans - you should use routing directive. from these directive you can navigate to different page without reloading pages again again.