Develop Reference

Can't inject constant to another module config

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'
});
}])

bower install not generate library in my project

(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);

Tried to load angular more than once with MVC4

I installed AngularJs with MVC4 using Nuget package and created a bundle for AngularJS
bundles.Add(new Bundle("~/bundles/scripts")
.Include("~/Scripts/angular.js")
.Include("~/Scripts/jquery-{version}.js"));
In Layout I included it as follow:
#Scripts.Render("/scripts/angular-route.js")
#Scripts.Render("/scripts/loginController.js")
#Scripts.Render("/scripts/routeConfig.js")
routeConfig.js
angular
.module('MyApp', [
'ngRoute',
'MyApp.ctrl.crud',
])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/Home/Index',
// controller: 'loginController'
});
$routeProvider.when('/login', {
templateUrl: '/Home/loginPage',
controller: 'crudController'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
loginController.js
angular
.module('MyApp.ctrl.crud', [])
.controller('loginController', [
'$scope',
function ($scope) {
alert("In Login Controller")
}
]);
When I program is display following exception:
WARNING: Tried to load angular more than once.
Why I get this Warning?

Current location with angularjs and yeoman

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());
}
}]);

Angulars $routeProvider does not route

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.