here is my code for route provider
var externalapp = angular.module('Example', [ ]);
externalapp.config([ '$routeProvider', function($routeProvider) {
$routeProvider
.when('/name', {
templateUrl : 'views.html',
controller: viewController'
})
.otherwise({
redirectTo: '/notavailable'
});
} ]);
This is not working,it is not loading my html file. Is there anything wrong?
You should inject "ngRoute".
var externalapp = angular.module('Example', [ "ngRoute" ]);
externalapp.config([ '$routeProvider', function($routeProvider) {
$routeProvider
.when('/name', {
templateUrl : 'views.html',
controller: viewController'
})
.otherwise({
redirectTo: '/notavailable'
});
} ]);
For your Info: always see console log for errors.
Related
friends, can anybody help.
Angular 1.4.9 make links like this http://domain/#!/product,
but I need links like this http://domain/#!product with out slash.
Code:
var app = angular.module('myApp', [
'ngRoute'
])
.config([
'$routeProvider',
'$locationProvider',
function ($routeProvider, $locationProvider, ngMeta) {
'use strict';
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
controller: 'HomeCtrl',
templateUrl: 'views/home.html',
})
.when('/article/:slug', {
controller: 'ArticleCtrl',
templateUrl: 'views/article.html'
})
.when('/catalog/:category/:subcategory', {
controller: 'CatalogCtrl',
templateUrl: 'views/catalog.html'
})
.when('/product/:category/:subcategory/:product', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.when('/product/:category/:subcategory/:product/:texture', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/'
});
}
]);
I don't think this is a valid URL - http://domain/#!product
It should be http://domain/#!/product or http://domain/product,
To transform your URLs in desired way, it gives you some heads up -
https://docs.angularjs.org/guide/$location
The error listed in the title is driving me crazy. Why is angular so picky? What is wrong with my syntax? I'm trying to define a controller & sub controller, with a route.
plunker is here
// Declare app level module which depends on filters, and services
var mmm = angular.module('mdp',['ngRoute', 'mmm.controllers']);
mmm.config(['$routeProvider','$locationProvider','$compileProvider','$httpProvider', function($routeProvider, $locationProvider,$compileProvider,$httpProvider) {
$routeProvider
.when('/', {
redirectTo: '/commission',
controller: 'mmmController'
})
.when('/commission', {
templateUrl: 'form.html',
controller: 'commCtlr'
})
.otherwise({
redirectTo: '/commission'
});
$compileProvider.debugInfoEnabled(false);
$httpProvider.useApplyAsync(true);
}])
angular.module('mmm.controllers',[]);
var mmmControllers = angular.module('mmm.controllers');
mmmControllers.controller('mmmController', ["$scope","$rootScope","$http","$location","$route","$log"],function ($scope,$rootScope, $http,$location,$route,$log) {
});
mdpControllers.controller('commCtlr',["$scope"], function($scope) {
});
You had wrong controller registration, ] was in wrong place.
mmmControllers.controller('mmmController', ["$scope","$rootScope","$http","$location","$route","$log",
function ($scope,$rootScope, $http,$location,$route,$log) {
}]);
mdpControllers.controller('commCtlr',["$scope",
function($scope) {
}]);
I'm using uglify to minify my angular files. Where do I use the $inject method in my app.js file?
(function(){
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(function ($routeProvider){
$routeProvider
.when('/',
{
controller: 'HotelsController',
templateUrl: 'js/views/hotels.html'
})
.when('/hotel/:hotelId',
{
controller: 'HotelController',
templateUrl: 'js/views/hotel.html'
})
.otherwise({ redirectTo: '/' });
})
})();
I think you mean how to remain injectables in minification using $inject?
If yes, then:
(function(){
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(configFunction);
function configFunction ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'HotelsController',
templateUrl: 'js/views/hotels.html'
})
.when('/hotel/:hotelId',
{
controller: 'HotelController',
templateUrl: 'js/views/hotel.html'
})
.otherwise({ redirectTo: '/' });
}
configFunction.$inject = ['$routeProvider'];
})();
I'm using cordova angularjs together. I will use the routeprovider.
index.js:
var appGenerator = angular.module('appGenerator', ['ngRoute', 'ngResource']);
appGenerator.config(function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
appGenerator.config(['$routeProvider' function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: "partials/tablePage.html",
controller: "MainCtrl"
})
.when('/contacts', {
templateUrl: "partials/contacts.html",
controller: "ContactsCtrl"
}).otherwise({
redirectTo: '/'
}); }]);
html:
{{table.tablename}}
But I get an net::ERR_FILE_NOT_FOUND(file:///contacts) error
What I'm doing wrong?
I'm building an App that requires authentication and I need to check if the user is authenticated when changing routes before instantiating the route Controller, so I need a function to retrieve the logged user from the server with $http that I need to call in the resolve property of the 'when' and then pass the retrieved user to the controller. How can I declare the function?
This is my app.js
angular.module('MasterToolsApp', ['ui.bootstrap', 'ngRoute', 'ngSanitize', 'ngResource', 'ngAnimate', 'dialogs.main', 'toasty']);
angular.module('MasterToolsApp')
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
redirectTo: '/login'
})
.when('/login', {
templateUrl : 'dist/templates/login.html',
controller : 'LoginController',
resolve : ?
})
.when('/home', {
templateUrl : 'dist/templates/home.html',
controller : 'HomeController',
resolve : ?
})
.when('/entries', {
templateUrl : 'dist/templates/entries.html',
controller : 'EntriesController',
resolve : ?
})
.otherwise({ redirectTo: '/login' });
}]);
I found the answer in another question: Related Question
The resulting code is this:
angular.module('MasterToolsApp', ['ui.bootstrap', 'ngRoute', 'ngSanitize', 'ngResource', 'ngAnimate', 'dialogs.main', 'toasty']);
var Helpers = {
checkAuthentication: function($http) {
return $http(
{
url : '/auth',
method : 'GET',
headers : {'Content-Type': 'application/x-www-form-urlencoded'},
timeout : 10000
}
);
}
};
angular.module('MasterToolsApp')
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
redirectTo: '/login'
})
.when('/login', {
templateUrl : 'dist/templates/login.html',
controller : 'LoginController',
resolve : {
user: ['$http', function($http) {
return Helpers.checkAuthentication($http);
}
]
}
})
.when('/home', {
templateUrl : 'dist/templates/home.html',
controller : 'HomeController',
resolve : {
user: ['$http', function($http) {
return Helpers.checkAuthentication($http);
}
]
}
})
.when('/entries', {
templateUrl : 'dist/templates/entries.html',
controller : 'EntriesController',
resolve : {
user: ['$http', function($http) {
return Helpers.checkAuthentication($http);
}
]
}
})
.otherwise({ redirectTo: '/login' });
}]);