Below is my routing defined in html, this is defined in left pane
<a href="#loadApp" data-toggle="tab" >loadApp</a>
and page content is is right pane:
<div class="right-pane" id="rightPanel" >
<div ng-view>
</div>
</div>
when i click on url in left pane right gets refreshed.
It works fine when i click on it first time, my page gets loaded. but when i click on same url again my ng-view should get loaded again but that's not happening it remains same and nothing refreshes. Is there something that i am missing.
Routing configured as
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/loadApp', {
templateUrl: '../html/partials/centralPage.html'//,
}).
otherwise({
redirectTo: '/Default'
});
}]);
Thanks
Have you tried adding an ng-click to your top div? It likely isn't refreshing because the page isn't loading, try doing the following:
<div class="right-pane" ng-click="pageRefresh()" id="rightPanel" >
<div ng-view>
</div>
</div>
and in your controller:
app.controller('rightPaneCtrl', function() {
var pageRefresh = function() {
$scope.$apply();
});
Related
With angular, I have my index.html setup as follows.
<html><head>...</head>
<body ng-app="someappname">
<header>
<img src="images/hdr_logo.png" alt="...">
</header>
<main>
<!-- this is where the active view will be placed -->
<ui-view></ui-view>
</main>
</body></html>
And I have my ui-router setup as follows.
$stateProvider
.state('index', {
templateUrl: 'index.html',
controller: 'IndexController',
abstract: true
})
.state('index.login', {
url: '/login',
templateUrl: 'partials/login.html',
controller: 'LoginController',
})
Currently, my login.html has nothing but text... simply looks like this.
This is my login page
However, when I run the application I see that my header logo is being displayed twice. Upon further investigation, I can see that my <ui-view></ui-view> actually re-includes the entire index.html again (as well as the text). So there is index.html which has another copy of index.html within the ui-view. My display has the logo displayed twice followed by the text, "This is my login page".
Why is the index.html being included within my ui-view, instead of just the partial?
After much toil and trouble, it seems that problem was to do with the keyword abstract not being functional in the versions that I was using. Since, whether I added or removed abstract the result was the same. However, after I upgraded my angular and ui-router version... everything works!!!
So I am trying to display multiple views in angular to help fix the footer problem I am having with this site I am building. I want to make sure that what I have been reading about and trying to mimic is making sense. This is what I have so far.
index.html
<!--Do not code below this line-->
<main ng-view="header"></main>
<main ng-view="body"></main>
<main ng-view="footer"></main>
routes.js file
angular.module('appRoutes', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
views: {
'header': {
temmplateUrl: 'app/views/header.html'
},
'body': {
templateUrl: 'app/views/body.html'
},
'footer': {
templateUrl: 'app/views/footer.html'
}
}
})
I have it working where I have just one view and have my header and footer inside the index.html file but I saw that you can have multiple views and really just switch out the "body" view with other pages.
Any advice would be much appreciated. Thank you
To display multiple views you could use only ng-include.
See https://docs.angularjs.org/api/ng/directive/ngInclude for more ngInclude details.
Here is a example: (notice the wrap in single quotes)
<div id="header">
<div ng-include="'header.html'"></div>
</div>
<div id="content" ng-view></div>
<div id="footer">
<div ng-include="'footer.html'"></div>
</div>
Use ngRoute with ng-view to define a region (e.g div#content) where will be changed the dynamic content (as partial html).
See https://docs.angularjs.org/api/ngRoute/directive/ngView for more ngRoute details.
Good luck!
You can have just one ng-view.
You can change its content in several ways: ng-include, ng-switch or mapping different controllers and templates through the routeProvider.
Alternatively, use ui-router
In short: my demo, how to have subviews? (without reloading page)
Longer:
I'm using snapscroll to provide different screens effect (demo). This directive doesn't support by default ui-router so I had to do it myself.
When you move the mouse wheel beforeSnap event event is triggered. I call ui-router $state.go to change URL hash. I don't reload the controller.
$scope.beforeSnap = function (snapIndex) {
$state.go('view' + snapIndex,{},{
notify:false,
reload:false,
location:'replace',
inherit:true
});
};
Routing is like
.state('main', {
url: '/',
templateUrl: 'views/screens.html',
controller: 'mainCtrl'
})
.state('view0', {
url: '/green',
templateUrl: 'views/screens.html',
controller: 'mainCtrl',
params: {'color': 'green', 'screenIndex': 0}
})
[...]
views/screens.html:
<div fit-window-height="" snapscroll="" snap-index="snapIndex" before-snap="beforeSnap(snapIndex)">
<div class="green"></div>
<div class="blue">
<!-- How to enable these subviews? -->
<!-- <a ui-sref="view0.a">Go to view0.a</a> -->
<!-- <a ui-sref="view0.b">Go to view0.b</a> -->
<div ui-view="view1"></div>
</div>
<div class="red"></div>
<div class="yellow">
<div ui-view="view3"></div>
</div>
</div>
You can see a codepen and a demo.
The issue is that I want to have subviews in some "screens" (colours divs), e.g: view1 and view3.
But I don't know how to do it without reloading the whole page. Subviews like:
/view1/a
/view1/b
/view3/a
/view3/b
/view3/c
Besides, I think screens would be better/cleaner being children of main main.view0, main.view1, etc.
I read about multiple named views in ui-router and nested states without success.
Is there any way to have some links on the page feed the ng-view container while others load the page from the server?
See this fiddle for example: http://jsfiddle.net/terebentina/Wy7Ww/
html:
<div ng-app="test">
tab1
tab2
logout
<div ng-view></div>
</div>
js:
angular.module('test', []).config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
template: 'tab1'
,controller: 'TabCtrl'
})
.when('/tab2', {
template: 'tab2'
,controller: 'TabCtrl'
});
$locationProvider.html5Mode(true);
})
.controller('TabCtrl', function() {});
Basically I want the logout link to go to server while the 2 tabs to feed the ng-view.
As you can see, I only defined the tab routes in angular and no 'otherwise' section but it still tries to load logout in the ng-view.
Change the url for logout to
logout
This would stop angular route from intercepting the location change.
I am trying to change the page header depending on current view. The header is outside of ngView. Is that possible or do I need to put the header inside the view?
My code looks similar to this:
<div id="header">
<div ng-switch on="pagename">
<div ng-switch-when="home">Welcome!</div>
<div ng-switch-when="product-list">Our products</div>
<div ng-switch-when="contact">Contact us</div>
</div>
(a lot of unrelated code goes here)
</div>
<div id="content>
<div ng-view></div>
</div>
Give each route a name when you are defining it. Then inject $route into the controller, then have the controller publish it into the current scope. You can then bind the ng-switch to $route.current.name
You could inject the $location service and check $location.path(). http://docs.angularjs.org/api/ng.$location
JS:
function Ctrl($scope, $location) {
$scope.pagename = function() { return $location.path(); };
};
HTML:
<div id="header">
<div ng-switch on="pagename()">
<div ng-switch-when="/home">Welcome!</div>
<div ng-switch-when="/product-list">Our products</div>
<div ng-switch-when="/contact">Contact us</div>
</div>
</div>
Seems as it will be different controllers for header and content. Best way for communication between controllers is service. Another way - events. See Vojta answer.
A nice aproach for solving this is maybe to inject $route in your controller and then use it to grab the current route name.
app.controller('YourController', function($scope, $route){
$scope.pagename = $route.current.$$route.name;
});
And you have to name your routes like the following:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/product-list', {
templateUrl: 'views/product-list.html',
controller: 'ProductsController',
name: 'product-list'
}).
when('/home', {
templateUrl: 'views/home.html',
controller: 'HomeController',
name: 'home'
}).
otherwise({
redirectTo: '/'
});
}]);
So when you load a route,the controller will read the current route name and pass it to the view in your pagename variable. Then the view will pick it up and display the correct view as you need.
Hope it helps :)