My ng-view being infinite loop with index.html page angularjs - javascript

Good day everybody, i want to ask a little question about angularjs ngview.
I just learned about angular a week ago.
In my code, my web show infinite loop of the index itself, instead if showing the right page. I already search on stackoverflow for the same problem, but still cannot fix my problem.
Here's my app.js code:
app.config(function($routeProvider, $locationProvider)
{
$routeProvider.when("/detilsoal/:nomor/:id",
{
templateUrl: "/detil_soal.html"
controller: "soalLengkap"
}).when("/nilai/:id",
{
templateUrl: "/nilai.html",
controller: "hitungNilai"
}).otherwise(
{
redirectTo: "/"
});
});
Here's my controller (i just want to check if the controller is used correctly):
app.controller('hitungNilai', function($scope, $http, $routeParams)
{
console.log('error');
});
And here's my nilai.html view (located in public/nilai.html) :
<div class="row" id="head_soal">
<div id="kotak_dalam" ng-controller="hitungNilai">
<h2>JUMLAH NILAI</h2>
<div class="row" id="isi soal" style="padding: 3%;margin-left: 1%;">
</div>
</div>
</div>
And here's the picture when i go to address:
Error image
Thank you for your time.

the problem is you are redirectiong to / but you didn't initialize
.when("/",
{
templateUrl: "/detil_soal.html"
controller: "soalLengkap"
})
use this code...
app.config(function($routeProvider, $locationProvider)
{
$routeProvider.when("/",
{
templateUrl: "/detil_soal.html"
controller: "soalLengkap"
}).when("/detilsoal/:nomor/:id",
{
templateUrl: "/detil_soal.html"
controller: "soalLengkap"
}).when("/nilai/:id",
{
templateUrl: "/nilai.html",
controller: "hitungNilai"
}).otherwise(
{
redirectTo: "/"
});
});

Related

Angular UI Router not injecting footer into UI View

http://plnkr.co/edit/i9qhqKZrbxUfsrAOKmMD
I have a basic hello world setup for a header/container/footer in AngularJs however I can't get the footer to load. The header/container is loading fine.
Here's my javascript:
angular.module('app', ['app.controllers', 'ui.router']).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('root', {
url: '',
abstract: true,
views: {
'header': {
templateUrl: 'pages/header/header.html',
controller: 'HeaderController'
},
'footer': {
templateurl: 'pages/footer/footer.html'
}
}
})
.state('root.home', {
url: '/',
views: {
'container#': {
templateUrl: 'pages/home/home.html',
controller: 'HomeController'
}
}
})
.state('root.about', {
url: '/about',
views: {
'container#': {
templateUrl: 'pages/about/about.html'
}
}
});
$urlRouterProvider.otherwise('/');
});
angular.module('app.controllers', [])
.controller('HeaderController', headerController)
.controller('HomeController', homeController);
Here's my implementation on HTML:
<header ui-view="header">
</header>
<div ui-view="container">
</div>
<footer ui-view="footer">
</footer>
Changing them all to divs does not help.
There are no errors in Javascript console.
Header.html
<h1>Header</h1>
Home.html
<h1>Home</h1>
Footer.html
<h1>Footer</h1>
Page display:
Header
Home
The reason it is not working is because of a small typo in your code. This definition:
'footer': {
templateurl: 'pages/footer/footer.html'
}
should be:
'footer': {
templateUrl: 'pages/footer/footer.html'
}
This is a great example of bad design (on the part of ui-router). They could have performed checks of validity on requested views if there is no template or controller. However, I think it more importantly shows the shortcomings of allowing objects to be passed to functions. If templateUrl was a parameter to a function, this sort of problem would never arise.
Updated plunkr.
Replace templateurl with templateUrl.

Angular JS Route: attach more than one controller

can be possible to attach more than one controller to a route, like an array of controllers?
In '/store', I need to attach "StoreController" and "ReviewController", without repeating .when() so many times:
my code:
angular
.module('gemStore', [
'example-directives'
])
.config(function ($routeProvider) {
$routeProvider
.when('/store', {
templateUrl: 'store.html',
controller: 'StoreController'
})
.when('/store', {
templateUrl: 'store.html',
controller: 'ReviewController'
})
.otherwise({
redirectTo: '/'
});
});
What should happen is you should have ONLY ONE 'root' controller for a page, and any 'parts' of the page should be children of the root controller.
$routeProvider
.when('/store', {
templateUrl: 'store.html',
controller: 'StoreParentController'
})
Then children can be declared in the HTML like so:
<div ng-controller="StoreParentController"> <!-- you dont need this particular controller here because you have it in your routeprovider, this is just an example of the structure-->
<div ng-controller="StoreController"> stuff about store </div>
<div ng-controller="ReviewsController"> reviews </div>
</div>

When I click the back button, it takes me to the same page I'm currently on

I'm looking at a web site developed by someone else and am trying to troubleshoot an issue where the back button doesn't function correctly. Because this is not my code, I'm not exactly sure where the best places to prioritize my troubleshooting would be.
I'm trying to figure this out quickly - my questions are: What are some common things that would cause this? What are some areas to check that are very likely to be the culprit?
Here is the bug in action. If you click on any of the example portfolio items and then try to use the browser's own back button, you're taken back to the same page. I believe this is an issue of the routing in Angular but I don't know that for sure. Any ideas?
To fix the back button issue, you should make all your hrefs point to #/route_name instead of #route_name in your html
for example change :
<a href="#about" .... </a>
To:
<a href="#/about" .... </a>
I tested the solution on your site and the back button worked like a charm.
I don't know much about angular but the behavior could be because of the following code in compiled.min.js file. The last 4-5 lines in this code snippet are important and which might be causing this issue. Have a look at it and probably you can figure it out:
angular.module("Site", ['ngSanitize']).config(function ($locationProvider, $routeProvider, $httpProvider) {
$httpProvider.defaults.useXDomain = !0, delete $httpProvider.defaults.headers.common["X-Requested-With"], $locationProvider.html5Mode(false);
$httpProvider.responseInterceptors.push(function ($q, $location, $rootScope) {
return function (promise) {
//start spinner
/* $rootScope.element = $('.container')
$rootScope.element.css('visibility', 'hidden');
$rootScope.spinner = $rootScope.spinner ? $rootScope.spinner : startSpinner(); */
return promise.then(
// Success: just return the response
function (response) {
return response;
},
// Error: check the error status to get only the 401
function (response) {
if (response.status === 404) $location.url('/404');
return $q.reject(response);
});
}
});
$routeProvider.when("/", {
templateUrl: "views/homepage.html",
controller: "homeC"
}).when("/about", {
templateUrl: "views/about.html",
controller: "RouteC"
}).when("/about/our-team", {
templateUrl: "views/our-team.html",
controller: "aboutC"
}).when("/who-we-are", {
templateUrl: "views/page.html",
controller: "RouteC"
}).when("/what-we-do", {
templateUrl: "views/page.html",
controller: "RouteC"
}).when("/about/manifesto", {
templateUrl: "views/manifesto.html",
controller: "RouteC"
}).when("/about/testimonials", {
templateUrl: "views/testimonials.html",
controller: "testimonialC"
}).when("/about/awards", {
templateUrl: "views/awards.html",
controller: "RouteC"
}).when("/services", {
redirectTo: "/services/design"
}).when("/services/marketing", {
templateUrl: "views/services-marketing.html",
controller: "services_marketing"
}).when("/services/design", {
templateUrl: "views/services-design.html",
controller: "services_design"
}).when("/services/ecommerce", {
templateUrl: "views/services-ecommerce.html",
controller: "services_ecommerce"
}).when("/services/development", {
templateUrl: "views/services-development.html",
controller: "services_development"
}).when("/services/mobile", {
templateUrl: "views/services-mobile.html",
controller: "services_mobile"
}).when("/services/marketing/:slug", {
templateUrl: "views/services.html",
controller: "services_marketing_internal"
}).when("/services/:slug", {
templateUrl: "views/services.html",
controller: "services_internal"
}).when("/portfolio", {
redirectTo: "/portfolio/website"
}).when("/portfolio/:slug", {
templateUrl: "views/portfolio.php",
controller: "portfolioC"
}).when("/portfolio/:category/:slug", {
templateUrl: "views/portfolio-single.php",
controller: "portfolio_internal"
}).when("/blog-home", {
templateUrl: "views/blog-home.html",
controller: "RouteC"
}).when("/blog-post", {
templateUrl: "views/blog-post.html",
controller: "RouteC"
}).when("/contact", {
templateUrl: "views/contact.php",
controller: "contactC"
}).when("/debug", {
templateUrl: "views/qunit.html",
controller: "qunitC"
}).when("/404", {
templateUrl: "views/error-404.html"
}).when("/sitemap", {
templateUrl: "views/sitemap.php"
}).otherwise({
redirectTo: "/404"
});
//$locationProvider.hashPrefix('!'); //This seems to be the code which handles the redirect.
}).run(function ($rootScope, $location) {
$rootScope.$apply.pathTo = function (url) {
$location.path(url);
};

AngularJS, $routeProvider

I'm trying to learn how routes work in AngularJS to make a little application that allows users to login and write comments in a live feed. However the whole concept of routes is a bit blurry for me atm and i can't get this right.
My standard index.html containing an ng-view and necessary scripts.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="//cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.8.2/angularfire.js"></script>
<script src="//cdn.firebase.com/js/simple-login/1.6.3/firebase-simple-login.js"></script>
<script src="controller.js"></script>
<title>Test Login App</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
My controller containing module and routeprovider.
var myApp = angular.module('myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase',
'firebase.utils',
'simpleLogin'
]);
myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: handleCtrl, templateUrl: 'handler.html' }).
when('/chatt', { controller: MyController, templateUrl: 'chat.html' }).
when('/login', { controller: loginCtrl, templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}])
myApp.controller('MyController', ['$scope', '$firebase',
function($scope, $firebase) {
//CREATE A FIREBASE REFERENCE
var ref = new Firebase("https://ivproj.firebaseio.com/");
// GET MESSAGES AS AN ARRAY
$scope.messages = $firebase(ref).$asArray();
//ADD MESSAGE METHOD
$scope.addMessage = function(e) {
//LISTEN FOR RETURN KEY
if (e.keyCode === 13 && $scope.msg) {
//ALLOW CUSTOM OR ANONYMOUS USER NAMES
var name = $scope.name || 'anonymous';
//ADD TO FIREBASE
$scope.messages.$add({
from: name,
body: $scope.msg
});
//RESET MESSAGE
$scope.msg = "";
}
}
}
]);
The $routeprovider function should direct me to handler that is a simple .html file containing two buttons that in turn redirects to other htmls.
I think you have the syntax of the otherwise call in your config section wrong. Change what you have for this instead:
otherwise('/handler');
hope this helps...
you are missing '' in controller part. correct code should look like -
myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chatt', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
Make sure that you are referring the correct path in templateUrl.
and look at my earlier post to get a better idea - How to navigate in Angular App
myApp.config(function($routeProvider) {
$routeProvider.
when('/', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chat', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});
The $routeProvider.when() method in the above code actually creates a route with the given configuration. And the three .when()'s are creating three different routes.
But in your $routeProvider.otherwise('/handler'), you are telling angular to go to a route called /handler if the user tries to navigate anywhere outside the configured routes.
The mistake you are doing here is, you did not define a route at /handler. So you need to first define that route and then use it in .otherwise().
Try changing your configuration to reflect the below.
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/handler', { controller: 'handleCtrl', templateUrl: 'handler.html' }).
when('/chat', { controller: 'MyController', templateUrl: 'chat.html' }).
when('/login', { controller: 'loginCtrl', templateUrl: 'login.html' }).
otherwise({ redirectTo: '/handler' });
});

Routing in Angular JS with Multiple Slashes (1.2.x)

I have injected ngRoute into my angular app, and routing works when paths are only one level deep, ie. only have a single slash.
in app.js:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login.html',
controller: 'LoginCtrl'
})
.when('/guestlist', {
templateUrl: 'guestlist.html',
controller: 'guestListCtrl'
})
.when('/event/apply', {
templateUrl: 'apply-to-event.html',
controller: 'EventCtrl'
})
.when('/event/confirmation', {
templateUrl: 'apply-to-event-confirmation.html',
controller: 'EventCtrl'
})
.when('/event', {
templateUrl: 'event.html',
controller: 'EventCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
The routes that do not work are /event/apply and /event/confirmation, they just go straight to /. However, /event and /guestlist, for example, do work.
Any ideas would be much appreciated,
You are having a problem similar to one i had a few years ago.
Try adding this to your meta :
<base href="/">
source

Categories