I am getting infinite loop when trying to access a parameterized url in angular.
Here is the code.
app.js
var express = require("express");
var cors = require("cors");
var app = express();
app.use(express.static(__dirname));
app.use('/',function(req,res){
res.sendFile("./home.html");
});
app.listen("4467", function() {
console.log("Started listening at port 4467 new");
});
home.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="a02.js"></script>
</head>
<body ng-app="testApp">
Hello Homepage
<div ng-view></div>
</body>
</html>
a02.js
var app = angular.module("testApp", ['ngRoute']);
app.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
$routeProvider.when('/test/:a', {
templateUrl: './sum.html',
controller: 'sum'
})
.when("/",{
templateUrl:"./a02.html"
})
.otherwise({
template:"Otherwise"
});
$locationProvider.hashPrefix('');
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
app.controller('sum', function($scope, $routeParams) {
console.log("I am controller "+ $routeParams.a);
$scope.a = $routeParams.a;
$scope.b = $routeParams.b;
});
a02.html
Hello there
<hr>
<script> console.log("Getting called again");</script>
Click Me
My requirement is when I click on the Click Me link it should replace the existing ng-view template i.e a02.html to sum.html.
sum.html
<div>
Value of a: {{a}} </br>
Value of b: {{b}}
</div>
But I am getting infinite loop when click on Click Me link.Can someone tell me what I am missing here?
Related
I have this simple Angular app with ngRoute, a single route defined and the default redirecting to the same (in index.html):
<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script>
var app = angular.module('myApp', ['ngRoute']);
app.run(function($rootScope) {
$rootScope.location = window.location.href.substring(0, window.location.href.lastIndexOf('#'));
});
app.config(function ($routeProvider) {
$routeProvider
.when('/page', {
controller: 'PageController',
templateUrl: 'page.html'
})
.otherwise({
redirectTo: '/page'
});
});
app.controller('PageController', function ($scope, $rootScope) {
});
</script>
<div ng-app="myApp">
<div ng-view></div>
</div>
The page.html displays the $rootScope.location:
{{$root.location}}
When I access the page with by using directly index.html#/page, it shows the location as expected, but when accessing it by just index.html and then it redirecting me to index.html#/page, the $rootScope.location remains empty.
Can someone explain me why?
Meanwhile, I find it.
window.location.href.lastIndexOf('#') returned -1 while accessing it via index.html and the statement returned a substring from 0 to -1 which is empty.
I am working with AngularJS and using the ngRoute for routing.
I was wondering if this is normal behavior for Angular when it routes to the "otherwise" part and activates all controllers?
var angularApp = angular.module('AngularApp', ['ngRoute']);
angularApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/ExpenseOverview', {
controller: 'ExpenseOverviewController',
templateUrl: 'Angular/Views/ExpenseOverview.vbhtml'
})
.when('/AddExpense',
{
controller: 'AddExpenseController',
templateUrl: 'Angular/Views/AddExpense.vbhtml'
})
.otherwise({ redirectTo: '/ExpenseOverview' });
}]);
I have put an alert at the very top in each controller, even my factory. And on startup, all alerts are shown. Instead of going to "ExpenseOverview" at first, it checks both my controllers and not just the one that is bound to "/ExpenseOverview".
What could be the cause of this?
EDIT: Knowing it's normal for Angular to access all controllers on startup, the main problem isn't fixed yet. This is explained in another thread on StackOverflow. I thought this had something to do with it, because I had no idea that it was normal behavior for Angular to do this.
I could say that this thread is closed, because I have an answer to my question now.
Angular does not access every controller on start up, however, ngRoute does. Any initialization code in a controller that has a corresponding route entry in $routeProvider, will run at initialization.
Here's an example of this at play: http://plnkr.co/edit/WsvbKhcR74yoX80bskdb?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script data-require="ng-route#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0-rc.3/angular-route.js"></script>
</head>
<body ng-controller="main">
<h1>Hello {{test}}!</h1>
<div ng-view="">Hello?</div>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/route1', {
controller: 'con1',
templateUrl: 'view1'
})
.when('/route2',
{
controller: 'con2',
templateUrl: 'view2'
})
.otherwise({ redirectTo: '/route1' });
});
app.controller('main', function($scope){
alert('1');
$scope.test = 'Yo.';
});
app.controller('con1', function($scope){
alert('2');
$scope.value = 'value1';
});
app.controller('con2', function($scope){
$scope.value = 'value2'
});
</script>
<script type="text/ng-template" id="view1">
View 1 {{value}}
</script>
<script type="text/ng-template" id="view2">
View 2 {{value}}
</script>
</body>
</html>
I am trying to implement a navigation into a webpage using angularJS. The problem is that the route does not work at all. The browser console does not give any errors and the ng-view just does not show the templatesUrls.
route.js
var routeApp = angular.module('myApp', ['ngRoute']);
routeApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/task.html',
controller: 'TraineesController'
})
.when('/technology', {
templateUrl: 'partials/technology.html',
controller: 'TraineesController'
})
.otherwise({redirectTo:"/technology"});
});
Index.html
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/taskman.css"/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
<script type="text/javascript" src="app/route.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
<a href="#/technology" class="btn btn-sm btn-danger nav-button-margin">
<i class="glyphicon glyphicon-user"></i> Account panel
</a>
<div class="col-sm-12">
<div ng-view></div>
</div><!-- Closing col-sm-12-->
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller('TraineesController', function($scope, $http, $log) {
getTrainee(); // Load all available tasks
function getTrainee(){
$http.post("ajax/getTrainee.php").success(function(data){
$scope.trainees = data;
});
};
});
task.html
<div class="widget-box" id="recent-box" ng-controller="TraineesController">
Random text tables
</div>
remove the ; from here:
.when('/technology', {
templateUrl: 'partials/technology.html',
controller: 'TraineesController'
}) // <-----here you have a ; remove it and it will work.
.otherwise({redirectTo:"/technology"});
; broke the chaining and caused a syntax error there.
update:
you can remove this controller:
<body ng-controller="TraineesController">
and instead you can place the controller in the respective templates.
checkout this plunkr demo.
I've made two different plunkers, the first one is a plain app just to do an example of routes magic with angular...
First example, basic routes
var app = angular.module('plunker', ['ngRoute']);
app.controller('MainCtrl', function($scope) {
$scope.technology = 'this is the tech page';
$scope.task = 'this is the task';
});
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/technology', {
templateUrl: 'technology.html',
controller: 'MainCtrl'
})
.when('/task', {
templateUrl: 'task.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/technology'
});
}
]);
The second example is an myApp example based on your application, it's basicaly your application but slightly different...
Second example, your app
// I like to keep the app.js file "clean", what means that this file will only
// load the app modules and declare the DI of the app...
var app = angular.module('myApp', [
'ngRoute', // ngRoutes directive from angularjs
'myAppControllers', // controllers module, u can add how controllers wtv u need
'myAppRoutes', // routes module, you can keep the routes configs separated or in the same file
]);
// start the modules, other way to do this is to put this lines in every
// single controllers or route file, what is ugly
angular.module('myAppRoutes',[]);
angular.module('myAppControllers',[]);
I'm using bootstrap to display a modal and want it to be shown on click of a anchor tag as a route.
But i'm getting a module error & can't seem to figure out how to resolve it.
HTML
<div ng-view>
<div ng-controller="DetailPageCtrl">
Click here to open modal!
</div>
<script type="text/ng-template" id="modalContainer">
<div ng-controller="ProfileModalCtrl"></div>
</script>
</div>
JS
var app = angular.module('plunker', ['ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/profile', {
templateUrl : 'modalContainer',
controller : 'ProfileModalCtrl'
});
})
app.controller('DetailPageCtrl', function($scope) {
console.log("detail page");
});
app.controller('ProfileModalCtrl', function($scope, $modal) {
$modal.open({templateUrl : 'modal.html'});
});
Code in plnkr :
http://plnkr.co/edit/VbvuWzLqkICFzBYI9sL5?p=preview
Demo is plagued with problems. You haven't included angular-route.js. You didn't provide a default path using otherwise and you placed html within ng-view
/* include script tag with `angular-route.js , then inject as dependency*/
var app = angular.module('plunker', ['ui.bootstrap', 'ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'default'
})
.when('/profile', {
templateUrl: 'modalContainer',
controller: 'ProfileModalCtrl'
}).otherwise({
redirectTo: '/'
})
});
<div ng-view><!-- leave empty --></div>
DEMO
You will also run into problems declaring same ng-controller in markup as in route config...pick one or the other
Your plunker is missing the ngRoute dependency. In newer versions of angular, ngRoute is a separate library that needs to included separately and declared as a module dependency to your app module:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script src="http://code.angularjs.org/1.2.4/angular-route.js"></script>
var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
Also, your routes are not fully defined.
Also, your templates (<script type="text/ng-template">) are defined inside the <div ng-view> element. ng-view is a directive which will replace the content of host div element when route is resolved, so a better place for your templates is outside of ng-view element.
Fixed PLUNKER
var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/profile', {
templateUrl : 'modalContainer',
controller : 'ProfileModalCtrl'
})
.when('/detail', {
templateUrl : 'detail.html',
controller : 'DetailPageCtrl'
})
.otherwise({redirectTo: '/detail'});
});
app.controller('DetailPageCtrl', function($scope) {
console.log("detail page");
});
app.controller('ProfileModalCtrl', function($scope, $modal) {
$modal.open({templateUrl : 'modal.html'});
});
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script src="http://code.angularjs.org/1.2.4/angular-route.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DetailPageCtrl">
Click here to open modal!
</div>
<script type="text/ng-template" id="modalContainer">
<div ng-controller="ProfileModalCtrl"></div>
</script>
<div ng-view></div>
</body>
<script src="script.js"></script>
</html>
I have a problem in angular js routeProvider. If i am clicking register or login link then its not going to the next page just shows url like this. http://localhost:3000/#/register or http://localhost:3000/#/login
Following is my code. thanks in advance
// I gave ngRoute,ngResource, services for intializing myapp but no benefit
script.js
var myapp = angular.module('myapp', []);
myapp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {
templateUrl : '/template/login.html',
controller : loginController
}).when('/register', {
templateUrl : '/template/register.html',
controller : registerController
}).otherwise({
redirectTo : '/'
});
}] );
login.js
function loginController($scope){
}
register.js
function registerController($scope) {
$scope.submit = function() {
if (!($scope.cnfrmPasswd == $scope.passwd)) {
} else {
$.get("/register/"+$scope.name+"/"+$scope.username+"/"+$scope.passwd, function(data) {
});
}
};
}
index.html
<html ng-app="myapp">
<head >
<script src="js/angular/angular-1.0.5/angular.min.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/script.js"></script>
<script src="js/login.js"></script>
<script src="js/register.js"></script>
</head>
<body>
register
login
</body>
</html>
// I tried by adding <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script> <script src="js/angular-resource.js"></script>
You need to add ngView inside your index.html:
<body>
register
login
<ng-view></ng-view>
</body>
Define your controllers with app.controller('LoginCtrl', ...) and reference them with their name as string:
$routeProvider.when('/login', {
templateUrl : '/template/login.html',
controller : 'LoginCtrl'
})
You have to add ng-view inside your body tag and you need to define 'ngRoute' inside your module.
body tag of your index.html
<body>
register
login
<div data-ng-view="" id="ng-view"></div>
</body>
Your myapp variable after added 'ngRoute'
var myapp = angular.module('myapp', ['ngRoute']);
lets see it will work fine.