$routeProvider behaving oddly (Angular) - javascript

I got this code
var site = angular.module('site', ['ngRoute']).
config(function($routeProvider){
$routeProvider.
when('/home', {templateUrl: '/NexGaming/pages/home.html', controller: 'mainStaysCtrl'}).
/*when('/', {templateUrl: '/na/pages/home.html', controller: 'mainStaysCtrl'}).*/
when('/in-play', {templateUrl: '/na/pages/in-play.html', controller: 'mainStaysCtrl'}).
when('/popular', {templateUrl: '/na/pages/popular.html', controller: 'mainStaysCtrl'}).
otherwise({redirectTo: '/home', tempalteUrl: '/NexGaming/pages/home.html'});
});
site.controller('mainStaysCtrl', function($scope, $location) {
$scope.setRoute = function(route) {
$location.path(route);
};
});
It basically works as it was intended - links with ng-click"setRoute()" calls the tempalte to be displayed in ng-view. All is good.
But for some reason it stops working after few clicks. I mean, for first 3 to 5 clicks it works as it should. And then it stops. Nothing happens. As if setRoute controller would break itself. Do you have any ideas?
EDIT
As it appers, this bug disables ALL THE LINKS on the site. Even those hardcoded.

Silly mistake. Link looked like this
<div class="bullet-link" ng-click="setRoute('/popular')">Popular Events</div>
And it should look like this
<div class="bullet-link" ng-click="setRoute('/popular')">Popular Events</div>

Related

angularjs v1 script not loading on page change

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"
})
});

How to Include Jquery plugin AngularJs Multipage application

I am developing a multipage application in AngularJs. My requirement is to open a sublist from a main list in sidebar menu. The sublist collapse out with a transition. I already have a Jquery plugin. It was working perfectly. But when $routeprovider was used in Angular application, it no longer works.
Function for loading jquery is
$.sidebarMenu($('.sidebar-menu'));
The sidebar is common to all pages.
My app.config is as follows
app.js
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/web', {
templateUrl: 'templates/web.html',
controller: 'webctrl'
}).
when('/login', {
templateUrl: 'templates/login.html',
controller: 'webctrl'
}).
when('/register', {
templateUrl: 'templates/register.html',
controller: 'webctrl'
}).
when('/account', {
templateUrl: 'templates/account.html',
controller: 'accountctrl'
}).
when('/subtran', {
templateUrl: 'templates/subtran.html',
controller: 'subtranctrl'
}).
otherwise({
redirectTo: '/web'
});
}]);
Where do I include the above jquery function
When I included as a script in main html page, it threw a JavaScript runtime Error.
index.html
<script>
$.sidebarMenu($('.sidebar-menu'));
</script>
Help me.
The problem is resolved. I just copied the js scripts from the particular file into instead of calling it using a function

AngularJS Route Change Shows Next Template Before Previous One Goes Away

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: '/' });
});

Login page loading as partial and not full page

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.

AngularJS change view in ng-view from a controller

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

Categories