I am using angulars UI router to load each page separately. I have header navbar and sidebar inside header.html and main-content(dynamic) in login.html
The login html page is getting overlapped with sidebar and footer because it is loaded separately. How do I fix this? I applied wrapper(custom css) class but it didn't affect the layout at all.
Here the link: http://angularspring-management999.rhcloud.com/default.html
Sample code:
<body>
<div id="wrap">
<!--header-->
<div ui-view="header"></div>
<!--sidebar-->
<div ui-view="sidebar"></div>
<!--main content-->
<div ui-view="content"></div>
</div>
<!--footer-->
<div ui-view="footer"></div>
</body>
States:
myApp.config(function ($stateProvider, $locationProvider, $urlRouterProvider, $httpProvider) {
// For any unmatched url, redirect to /login
$urlRouterProvider.otherwise("/Login");
var header = {
templateUrl: 'views/Header.html',
controller: function ($scope) {
}
};
var sidebar = {
templateUrl: 'views/SideBar.html',
controller: function ($scope) {
}
};
var footer = {
templateUrl: 'views/Footer.html',
controller: function ($scope) {
}
};
// Now set up the states
$stateProvider
.state('Login', {
url: "/Login",
views: {
'header': header,
'sidebar': sidebar,
content: {
templateUrl: 'views/Login.html',
controller: function ($scope) {
}
},
'footer': footer
}
});
Wouldn't something like this work using bootstraps grid?
<div class="row">
<div class="col-xs-3">
<div ui-view="view-1"></div>
</div>
<div class="col-xs-9">
<div ui-view="view-2"></div>
</div>
</div>
I've only ever used 1 ui-view element in my apps, and then created custom directives for this type of functionality. But according to the docs your way should be fine. Just be careful that sometimes ui-view can override certain template properties.
Related
.storyMobile{
color:green;
}
.storyWeb{
color:red;
}
<div class="storyMobile">
hii
</div>
<div class="storyWeb">
hii
</div>
//main view
<div>
<story :story="stories[0]"/>
</div>
//here it prints stories in red colour but I want it to be displayed in green colour - how can I do this?
This is my component where I have 2 divs with 2 different classes one will be active for mobile and one will be active for web.
<div class="storyMobile">
//code
</div>
<div class="storyWeb">
//code
</div>
//this is my main view where I am importing this component
<div class="body-frame">
<Header></Header>
<section class="content-section-bar" v-if="stories && stories.length">
<div>
<story :story="stories[0]"/>
</div>
</section>
</div>
By default the story component is in web so "storyweb" class is getting applied to it but I want the "storyweb" class to get applied on it.
How should I do it in vue.js I tried using the props but didn't get the desired output.
Is it what you want?
your component:
<div :class="className"></div>
script:
export default {
props: {
className: {
default: 'storyWeb'
}
}
}
usage:
<story :story="stories[0]"/>
<story :story="stories[0]" class-name="storyMobile"/>
Vue.component('story',{
template: `<div :class="className">test</div>`,
props: {
className: {
type: String,
default: 'storyWeb'
},
story: {
type: Object,
required: true
}
}
})
var app = new Vue({
el: '#app',
data () {
return {
stories: [
{content: 'sotry1 content'},
{content: 'story2 content'}
]
}
}
})
.storyMobile{
color:green;
}
.storyWeb{
color:red;
}
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<story :story="stories[0]" class-name="storyMobile"></story>
<story :story="stories[1]"></story>
</div>
I used to have the attached code working just fine, but then an update caused it to stop working. I was not able to make the adjustments so hopefully someone here has gone through it. The last block after the HTML is just smarty code to include the js file. The URL I am getting is: mySite.com/policies#!/#refund
which does not load anything. If I manually delete the second # to make it /policies#!/refund it does work.
This is the js file:
var app = angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'dialogs.main',
'summernote', 'angular-loading-bar', 'ngAnimate', 'fiestah.money', 'ui.ace',
'ui.select', 'ngCart']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/templates/main-app/policy/policy-reviews.tpl',
controller: 'mainCtrl'
})
.when('/reviews', {
templateUrl: '/templates/main-app/policy/policy-reviews.tpl',
controller: 'mainCtrl'
})
.when('/currency', {
templateUrl: '/templates/main-app/policy/policy-currency.tpl',
controller: 'mainCtrl'
})
.when('/refund', {
templateUrl: '/templates/main-app/policy/policy-refund.tpl',
controller: 'mainCtrl'
});
});
app.controller('mainCtrl', function ($scope, $rootScope, $filter, $http, $location, dialogs) {
console.log("in ctrl");
});
This is the template:
<div ng-controller="mainCtrl">
<div class="act-dash">
<nav class="navbar-default content-header blue" role="navigation" style="position:relative;">
<!-- We use the fluid option here to avoid overriding the fixed width of a normal container within the narrow content columns. -->
<div id="admin-collapse" class="pad-left-fix" style="bottom:0px;">
<div class="container"><h1>Terms and Policies</h1></div>
<ul class="nav navbar-nav" style="position:relative; bottom:0px">
<li><span class="glyphicon glyphicon-eye-open"> </span>Comments and Reviews</li>
<li><span class="glyphicon glyphicon-usd"> </span>Currency Conversion</li>
<li><span class="glyphicon glyphicon-usd"> </span>Refund Policy</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div class="content narrow-content margin-fix">
<div class="row margin-fix margin-bottom-fix div-table" style="width:100%;">
<div class="col-md-12 pad-left-fix pad-right-fix div-table-cell">
<div style="text-align: left;">
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{assign var="extra_js" scope="global" value="
<script type=\"text/javascript\" src=\"/js/angular-apps/policy.js\">
</script>
"}
You can Add Following line of code in your app.config, Just below
$routeProvider and see if it will work. Before run Please clear cache
and coockies on your browser.
$locationProvider.hashPrefix('');
I page web aplication with index.html file where is my login page. after succes log in I want to load page with routeProvider where i am using charts to draw diagrams . I have Error when i am loading just index.html for logg in not even this page where i am using charts.
my error looks like
Error: Please set height and width for the chart element
i#http://localhost:8080/pos/js/angular-charts.min.js:1:12049
Y/<#http://localhost:8080/pos/js/angular.min.js:70:91
Z#http://localhost:8080/pos/js/angular.min.js:70:149
A#http://localhost:8080/pos/js/angular.min.js:59:203
g#http://localhost:8080/pos/js/angular.min.js:51:299
g#http://localhost:8080/pos/js/angular.min.js:51:316
g#http://localhost:8080/pos/js/angular.min.js:51:316
g#http://localhost:8080/pos/js/angular.min.js:51:316
F/<#http://localhost:8080/pos/js/angular.min.js:50:415
ngViewFillContentFactory/<.link#http://localhost:8080/pos/js/angular-route.js:983:7
Z#http://localhost:8080/pos/js/angular.min.js:70:149
A#http://localhost:8080/pos/js/angular.min.js:59:203
g#http://localhost:8080/pos/js/angular.min.js:51:299
F/<#http://localhost:8080/pos/js/angular.min.js:50:415
I/<#http://localhost:8080/pos/js/angular.min.js:52:283
l#http://localhost:8080/pos/js/angular.min.js:56:293
update#http://localhost:8080/pos/js/angular-route.js:933:25
Pe/this.$get</l.prototype.$broadcast#http://localhost:8080/pos/js/angular.min.js:128:120
commitRoute/<#http://localhost:8080/pos/js/angular-route.js:616:15
f/<#http://localhost:8080/pos/js/angular.min.js:112:20
Pe/this.$get</l.prototype.$eval#http://localhost:8080/pos/js/angular.min.js:125:301
Pe/this.$get</l.prototype.$digest#http://localhost:8080/pos/js/angular.min.js:122:390
Pe/this.$get</l.prototype.$apply#http://localhost:8080/pos/js/angular.min.js:126:56
l#http://localhost:8080/pos/js/angular.min.js:81:169
S#http://localhost:8080/pos/js/angular.min.js:85:301
vf/</D.onload#http://localhost:8080/pos/js/angular.min.js:86:315
<div data-ac-chart="'pie'" data-ac-data="cityData" data-ac-config="cityConf" class="chart ng-isolate-scope" id="chart">
here is my html file where i have charts
<div class="row-fluid maginTopDiv">
<div class="span4">
<h2>City</h2>
<div
data-ac-chart="'pie'"
data-ac-data="cityData"
data-ac-config="cityConf"
class="chart" id="chart">
</div>
</div>
<div class="span4">
<h2>Type</h2>
<div
data-ac-chart="'pie'"
data-ac-data="termTypeData"
data-ac-config="termTypeConf"
class="chart" id="chart">
</div>
</div>
<div class="span4">
<h2>Program ID</h2>
<div
data-ac-chart="'pie'"
data-ac-data="programIdData"
data-ac-config="programIdConf"
class="chart" id="chart">
</div>
</div>
</div>
here is my css content for this divs
.chart{
width: 100%;
height: 200px;
}
my config for routing
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'home.htm',
controller: 'mainController'
})
.when('/dashboard', {
templateUrl: 'home.htm',
controller: 'mainController'
})
.when('/archive',{
templateUrl: 'problemArchive.htm',
controller: 'mainController'
})
.otherwise({
templateUrl: 'home.htm',
controller: 'mainController'
});
});
and in controller i am defining data for this charts after successuly logg in and after login i am getting data on the page except this charts.
why i have this errors when i even not loading this page i just have index.html page where i am not using charts, just after log in
This is my first time using ui-router and I find difficulties in handling routing and reloading some states. I hope anyone can help me with this.
overview of my index.html
<html ng-app="resApp">
<head></head>
<body ng-controller="mainCtrl" ng-cloak>
<div ng-show="showCustomerContent">
<div id="page-wrapper">
<div ui-view="header"></div>
<div ui-view="slider" ng-show="displaySlider"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
</div>
</div>
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
<div ui-view="jsincludes"></div>
</body>
</html>
routing.js
'use strict'
resApp.config(['$stateProvider', '$urlRouterProvider','$httpProvider','$locationProvider',function ($stateProvider, $urlRouterProvider, $httpProvider,$locationProvider) {
$urlRouterProvider
.when('/','/Home')
.when('/login','/Home')
.otherwise('/Home');
$stateProvider
.state("home",{
url:'/Home',
views:{
'jsincludes':{
templateUrl:'views/includes/jsincludes.html'
},
'header':{
templateUrl:'views/customer_part/header.html',
controller:'headerCtrl'
},
'slider':{
templateUrl:'views/customer_part/slider.html'
},
'footer':{
templateUrl:'views/customer_part/footer.html'
}
}
})
.state("home.aboutus",{
url:"/AboutUs",
views:{
'content#':{
templateUrl:'views/customer_views/aboutus.html',
controller:'aboutusCtrl'
}
}
})
$httpProvider.useApplyAsync(true);
}]);
controller.js
'use strict'
resApp.controller('mainCtrl',['$scope','$location','UserData','$rootScope',function($scope,$location,UserData,$rootScope){
$rootScope.displaySlider = true;
$scope.$on('$stateChangeSuccess',function(event, toState){
var url = $location.absUrl().split('/');
//console.log(url);
if(url.length > 6){
$rootScope.displaySlider = false;
}else{
$rootScope.displaySlider = true;
}
});
UserData.getSessVar().then(function(msg){
if(msg.data!="none"){
$rootScope.uid = msg.data["uid"];
$rootScope.fullname = msg.data["fullname"];
$rootScope.role = msg.data["role"];
$rootScope.Id = msg.data["Id"];
if($rootScope.role == "customer"){
$scope.showCustomerContent = true;
}else{
$scope.showAdminContent = true;
}
}else{
$rootScope.role = "none";
$scope.showCustomerContent = true;
}
});
}]);
resApp.controller('headerCtrl',['$scope','$rootScope','UserData','$location','$state','$stateParams',function($scope,$rootScope,UserData,$location,$state,$stateParams){
$scope.hideLoginBtn = false;
if($rootScope.uid!=undefined){
$scope.hideLoginBtn = true;
}
$scope.logout = function(){
UserData.logoutUser($rootScope.Id).then(function(msg){
if(msg.data=="success"){
window.location.reload();
//$location.path('/Home');
}
});
}
$scope.home = function(){
$state.go('home', {}, { reload: true });
}
$scope.aboutus = function(){
$state.go('home.aboutus',{},{reload:true});
}
}]);
resApp.controller('aheaderCtrl',['$scope','$rootScope','UserData','$location',function($scope,$rootScope,UserData,$location){
$scope.logout = function(){
UserData.logoutUser($rootScope.Id).then(function(msg){
if(msg.data=="success"){
window.location.reload();
//$location.path('/Home');
}
});
}
}]);
In my header.html I have this code
<li>
<a href="" title="Home" ng-click="home()">
Home
</a>
</li>
Whenever I click Home the index.html is displaying another copy of my header and slider. As you can see in the image the {{fullname}} scope was displayed and also the other ui-views. I tried doing the ui-sref="home" ui-sref-opts="{reload: true, notify: true}" and put it in my anchor tag but the result is the same. I need to reload the page because my slider is not displaying if I just do ui-sref="home". I also tried to use the ng-cloak but whenever I click the anchor tag it also display my raw code in angularjs. The displayed raw code disappear when the whole page was rendered. Can anyone help me with this?
Update
This error only appeared in mozilla firefox. My routing is perfectly fine in chrome
There is div tag closing issue on the below code
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
Change it as below
<div ng-show="showAdminContent">
<div id="page-wrapper">
<div ui-view="aheader"></div>
<div ui-view="asidebar"></div>
<div id="page-content-wrapper">
<div id="page-content">
<div class="container-fluid">
<div ui-view="acontent"></div>
</div>
</div>
</div>
</div>
Also, I am not sure why are you keeping header, footer, and slider as a named ui-view while you can achieve the same using simple ng-include. Use routing only for redirection and hyperlinks.
Refer my plunker for how to do it
https://plnkr.co/edit/ZatFwz83ODsPjy55eRc5?p=preview
Ideally you should have another html file ex:- main.html and in main.html specify the ui-view. for ex:-
<div id="wrapper">
<div ui-view="header"></div>
<div ui-view></div>
<div ui-view="footer"></div>
Here is my app.js:
// Now set up the states
$stateProvider
.state('/', {
url: "/",
views: {
"top": {
templateUrl: 'partials/top.html'
},
"content": {
templateUrl: 'partials/content.html'
}
,
"footer": {
templateUrl: 'partials/footer.html'
}
}
})
.state('consultar', {
url: "/consultar",
views: {
"content": {
templateUrl: 'partials/consultar.html'
}
}
})
In my top.html i have this part:
<li>Consultar Protocolo <span class="sr-only"></span></li>
But, when i click in the link, its not chaging just the <div class="content" ui-view="content"></div>, it changes the whole page(showing only the content of the consultar.html)
why?
Here's my index.html:
<body>
<div class="top" ui-view="top"></div> //for the navbar
<div class="content" ui-view="content"></div> //for the content of clicked link in navbar
<div class="footer" ui-view="footer"></div> //if i need some extra info
</body>
Use ui-sref instead, so your link looks like this:
<li><a ui-sref="consultar">Consultar Protocolo <span class="sr-only"></span></a></li>
May be your should specify the parent for consultar view:
.state('consultar', {
url: "/consultar",
parent: "/",
views: {
"content": {
templateUrl: 'partials/consultar.html'
}
}
})