Whenever I change a route, my app sends two unwanted GET request to the server. One fetches favicon and another one index.html file.
var app = angular.module('myApp', ['ngRoute', 'ngTagsInput']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
templateUrl: 'views/profile.html',
resolve: {
async: ['$http', function($http) {
return $http.get('/api/getUserInfo');
}],
dialogs: ['$http', function($http) {
return $http.get('/api/dialogs');
}]
},
controller: 'ProfileController'
})
.when('/friends', {
template: '<div friends-directive votes="model.user.votes" friends="model.friends"></div>'
})
.when('/comment', {
template: '<div comment-directive></div>'
})
.when('/dialogs', {
template: '<div dialog-directive messages="model.messages" dialogs="model.dialogs" new-messages="model.newMessages"></div>'
})
.when('/messages', {
template: '<div messages-directive messages="model.messages"></div>',
resolve: {
async: ['$http', function($http) {
return $http.get('/api/message');
}]
},
controller: 'MessagesController'
})
.when('/search', {
template: '<div search-directive></div>'
})
.when('/balance', {
templateUrl: 'views/balance.html'
})
.when('/users/:username', {
template: '<div users-directive user-profile="model.userProfile" switcher="switcher(path)" resource="model.resource"></div>',
resolve: {
async: ['$http', '$route', function($http, $route) {
return $http.get('/api/users/' + $route.current.params.username);
}]
},
controller: 'UsersController'
})
.otherwise({redirectTo: '/'});
}]);
app.run(['$http', '$window', function($http, $window){
var update = function(){
$http.get('/updatetime')
};
setInterval(update, 60 * 1000);
$window.onload = function() {
update();
}
}])
<base href="/">
<aside id="aside">
<div><img src="images/profile.svg"></div>
<div><img src="images/users.svg"></div>
<div><img src="images/search.svg"></div>
<div><img src="images/database.svg"></div>
<div><a ng-click="logout()"><img src="images/help.svg"></a></div>
</aside>
I just noticed these unwanted requests. Everything else works okay. Any idea what's going on?
FIXED: I didn't have favicon.ico file on my server. That's it!
Related
am learning angular 1.6.2 and am stuck with the $resource getting Error: [$injector:unpr] http://errors.angularjs.org/1.6.2/$injector/unpr?p0=HomeServiceProvider%20%3C-%20HomeService
am not sure what the problem could be please help me
controller.js
"user strict";
angular.module('app')
.component('home', {
restrict: 'E',
scope: {},
templateUrl: 'home/home.html',
controller: HomeController
function HomeController(HomeService) {
var vm = this;
vm.message = 'Hi from home page';
vm.users = HomeService.query();
};
service.js
"use strict";
angular
.module('app.services', [])
.factory('HomeService', HomeService);
HomeService.$inject = ['$resource'];
function HomeService($resource) {
return $resource('http://jsonplaceholder.typicode.com/users/:user', {user: '#user'}, {
update: {
method: 'PUT'
}
});
}
app.js
"use strict";
angular.module("app", [
"ui.router",
"ngResource",
"app.service"
])
.config([
"$stateProvider",
"$urlRouterProvider",
"$locationProvider",
function ($stateProvider,$urlRouterProvider ,$locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise('/');
$stateProvider
.state('/home',
{
url: "/",
template: "<home></home>"
})
.state('/about',
{
url: "/about",
template: "<about></about>"
})
.state('/contact',
{
url: "/contact",
template: "<contact></contact>"
});
}
]);
You forgot to inject "HomeService" to HomeController?
I am using a great template for ionic tabs and side menu as having issues with the navigation from the tabs. But when I use the code pen example and structure the html files into a templates folder and update the app.js file I lose the navigation. I obviously do not understand the js link format correctly. Please could someone explain it to me.
My code pen is here
The original is here
app.js (each html file is in www/templates
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url: '/entry/templates',
templateUrl: 'templates/entry.html',
controller: 'EntryPageController'
})
.state('main', {
url: '/main/templates',
templateUrl: 'templates/mainContainer.html',
abstract: true,
controller: 'MainController'
})
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'templates/home.html',
controller: 'HomePageController'
}
}
})
.state('main.info', {
url: '/info',
views: {
'main': {
templateUrl: 'templates/info.html',
controller: 'InfoPageController'
}
}
})
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: 'templates/tabs.html',
controller: 'TabsPageController'
}
}
})
$urlRouterProvider.otherwise('/entry');
}])
.controller('MainController', ['$scope', function ($scope) {
$scope.toggleMenu = function () {
$scope.sideMenuController.toggleLeft();
}
}])
.controller('EntryPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function () {
$state.go('main.home');
}
}])
.controller('HomePageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Home Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
.controller('InfoPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Info Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
.controller('TabsPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Tab Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
}])
enter code here
I am pretty new to Angular UI-ROUTER, I wonder how can I define same URL but with different parameters combination like:
$stateProvider
.state("no_param",{
url: "/param",
/* if no param, goes here*/
template: "<div ng-repeat='p in params'>{{p}}</div>",
controller: function($scope, $stateParams){
$scope.params = $stateParams;
}
})
.state("one_param",{
url: "/param?param1",
/* if one param1, goes here*/
template: "<div ng-repeat='p in params'>{{p}}</div>",
controller: function($scope, $stateParams){
$scope.params = $stateParams;
}
})
.state("another_one_param",{
url: "/param?param2",
/* if one param2, goes here*/
template: "<div ng-repeat='p in params'>{{p}}</div>",
controller: function($scope, $stateParams){
$scope.params = $stateParams;
}
})
.state("two_param",{
url: "/param?param1¶m2",
/* if param1 & param2, goes here*/
template: "<div ng-repeat='p in params'>{{p}}</div>",
controller: function($scope, $stateParams){
$scope.params = $stateParams;
}
})
I tried this, but it does not work. Nothing shown, only display a blank page.
Then I set a breakpoint inside the controller, it turns out that the controller never get run when I navigate to a URL like /param?param2=test
Could anyone help?
What you are missing is the views property, here is a working example:
JSFiddle
angular.module('myApp', ['ui.state'])
.config(['$stateProvider', '$routeProvider',
function($stateProvider, $routeProvider) {
$stateProvider
.state('test', {
url: '/test',
views: {
'main': {
template: '<a ng-href="#/test/hello">param1</a> - <a ng-href="#/test/hello/world">param2</a>',
}
}
})
.state('one_param', {
url: '/test/:param1',
views: {
'main': {
template: '<a ng-href="#/test">home</a> <div ng-repeat="p in params">{{p}}</div>',
controller: function($scope, $stateParams) {
$scope.params = $stateParams;
}
}
}
})
.state('two_param', {
url: '/test/:param1/:param2',
views: {
'main': {
template: '<a ng-href="#/test">home</a> <div ng-repeat="p in params">{{p}}</div>',
controller: function($scope, $stateParams) {
$scope.params = $stateParams;
}
}
}
});
}
]);
Can anyone help me to pass the variable
$scope.imageRepoUrl from controller.js to app.js
controller.js
.controller('deallistCtrl', ['$scope','deals', function($scope, deals) {
$scope.title = "test";
$scope.deals = deals.payload;
$scope.imageRepoUrl=$scope.$parent.imageRepoUrl;
$scope.appWebUrl=$scope.$parent.appWebUrl;
}])
app.js
.state('app.deallists', {
url: "/deallists",
views: {
'menuContent': {
templateUrl: "templates/deallists.html",
controller: 'deallistCtrl',
resolve: {
deals: ['$http', function($http){
return $http.get('deal/deals').then(function(response){
return response.data;
})
}]
}
}
},
})
I have started with angular but I have some problem with kind of object in angular.
What kind of $scope in this screen? and how to get 'title' in that.
Here is my code.
define(['angularAMD', 'angular-route'], function(angularAMD) {
var app = angular.module("coreModule", ['ngRoute']);
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when("/home", angularAMD.route({
templateUrl: 'home.html',
controller: 'HomeCtrl',
title: 'Home',
controllerUrl: 'ctrl/home',
})).
when("/list", angularAMD.route({
templateUrl: 'views/news.html',
controller: 'newsCtrl',
controllerUrl: 'ctrl/news'
})).
otherwise({
redirectTo: '/home'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: true,
});
}
]);
app.run(['$rootScope', '$route',
function($rootScope, $route) {
$rootScope.$on('$routeChangeSuccess', function() {
console.log($rootScope);
});
}
]);
app.factory('Page', function() {
var title = 'default';
return {
title: function() {
return title;
},
setTitle: function(newTitle) {
title = newTitle;
console.log(title);
}
};
});
return angularAMD.bootstrap(app);
});
I want to get 'title' from controller.
Any idea? Thanks
I am still not sure what you are trying to do but here is my guess.
If you are trying to set the page title from the controller then here is how I would do it. And that is Not set it from the controller. I would set it on the state as you have already done and then pick it up on every state change.
aspStratMed.run(['$rootScope', function ($rootScope)
{
$rootScope.$on('$stateChangeStart', function (event, toState)
{
if (toState.data && toState.data.pageTitle)
$rootScope.pageTitle = toState.data.title;
});
And then in the HTML just use this where every you need the page title
{{pageTitle}}