在AngularJS中加倍ng-view/ui-view,有可能吗?
Double ng-view/ui-view in AngularJS, is it possible?
我正在使用 MEAN 堆栈开发应用程序...问题是...
如何划分应用程序的界面?
我有一个静态页面(这样的网页)和一个应用页面,界面不同但是我的开发接下来是...
在我的应用程序的文件 'index.js' 中,我在其中放置了所有依赖项并设置了 .在这个文件中,我已经设置了静态页面的页眉和页脚,以便在所有 html 文件中不再重复。当我在静态页面上方导航时它可以工作,但是当我开发应用程序页面时我想更改主界面。
所以,我必须重复代码吗?或者我可以设置像 ng-show 这样的指令来显示每种情况下的每个界面吗?
我向您展示了我的应用程序的模型:
静态:
应用:
我的 'index.js' 文件的正文目标:
<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>
提前致谢!
当您使用 angularjs 时,您可以创建单页应用程序。
回答你的问题
问:我必须重复代码吗?
Ans - in angularjs 你不应该重复你的代码,你在一个页面中维护公共部分,你可以从那个页面呈现到不同的页面。这就是单页应用程序的美妙之处。要创建单页应用程序,您需要路由。要在 angular js 中实现路由,您可以使用 angular 路由器包,也可以使用 UI 路由器包。
请检查 angular 路由器的示例: https://www.journaldev.com/6225/angularjs-routing-example-ngroute-routeprovider
请检查 UI 路由器的示例: https://scotch.io/tutorials/angular-routing-using-ui-router
问:我可以设置像 ng-show 这样的指令来显示每种情况下的每个界面吗?
Ans - 你应该使用路由指令。通过这些指令,您可以导航到不同的页面,而无需再次重新加载页面。
我正在使用 MEAN 堆栈开发应用程序...问题是...
如何划分应用程序的界面?
我有一个静态页面(这样的网页)和一个应用页面,界面不同但是我的开发接下来是...
在我的应用程序的文件 'index.js' 中,我在其中放置了所有依赖项并设置了 .在这个文件中,我已经设置了静态页面的页眉和页脚,以便在所有 html 文件中不再重复。当我在静态页面上方导航时它可以工作,但是当我开发应用程序页面时我想更改主界面。
所以,我必须重复代码吗?或者我可以设置像 ng-show 这样的指令来显示每种情况下的每个界面吗?
我向您展示了我的应用程序的模型:
静态:
我的 'index.js' 文件的正文目标:
<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>
提前致谢!
当您使用 angularjs 时,您可以创建单页应用程序。 回答你的问题
问:我必须重复代码吗?
Ans - in angularjs 你不应该重复你的代码,你在一个页面中维护公共部分,你可以从那个页面呈现到不同的页面。这就是单页应用程序的美妙之处。要创建单页应用程序,您需要路由。要在 angular js 中实现路由,您可以使用 angular 路由器包,也可以使用 UI 路由器包。
请检查 angular 路由器的示例: https://www.journaldev.com/6225/angularjs-routing-example-ngroute-routeprovider
请检查 UI 路由器的示例: https://scotch.io/tutorials/angular-routing-using-ui-router
问:我可以设置像 ng-show 这样的指令来显示每种情况下的每个界面吗?
Ans - 你应该使用路由指令。通过这些指令,您可以导航到不同的页面,而无需再次重新加载页面。