I'm trying to show a user registration modal on url change in AngularJS. I'm using Angular routing and my route configs is as follows:
var sgApp = angular.module('sgApp', [
'ngRoute',
]);
sgApp.config(['$routeProvider','$locationProvider',
function($routeProvider, $locationProvider){
$routeProvider.when('/',{
templateUrl: '/static/partials/index.html',
controller: 'indexCtrl'
}).when('/user-signup',{
controller: 'userSignUpCtrl'
}).otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}
]);
In controllers:
sgApp.controller('userSignUpCtrl',['$scope', '$http',
function($scope, $http){
$('#modal-target').modal('show');
}
]);
However, this isn't working as on changing url to /user-signup, the modal doesn't show up. What am I missing?
Because there is no element with #modal-target as id yet so the view was not rendered.
You can put in a timeout and give some delay for showing the modal or can use the angularui modal approach with a template.
Related
I want to get parameter from url in angularjs. for that i have did following.
1. in my app.js
var app = angular.module("testApp",
["ngRoute"]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/subscribe/:statusResponse', {
templateUrl: "client/subscription/statusResponse.html",
controller: "testController"
})
.otherwise({
redirectTo: "/"
});
// use the HTML5 History API
// $locationProvider.html5Mode(true);
}]);
2 in controller file:
app.controller("testController",['$routeParams',function($routeParams){
console.log($routeParams.statusResponse);}]);
in html file right now i have added simple text with define testApp.
The problem is that
when i hit url in browser
app.dev/demoapp/#/subscribe/test
it automatically grab
app.dev/demoapp/#/subscribe/:statusResponse
so what should be the problem i am not able to find that?
While developing some SPA AngularJS Application I define the rooting with $routeProvider. Everythings works fine, but I get tired with clicking through the whole application to see particular changes I've done anytime I republish the application to the server. Is there a possibility to change this behaviour? I mean, when I hit refresh on my browser or use some tools for automatical refreshing (like LiveReload Server) is there a way to tell angularJS to not to navigate to the default page?
Regarding to the comments below, here is the routing content.
Below is the MainRoutingContent
'use strict'
angular.module('MainModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'webapp/modules/authentication/views/login.html',
hideMenus: true
})
.when('/register', {
controller: 'RegistrationController',
templateUrl: 'webapp/modules/registration/views/register.html'
})
.when('/', {
controller: 'HomeController',
templateUrl: 'webapp/modules/home/views/home.html'
})
.otherwise({ redirectTo: '/login' });
}]);
The single html page has the ng-view defined:
<div>
<div ng-view></div>
</div>
And some additional for the RegistrationModule:
angular.module('RegistrationModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/register/user', {
controller: 'UserRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-user.html'
})
.when('/register/company', {
controller: 'CompanyRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-company.html'
});
}]);
Ok, I got it. I defined some run block in the main module of my application with the redirection to the /login page. Here is the code:
angular.module("app", [...])
.run(['$location',
function ($location) {
$location.path('/login');
}])
If someone will get such an issue with refreshing the page in the future, please look for some run block defined in your code.
So I'm trying to learn how to use Angulars routing, following tutorials online, and I can't seem to figure out where I'm going wrong. I have the following code:
var app = angular.module('gamersplane', ['controllers', 'ngCookies', 'ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/pms/:box?', {
controller: 'pmList'
}).when('/pms', {
controller: 'pmList'
}).otherwise({
controller: 'pmList'
});
}])
var controllers = angular.module('controllers', []);
controllers.controller('pmList', function ($scope, $cookies, $http, $routeParams) {
console.log($routeParams);
});
However, no matter what I do, the controller doesn't get hit. I have otherwise in the router, so isn't that where it should hit if all else fails?
Yes it will hit otherwise but you can only define the redirect path into it and that redirect path will tell the url and the controller to set for the $route.current :-
redirectTo: '/pms'
Doc
You need to add a template to each route:
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/pms/:box?', {
controller: 'pmList',
template: 'test.html'
}).when('/pms', {
controller: 'pmList',
template: 'test.html'
}).otherwise({
controller: 'pmList',
template: 'test.html'
});
}])
squiroids suggestion regarding otherwise was correct, you won't see a change in your test application though.
Routing is meant to be used to navigate between regions of your application. You could have an app with two routes: pms which shows a list of PMs and pms/:box zu view a particular PM Box. The main task for ngRoute is to replace a placeholder in your application (ng-view) with a given template. Without using a template on the individual routes, your $routeProvider will not navigate as expected.
Given you have two views for the regions (pmBox.html and pmList.html), you could configure your $routeProvider zu setup routing like this: https://gist.github.com/kpko/bd0231ccefbaf8c415c7
I'm new to Angular and cannot figure out how to get a route working inside of phonegap. Here is my Angular code:
var app = angular.module('app', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/views/main.html',
controller: 'mainControl'
})
$routeProvider.when('/test' , {
templateUrl: 'app/views/test.html',
controller: 'testControl'
})
$routeProvider.otherwise({
redirectTo: '/'
});
});
app.controller('mainControl' , function(){
})
app.controller('testControl' , function(){
})
I'm trying to access '/test' with this link inside of my main.html:
<span>Click <a href='/test'>here</a> to go to the test page<span>
When I click the link inside of ripple I'm getting a 404 in the console for localhost:4400/test/
Like I said I'm new to Angular so from what I can tell both routeProviders match up but I can't get the page to load when clicked through the link.
Help is always appreciated.
I think you need a hashtag before the slash.
<span>Click <a href='#/test'>here</a> to go to the test page<span>
Hope this solves this problem.
I have SPA which uses ngAnimate. If this app works without $templateCache animation work fine, but if I try to load templates from $templateCache animation does not work.
Maybe if application uses $templateCache need add some config...
How can I fix this issue ?
My Views
angular.module('Views', ['views/index.html']);
angular.module("views/index.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("index.html", '<.... html index tpl ....>');
}]);
App
angular.module('MyApp', [
'ngRoute',
'ngAnimate',
'Views'
])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/index.html',
controller: 'IndexCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);