I have define the config of my module:
angular
.module('myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/models', {
templateUrl: 'views/models.html',
controller: 'ModelsCtrl',
controllerAs: 'models'
})
.when('/contacts', {
templateUrl: 'views/contacts.html',
controller: 'ContactsCtrl',
controllerAs: 'contacts'
})
.when('/constructor', {
templateUrl: 'views/constructor.html',
controller: 'ConstructorCtrl',
controllerAs: 'constructor'
})
.otherwise({
redirectTo: '/constructor'
});
});
Is it possible to get information about current user state without using angular-ui-router ?
You can inject the $location service and make use of its path() function.
Here is a link to the docs for location $location
angular.module('app')
.run(['$rootScope','$location',
function($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function(e, current) {
console.log('Current route name: ' + $location.path());
}
}]);
Related
I'm trying to understand why when I click on this list item it doesn't want to go to its corresponding page. Instead it reverts back to the main page.
<li ng-click="goToPage('#/show-schedule')">Schedule</li>
angular
.module('CaliforniaJam', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ngFileUpload',
'simplePagination',
'ui.bootstrap',
'ngTouch',
//'mobile-angular-ui'
])
.config(function ($routeProvider) {
$routeProvider
.when('/show-schedule', {
templateUrl: 'views/show-schedule.html',
controller: 'ShowScheduleCtrl',
controllerAs: 'ShowScheduleCtrl'
.otherwise({
redirectTo: '/'
});
});
$scope.goToPage = function(url) {
$rootScope.transition('slide', 'left', url);
}
The problem is I can't insert constant from one module to another's module config.
Main app:
'use strict';
angular.module('identicaApp', [
'ngRoute',
'identicaApp.common',
'identicaApp.mainPage',
'identicaApp.aboutPage',
'identicaApp.registerPlayer'
]).config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/main'});
}]);
common.js:
angular.module('identicaApp.common', [])
.constant('ROOT_PATH', '/static/angular/identica/');
and the problem module:
'use strict';
angular.module('identicaApp.mainPage', [
'ngRoute',
'identicaApp.common'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/main', {
templateUrl: common.ROOT_PATH + 'main_page/main_page.html',
controller: 'MainPageCtrl'
});
}])
.controller('MainPageCtrl', [function() {
}]);
common.ROOT_PATH is not visible by loader...
I think you missed to inject the actual constant to your config call (e.g. the same way you inject services to controllers), and then you have to reference it by it's name:
'use strict';
angular.module('identicaApp.mainPage', [
'ngRoute',
'identicaApp.common'
])
// Here you must inject your 'ROOT_PATH' constant
.config(['$routeProvider', 'ROOT_PATH', function($routeProvider, ROOT_PATH) {
$routeProvider.when('/main', {
templateUrl: ROOT_PATH + 'main_page/main_page.html', // You must reference it by its name (ROOT_PATH)
controller: 'MainPageCtrl'
});
}])
.controller('MainPageCtrl', [function() {
}]);
You need to include the constant and use it like this:
.config(['$routeProvider', function($routeProvider, ROOT_PATH) {
$routeProvider.when('/main', {
templateUrl: ROOT_PATH + 'main_page/main_page.html',
controller: 'MainPageCtrl'
});
}])
If you want to have multiple constant "variables" under ROOT_PATH do it like this.
angular.module('identicaApp.common')
.constant('ROOT_PATH', {
'URL': '/static/angular/identica/',
'NAME': 'Test',
'ANOTHER_THING': 'Something'
});
Then you can use it this way:
.config(['$routeProvider', function($routeProvider, ROOT_PATH) {
$routeProvider.when('/main', {
templateUrl: ROOT_PATH.URL + 'main_page/main_page.html',
controller: 'MainPageCtrl'
});
}])
(function () {
'use strict';
angular.module
('newApp', [ 'ngAnimate',
'ngCookies',
'ngAria',
'ngCookies',
'ngMessages'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.otherwise({
redirectTo: '/'
});
});
})();
i am trying to install bower using command "bower install".
It gives nothing and even no error is coming.
Try passing the global angular in IIFE if you added angular in html by script tag
(function (angular) {
'use strict';
angular.module
('newApp', [ 'ngAnimate',
'ngCookies',
'ngAria',
'ngCookies',
'ngMessages'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.otherwise({
redirectTo: '/'
});
});
})(angular);
I am trying to integrate the following angular module:
https://github.com/wongatech/angular-http-loader/blob/master/app/src/demo.html
into my app
However, when I try to integrate it, I get a white screen.
My code is as follows:
/* global app:true */
/* exported app */
'use strict';
/**
* #ngdoc overview
* #name WebAppApp
* #description
* # WebAppApp
*
* Main module of the application.
*/
var app = angular
.module('WebAppApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'angularUtils.directives.dirPagination',
'ui.bootstrap',
'ng.httpLoader'
])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/login.html',
controller: 'loginCtrl',
// controllerAs: 'login'
})
.when('/home', {
controller: 'homeCtrl',
templateUrl: 'views/home.html',
resolve: {
"checkLoggedIn": function($location, $cookies, $rootScope) {
if (!$cookies.get('globals')) {
$location.path('/');
}
}
},
//controllerAs: 'home'
})
.when('/menteeMentors', {
controller: 'menteeMentorsCtrl',
templateUrl: 'views/listMentorsMentees.html',
resolve: {
"checkLoggedIn": function($location, $cookies, $rootScope) {
if (!$cookies.get('globals')) {
$location.path('/');
}
}
},
//controllerAs: 'home'
})
.when('/myGoals', {
controller: 'myGoalsCtrl',
templateUrl: 'views/myGoals.html',
resolve: {
"checkLoggedIn": function($location, $cookies, $rootScope) {
if (!$cookies.get('globals')) {
$location.path('/');
}
}
},
//controllerAs: 'home'
})
.when('/addGoal', {
controller: 'myGoalsCtrl',
templateUrl: 'views/addGoal.html',
resolve: {
"checkLoggedIn": function($location, $cookies, $rootScope) {
if (!$cookies.get('globals')) {
$location.path('/');
}
}
},
//controllerAs: 'home'
})
.when('/signup', {
templateUrl: 'views/signup.html',
controller: 'signupCtrl',
//controllerAs: 'home'
})
.otherwise({
redirectTo: '/'
});
//check browser support
if (window.history && window.history.pushState) {
//$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">
// to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase
// if you don't wish to set base URL then use this
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
});
.config([
'httpMethodInterceptorProvider',
function(httpMethodInterceptorProvider) {
httpMethodInterceptorProvider.whitelistDomain('validate.jsontest.com');
httpMethodInterceptorProvider.whitelistDomain('github.com');
}
]);
I am using yeoman scaffolding for AngularJS
The error from console is:
Uncaught Error: [$injector:modulerr] Failed to instantiate module WebAppApp due to:
Error: [$injector:nomod] Module 'WebAppApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.3/$injector/nomod?p0=WebAppApp
at REGEX_STRING_REGEXP (http://localhost:9000/bower_components/angular/angular.js:68:12)
at http://localhost:9000/bower_components/angular/angular.js:1958:17
at ensure (http://localhost:9000/bower_components/angular/angular.js:1882:38)
at module (http://localhost:9000/bower_components/angular/angular.js:1956:14)
at http://localhost:9000/bower_components/angular/angular.js:4362:22
at forEach (http://localhost:9000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:9000/bower_components/angular/angular.js:4346:5)
at createInjector (http://localhost:9000/bower_components/angular/angular.js:4272:11)
at doBootstrap (http://localhost:9000/bower_components/angular/angular.js:1630:20)
at bootstrap (http://localhost:9000/bower_components/angular/angular.js:1651:12)
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=urbaneWebAppApp&p1=…F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A1651%3A12)
I have a $routeProvider in my Angular JS application which won't load the template in the ng-view.
I've set up <html data-ng-app="myApp"> and <section data-ng-view></section.
It does neither load the template (doesn't even make an XHR), nor does it redirect on other paths (like /#/foo/bar/foo/ and it doesn't throw an error.
This is my configuration:
angular.module('myApp', ['myAppFilters'])
.config [
'$routeProvider',
($routeProvider) ->
$routeProvider
.when '/:year/:month',
templateUrl: 'partials/detail.html'
controller: DetailCntl
.when '/:user/:year/:month',
templateUrl: 'partials/detail.html'
controller: DetailCntl
.otherwise
redirectTo: '/'
]
Edit: Here's the compiled JS:
angular.module('myApp', ['myAppFilters']).config([
'$routeProvider', function($routeProvider) {
return $routeProvider.when('/:year/:month', {
templateUrl: 'partials/detail.html',
controller: DetailCntl
}).when('/:user/:year/:month', {
templateUrl: 'partials/detail.html',
controller: DetailCntl
}).otherwise({
redirectTo: '/'
});
}
]);
Edit #2: I found the solution by myself:
I had this line in my factories.coffee which overwrote the config:
angular.module('myApp', []).factory 'api', ($http, $q, $cacheFactory) ->
...
Now I have the config assigned to #myApp and am using #myApp.factory 'api', ... and it's working.
I found the solution by myself: I had this line in my factories.coffee which overwrote the config:
angular.module('myApp', []).factory 'api', ($http, $q, $cacheFactory) ->
...
Now I have the config assigned to #myApp and am using #myApp.factory 'api', ... and it's working.
Thanks for your support.