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> rupinomontano#gmail.com</li>
<li><i class="tiny material-icons">web</i> rupinomontano.com</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!
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.
Related
Here i am trying to add one page controller adding to another controller using same module in angular js. how can i add ctrl2.js menu to inside ctrl1.js.please help me currently i am using angualrjs one .. i am struck in this issue please give me a solution ...
menu.html:
<div id="left-top" ng-controller="two">
<ul class="nav navbar-nav navbar-right menu-top-left col-sm-12 col-xs-12">
<li>
<a href="#/">
<i class="material-icons mobile-menu-icon-color">exit_to_app</i>
<span class="notification mobile-menu-icon-color">Logout</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons mobile-menu-icon-color">person</i>
<span class="notification mobile-menu-icon-color">{{name}}</span>
</a>
</li>
</ul>
</div>
ctrl1.js
var app=angular.module('board',[]);
app.controller('one',function($scope){
alert("ctrlone');
});
ctrl2.js
var app=angular.module('board',[]);
app.controller('two',function($scope){
});
<div ng-controller="firstController">
<div ng-controller="secondController"></div>
</div>
if you want to use common $scope(your data) for ctrl1 and ctrl2, you need to create service for this, and after inject service to ctrl1, and ctrl2
I have a HTML code as mentioned below with UL tag, and I wanted to click the UL tag Manage -> Channel using Selenium Webdriver. To do that I have written the below code in java but it is not working, infact no error is throwing but page is getting opened. Please help.
HTML
<ul class="adb-primary_nav--items adb-layout-default">
<li class="adb-primary_nav--item">
<a class="adb-primary_nav--link en" href="../">
<img class="adb-primary_nav--image" src="https://d33na3ni6eqf5j.cloudfront.net/marketplace_logo/img1474715110198223685.png?7ef040694410736c21450bea763bb661" alt="Vodafone Group">
</a>
</li>
<li class="adb-primary_nav--item">
<a class="adb-primary_nav--link" id="myapps" href="../myapps">
MyApps
</a>
</li>
<li class="adb-primary_nav--item">
<a class="adb-primary_nav--link" id="shop" href="../home">
Marketplace
</a>
</li>
<li class="adb-primary_nav--item"><a class="adb-primary_nav--link" id="developer" href="../cms/home">Developer</a></li>
<li class="adb-primary_nav--item js-drainable-menu">
<div class="adb-context_menu adb-js-context_menu">
<a id="manage" class="adb-context_menu--trigger adb-js-context_menu--trigger adb-primary_nav--link admin-item selected" role="button" tabindex="0">Manage</a>
<div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
<ul class="adb-stack">
<li class="adb-stack--item"><a class="adb-link__option adb-stack--item_content" href="../corporate/home">Corporate</a></li>
<li class="adb-stack--item"><a class="adb-link__option adb-stack--item_content selected" href="./marketplace">Channel</a></li>
<li class="adb-stack--item"><a class="adb-link__option adb-stack--item_content" id="account" href="../account/home">Account</a></li>
</ul>
</div>
</div>
</li>
<li class="adb-primary_nav--item adb-primary_nav--item__right">
<div class="adb-context_menu adb-js-context_menu" data-placement="right">
<a class="adb-context_menu--trigger adb-js-context_menu--trigger adb-primary_nav--link" role="button" tabindex="0">testchannel user</a>
<div class="adb-container adb-context_menu--menu adb-js-context_menu--menu" role="menu">
<ul class="adb-stack">
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="myProfile" href="../profiles/5944276">My Profile</a>
</li>
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="myCompany" href="../companies/219288">My Company</a>
</li>
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="mySettings" href="../settings">My Settings</a>
</li>
<li class="adb-stack--item">
<a class="adb-link__option adb-stack--item_content" id="logout" href="../logout">Logout</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
Java Code
Configuration_file var = new Configuration_file();
System.setProperty("webdriver.chrome.driver", "C:\\Users\\gur29175\\workspace\\SAAS\\jars\\chromedriver.exe");
WebDriver firefox_dri = new ChromeDriver();
firefox_dri.get(var.env_URL + "/home");
firefox_dri.manage().timeouts().implicitlyWait(30,TimeUnit.SECONDS);
firefox_dri.findElement(By.cssSelector("a:(*'Manage'*)")).click();
firefox_dri.findElement(By.cssSelector("a:(*'Channel'*)")).click();
driver.findElement(By.xpath("//a[#id='manage']")).click()
driver.findElement(By.xpath("//ul[#class='adb-stack']/li[2]")).click()
In case of a listbox, you need to get the list of elements and iterate over it to choose the required element.
Please share the screenshot of the page with dropdowns. Will be able to guide you with the code.
You can replace
firefox_dri.findElement(By.cssSelector("a:(*'Manage'*)")).click();
firefox_dri.findElement(By.cssSelector("a:(*'Channel'*)")).click();
with
firefox_dri.findElement(By.linkText("Channel")).click();
Try it
//ul[#class='adb-stack']/li[#class='adb-stack--item']/a[contains(text(),'Corporate')].click();
The following is the partial view that I'm using. Somehow the 'ng-scope' class is not added automatically to every HTML tag. Could someone tell me what might be the cause of this? I know angular.js adds class conditionally but I don't know how to fix this.
<div class="my-photo-header">
<div class="container">
<a class="navbar-brand my-navbar-brand">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<form class="navbar-form my-navbar-form navbar-left" role="search">
<div>
<input id="photo-title" type="text" class="form-control" placeholder="Untitled"
title="Edit your photo title here." value="TITLE">
</div>
</form>
<ul id="photo-title-header" class="nav nav-tabs">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
File <span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<a>Save</a>
</li>
<li>
<a ng-click="vm.haha()">Upload</a>
<input type="file" upload-image="uploadImage"/>
</li>
<li><a>Open</a></li>
<li><a>Invite</a></li>
<li role="separator" class="divider"></li>
<li><a>Export as<span class="caret"></span></a></li>
<li><a>Print</a></li>
</ul>
</li>
<!-- Please change TODO to display the number, and maybe change style to not be a tab -->
<li role="listitem"><a>{{TODO}} revisions</a></li>
<li>Logout</li>
</ul>
</div>
</div>
Pls can some help with this. View the website i'm working on on the mobile phone i observed the menu is showing without clicking the menu icon and covering my content. What can i do do solve this. Here is my code. I'm working with foundation 5
<!-- tab bar navigation -->
<nav class="tab-bar hide-for-medium-up">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Home</li>
<li>About</li>
<li>Store</li>
<li>Our Clients</li>
<li>Contact</li>
</ul>
</aside>
<a class="exit-off-canvas"></a>
Thanks
Here is your answer....
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
<div class="large-12 columns">
<nav class="top-bar" data-topbar="" role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right show-for-large-up">
<li class="active">Right Button Active</li>
<li class="has-dropdown not-click">
Right Button Dropdown
<ul class="dropdown"><li class="title back js-generated"><h5>Back</h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Button Dropdown</a></li>
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<ul class="right hide-for-large-up">
<li class="active">Right Button</li>
<li class="has-dropdown not-click">
Right Dropdown
<ul class="dropdown"><li class="title back js-generated"><h5>Back</h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Dropdown</a></li>
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left show-for-large-up">
<li>Left Button</li>
</ul>
</section></nav>
</div>
I am developing with angular an admin, and resources I'm using Angular Material sidenav.
I could make the menu work 50%, can not do the toggle function normally.
Test case, click several times on the toggle menu it opens :D
<header class="nav-header">
<a ng-href="#/" class="docs-logo">
<h1 class="docs-logotype md-heading">Angular Material</h1>
</a>
</header>
<ul class="skip-links">
<li class="md-whiteframe-z2">
<md-button ng-click="focusMainContent($event)" href="#">Skip to content</md-button>
</li>
</ul>
<md-content flex role="navigation">
<ul class="docs-menu">
<li ng-repeat="sectionmenu in menu.sections" class="parent-list-item {{sectionmenu.className || ''}}" ng-class="{'parentActive' : isSectionSelected(sectionmenu)}">
<h2 class="menu-heading md-subhead" ng-if="sectionmenu.type === 'heading'" id="heading_{{ sectionmenu.title | nospace }}">
{{sectionmenu.title}}
</h2>
<menu-link sectionmenu="sectionmenu" ng-if="sectionmenu.type === 'link'"></menu-link>
<menu-toggle sectionmenu="sectionmenu" ng-if="sectionmenu.type === 'toggle'"></menu-toggle>
</li>
</ul>
</md-content>
</md-sidenav>
Follows a problem Plunker:
http://embed.plnkr.co/fq3tonZoddSSZkyAaWD8/preview
Editable Plunker:
http://plnkr.co/edit/FQcZrwYlh4LPKuje9mLI?p=preview
UPDATED and RESOLVED:
In template menu-toggle.tpl.html, change this:
<ul ng-show="isOpen()" id="menu-{{sectionmenu.title | nospace}}" class="menu-toggle-list">
<li ng-repeat="page in sectionmenu.pages">
<menu-link sectionmenu="page"></menu-link>
</li>
</ul>
for this:
<ul id="menu-{{sectionmenu.title | nospace}}" class="menu-toggle-list">
<li ng-repeat="page in sectionmenu.pages">
<menu-link sectionmenu="page"></menu-link>
</li>
</ul>