I configured my routes in the module and it's working pretty good, but I'm also trying to add a loading indicator,which will intercept any http request and put a loading image but it's not working. Here's my module:
var myApp = angular.module('myApp', ['ngRoute', 'angular-loading-bar', 'ngAnimate', 'ui.bootstrap']);
myApp.config(["$routeProvider", "$locationProvider",
function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
templateUrl: "/pages/home.html"
})
.when("/currency", {
templateUrl: "/app/series/currencySearch.html",
controller: "currencyController"
})
.when("/others", {
templateUrl: "/app/series/genericSearch.html",
controller: "genericController"
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(false);
}]);
myApp.config(['cfpLoadingBarProvider', function (cfpLoadingBarProvider) {
cfpLoadingBarProvider.spinnerTemplate = '<div style="margin:20% 0 0 50%;"><span class="fa fa-spinner fa-pulse fa-3x"></div>';
}]);
It's possible to use two config functions this way?
Many thanks!
I don't see why not. It will just run them one after another.
That way, if you want to, you could write a separate config method for each $provider object.
The question is, why does it have to have two configs? It should work fine as one config method.
myApp.config(["$routeProvider", "$locationProvider", "cfpLoadingBarProvider",
function ($routeProvider, $locationProvider, cfpLoadingBarProvider) {
$routeProvider
.when("/", {
templateUrl: "/pages/home.html"
})
.when("/currency", {
templateUrl: "/app/series/currencySearch.html",
controller: "currencyController"
})
.when("/others", {
templateUrl: "/app/series/genericSearch.html",
controller: "genericController"
})
.otherwise({
redirectTo: "/"
});
$locationProvider.html5Mode(false);
cfpLoadingBarProvider.spinnerTemplate = '<div style="margin:20% 0 0 50%;"><span class="fa fa-spinner fa-pulse fa-3x"></div>';
}]);
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
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?
Already done research and looked up doc. How can I use AngularJS to go from page1 to page2
Module (I'm not sure am I suppose to put in Index.cshtml)
var myApp = angular.module('app', ['ngRoute', 'Anj.FormController'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.
when("/home",
{ templateUrl: "/Index.cshtml" }).
when("/form",
{ templateUrl: "/Form" }).
otherwise({ redirectTo: "/Form.csthml" });
});
Index.cshtml
<div class="container" ng-app="app" ng-controller="FormCtrl"> Go to Form.</div>
Form.cshtml
<div class="container" ng-app="app" ng-controller="FormCtrl">Go to Home.</div>
I don't think put anything in the controller, if yes please tell me or show me the code. thanks.
Try to change your templateUrl to "/[ControllerName]/Index"
Where [ControllerName] is controller that you going to call
var myApp = angular.module('app', ['ngRoute', 'Anj.FormController'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.
when("/home",
{ templateUrl: "/Home/Index" }).
when("/form",
{ templateUrl: "/Form" }).
otherwise({ redirectTo: "/Home/Form" });
});
There are 2 views with respective controllers.
The links are in View1.Clicking on this link should load View2 and also read the parameters.
This is what I have tried but the alert says - undefined.
View2 can load with/without params - each case having a different workflow.
View1.html:
<div ng-controller="view1ctrl">
<a href="#/view2/pqid/775/cid/4" >Link1</a>
</div>
app.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl: 'App/views/view1.html',
controller: 'view1ctrl'
})
.when('/view2', {
templateUrl: 'App/views/view2.html',
controller: 'view2ctrl'
})
.when('/view2/:pqid/:cid', {
templateUrl: 'App/views/view2.html',
controller: 'view2ctrl'
})
.otherwise({
redirectTo: '/view1'
});
}]);
view2ctrl.js:
app.controller("view2ctrl", ['$scope','$routeParams',function ($scope, $routeParams) {
var init = function () {
alert($routeParams.pqid);
}
init();
}]);
You are nearly there:
.when('/view2/:pqid/:cid'
maps to a URL in this format :
view2/1234/4567
1234 being the pqid and 4567 the cid.
So your routing, I think is working, just change the link to #/view2/775/4.
Or if you want to keep the same link change your routing to:
#/view2/pqid/:pqid/cid/:cid
I am using MVC Web API and Angular JS
When i am giving single routeProvider, then its working after adding one more routeProvider its not working....
My Code Is:
var phoneModelsApp = angular.module('phoneModelsApp', ['ngRoute']);
phoneModelsApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/phonelist', {
templateUrl: 'partials/Test1.html',
controller: 'phoneListCtrl'
}).
$routeProvider.when('/phonelist1', {
templateUrl: 'partials/Test2.html',
controller: 'phoneListCtrl'
}).
otherwise({
redirectTo: '/phonelist'
});
}]);
You need to add to in your urls "#" or adding in your configuration:
$locationProvider.html5Mode(true);
In order to remove the # in Angular you need to make an small change in your configuration:
You need to add:
$locationProvider.html5Mode(true);
This is the whole version:
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
.when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});