I have an application as following structure
Index.html
which has app.js with all routing and ng-view is added inside index.html
I have another template which am loding on successive login over this ng-view is home.html
can i have a ng-view inside the home.htmlas well ? and load to that ng-view when I click on any menus inside link of home page ?
I am adding my routing details bellow
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'modules/authentication/views/login.html'
})
.when('/home', {
controller: 'HomeController',
templateUrl: 'modules/home/views/home.html'
})
.otherwise({ redirectTo: '/login' });
}])
can I add a new routing and load a tempale and controler inside home.html in place of index.html ?
If I understood correctly you want a ng-view inside a ng-view. I think you cannot do that. But the solution would be use the parameter reloadOnSearch which you can set as false, so everytime you reload the page changing it's route it will not reload the previously loaded html structure.
.when('/home', {
controller: 'HomeController',
templateUrl: 'modules/home/views/home.html',
reloadOnSearch: false
})
But to make it work this way you have to type in the fixed html structure in every page you want. A way of doing that is adding includes to your home page and set the view pages by scope variables.
<!--home.html-->
<!--define your structure here-->
<!--includes that will load the desired pages-->
<div>
<div ng-include="'./indexGeneral.html'" ng-if="Page == 'general'"></div>
<div ng-include="'./indexContacts.html'" ng-if="Page == 'contacts'"></div>
<div ng-include="'./indexVehicles.html'" ng-if="Page == 'vehicles'"></div>
</div>
Related
I have a small issue in my project is that I am using routing for different pages. Page are changing fine butt not loading Java script when I go to another page. Kindly help me out. Also i want to page autoscroll top.
<div class="ng-view" autoscroll="true"></div>
routing code
adminapp.config( function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: "frontend/views/home.html",
controller: "common",
css: "frontend/assets/css/style.css"
})
.when('/about', {
templateUrl: "frontend/views/about.html",
controller: "common",
css: "frontend/assets/css/style.css"
})
});
I'm working on an angularjs application.
I cant figure out why the template for my second page briefly shows up below the home page template during route change?
Home Page: http://www.stalwil.com/admin/#/
Enter ZIP: 77056
During transition, watch the second page template show up before the home page template goes away. It's very annoying and I cant figure out why!
Second Page: http://www.stalwil.com/admin/#/enrollment
Here is my config for $routeProvider:
homeServices.config(function($routeProvider){
$routeProvider
.when('/',
{
controller: 'zipController',
templateUrl: 'app/views/zip.html'
})
.when('/enrollment',
{
controller: 'enrollController',
templateUrl: 'app/views/enroll.html'
})
.when('/thankyou',
{
controller: 'thankyouController',
templateUrl: 'app/views/thankyou.html'
})
.otherwise({ redirectTo: '/' });
});
Hi I'm having a problem in my Angular app. I have the index page which contains a sidebar and a topbar. With ng-view I then load the contents based on what is clicked on the sidebar.
However, this page requires authentication and as such I have a login page to which I want to redirect when the user is not authenticated. The problem is the html is loading as a partial with the sidebar and topbar aswell, when I want it to be a different page.
Here's my code:
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'partials/dashboard.html'
//controller: 'mainController'
//controllerAs: 'vm'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController',
controllerAs: 'vm'
})
.otherwise({redirectTo: '/'});
;
$locationProvider.html5Mode(true);
});
Any additional code that is required to help please say so!
Thank you!
If your problem is user seeing content which he should not see without login in then add the authentication in resolve function inside when block. If you put the login page inside the view with sidebar and topbar user will always see those things. create a separate page for login if you don't want user to see topbar and sidebar, then route to home on login success.
I would like to change the href link of this "next" arrow in my application based on the route I am on. The application is a slideshow and the next arrow should take you through all the routes. What's the best way to do this?
So for example, if I am on the '/' route the next arrow should take me to '/overall-results' and if I am on '/overall-results' the next arrow should take me to '/swim-lane'. I know the easiest thing to do it make this "arrow" on each page and have a different link for it, but if there's an angular way to this I would like to know.
Route file:
angular
.module('ciscoImaDashboardApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/welcome.html',
controller: 'welcomeCtrl'
})
.when('/overall-results', {
templateUrl: 'views/overall.html',
controller: 'overallCtrl'
})
.when('/swim-lane-results', {
templateUrl: 'views/swim-lane.html',
controller: 'swimlaneCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Where my navigation arrow is:
<ng-view></ng-view>
Next
Since you have a controller for each route, you can keep the template the same, and reference a $rootScope that changes on each controller.
<!-- welcomeCtrl -->
$rootScope.nextLink = "overall-results";
<!-- overallCtrl -->
$rootScope.nextLink = "swim-lane-results";
<!-- swimlaneCtrl -->
$rootScope.nextLink = "somethingelse";
<!-- navigation template shared by all controllers/templates -->
<a ng-href="/{{nextLink}}">Next Link</a>
I have a JavaScript web app where I used AngularJS to ease things up, but now I bumped into a little problem.
I want to change viewfrom an ng-controller. I use $location.path to do this, but sadly, nothing happens. If I check the $location object, the path will be changed correctly, but the view isn't changing.
I have an ng-view in my Home.html. This is the config I wrote for it:
<html ng-app="app">
...
<body>
<div id="navigation-menu" ng-controller="NavigatorController">
<a class="menulink" ng-class="{ active: isActive('/labels')}" href="#page2">Page2</a>
<a class="menulink" ng-class="{ active: isActive('/labels')}" href="#page3">Page3</a>
</div>
<div ng-view></div>
</body>
</html>
This is the config I made for the $routeProvider which works flawlessly when used in the menusystem
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Page1.html',
controller: 'Page1Controller'
})
.when('/page2', {
templateUrl: 'Page2.html',
controller: 'Page2Controller'
})
.when('/page3', {
templateUrl: 'Page3.html',
controller: 'Page3Controller'
});
});
Upon opening the app I want to show the Page1.html in the ng-view, so that's sorted with the '/' url thing, I guess.
The problem is, that from every other controller, I want to be able to get back to the Page1.html.
I tried making an event in every other controller, like this:
$scope.NavigateBack = function() {
$location.path('/');
}
It's not working, sadly. I don't get any error messages though... I tried it with different addresses in the path, like "/page2", but nothing worked.
What am I doing wrong, that the view isn't changing and the page isn't navigating?
I recommend use
$window.location = "#/"
but don't forgot to inject $window to your controller
Define behaviour in the Page2Controller, for example:
$scope.goBack = function(){
$location.path("#/");
}
And add some button inside of Page2.html:
<button ng-click="goBack()">Return</button>
You might also need to change your navigation links href attribute to #/page2 and #/page3