Angular - routing why do I getting my controller 2 times called - javascript

I am using routing in angular app. while the page loads, I am getting the controller function triggers 2 times..
How to avoid that or is it have any useful meaning to call 2 times?
any one help me and explain the mistake what i do?
here is my html: //i use jade!
header
h1 Header
div.content(ng-controller="HomeController")
div(ng-view)
footer
h5 Footer
here is my js:
var locations = angular.module('location', ['ngRoute']);
locations.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/inbox/:name', {
controller: 'InboxController',
templateUrl: 'views/inbox.html'
})
.otherwise({redirectTo: '/'});
}]);
locations.controller('HomeController', ['$scope', function($scope){
console.log('hi'); // i am getting 2 times consoled! -why?
}]);

Because you have div.content(ng-controller="HomeController") in your template. You don't need to explicitly define ng-controller directive to your header template because It has already been associated using $routeProvider

Related

ng-view - how to disable re-init of pages

I'm writing an angularjs 1.5.0-rc0 application with angular-route.
Each page in the view is related to another, which means in one tab I start a process, and in another tab I go to view the statistics of the process.
the problem that I'm having is that once I switch tabs, the controller is re-initializing the data and everything is reset.
my ng-view is configured with the following code:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'templates/index.html',
controller: 'IndexController',
controllerAs: 'index'
})
.when('/update-flows-rarities',{
templateUrl: 'templates/update-flows-rarities.html',
controller: 'UpdateFlowsRaritiesController',
controllerAs: 'updateFlowsRarities'
})
.when('/run-flow',{
templateUrl: 'templates/run-flow.html',
controller: 'RunFlowController',
controllerAs: 'runFlow'
})
.when('/system-stats',{
templateUrl: 'templates/system-stats.html',
controller: 'SystemStatsController',
controllerAs:'systemStats'
})
.otherwise({redirectTo: '/'});
});
I don't have any other relevant code to paste since it's a generic question, any information regarding the issue would be greatly appreciated.
In AngularJS, services are instantiated as singleton, So you can store data in them and access that data from your controllers.

How to access an Angular controller from the main page when using ngRoute

I want to access an Angular controller from outside of the controller component.
This is answered well in this question: AngularJS. How to call controller function from outside of controller component
However, what if I am using ngRoute with code like this:
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
});
So the index page only has this tag: <div ng-view></div>.
Is there a way I can access the controller that is currently in the ng-view?
(I tried to locate mainController on the index page, but for:
var scope = angular.element(document.getElementById("mainController")).scope();
scope is undefined.)

AngularJS router doesn't actually route much

So I'm fresh into AngularJS, trying to build my first application. And I'm stuck at routing. The first line works, which is just to load a view when the site is entered, but the next one is just telling me "Object not found".
Now I'm a true noob. I'm just running this on a plain MAMP stack.
This is the code I've written in JS:
angular.module("Portfolio", ['ngRoute', 'ngProgress']);
angular.module("Portfolio").config(function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/assets/pages/home.php',
controller: 'MainController'
}).when('/test', {
templateUrl: "assets/pages/test.php",
controller: 'MainController'
});
$locationProvider.html5Mode(true);
});
I'm certain that there's no mistake in HTML, since the rest of the code works just fine.
So what did I do wrong here? Thanks.
angular.module("Portfolio", ['ngRoute', 'ngProgress']);
angular.module("Portfolio").config(function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/assets/pages/home.php',
controller: 'MainController'
}).when('/test', {
templateUrl: "/assets/pages/test.php",/* your previous template url is not correct.*/
controller: 'MainController'
});
$locationProvider.html5Mode(true);
});
insert / in this routing
templateUrl: "/assets/pages/test.php",

AngularJS TypeError: undefined is not a function on ng-view directive

I'm trying to wire up a simple AngularJS app and I cannot get past a undefined is not a function error on my view directive. The weird thing is that the first view actually loads up and is rendered to the directive but I am unable to navigate to my 2nd view. The controllers definitely aren't running. I'm not sure what's going on here. Any ideas?
Angular version: 1.2.26 (same error with 1.2.20)
Error
App Code
var app = angular.module('myApp', ['ngRoute', 'ngResource']);
app.controller('Home', ['$scope', function ($scope) {
console.log('Home controller hit.');
}]);
app.controller('About', ['$scope', function ($scope) {
console.log('About controller hit.');
}]);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', { templateUrl: 'SiteAssets/views/home.html', controller: 'Home' })
.when('/home', { templateUrl: 'SiteAssets/views/home.html', controller: 'Home' })
.when('/about', { templateUrl: 'SiteAssets/views/about.html', controller: 'About' })
.otherwise({ redirectTo: '/' });
});
You need to inject $document into your controllers like this:
app.controller('About', ['$scope','$document', function ($scope, $document) {
$document.title = 'About Us';
console.log('About controller hit.');
}]);
It might be the $document that is throwing the error, as angular does not know what it is without the injection. However, the error for this issue would be an Error: Unknown provider:
This issue was caused by an error in a script within my Home View. I'm still having an issue with my second view loading up. Thanks to all who helped me on this issue.

AngularJS app URL

I am using ngRoute in my AngularJS app to build up different app routes, below is part of my app.js. Now the problem I am facing is that the URL is shown as ( localhost/myapp/index.html#/home ) while my client needs is at localhost/myapp#/home so I was wondering how I can get the index.html out of the equation or at least make it as localhost/myapp/index#/home without the .html? Thanks
var myApp = angular.module('myApp', ['ngRoute','ngSanitize']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home',
{ templateUrl: 'templates/home.html',
controller: 'homeController'
});
$routeProvider.when('/about',
{templateUrl: 'templates/aboutus.html',
controller: 'aboutUsController'
});
$routeProvider.otherwise({redirectTo: '/home'}); }]);
You should be able to do this with a combination of $locationProvider.html5Mode(true) and <html><head><base href="/myApp">

Categories