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'
});
}])
Related
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?
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());
}
}]);
I am using angular to provide the link for my page.
I have something like
//main app configuration
app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives'
]).
config(['$routeProvider', function($routeProvider) {
}]);
//test page configuration
test-controller.js
angular.module('myApp', []).
config(function ($routeProvider) {
$routeProvider.
when('/test/:link', {
templateUrl: 'test/:link.html',
constroller: 'Ctrl'
}).
when('/test2/:link', {
templateUrl: 'test2/:link.html',
constroller: 'Ctrl'
})
}).
controller('Ctrl', ['$scope', function ($scope) {
//scope data
}])
for some reason, the $routeprovide in my test-controller.js doesn't work and output module injection error.
Can anyone help me about it? Thanks a lot!
At first glance, it is because you didn't add 'ngRoute' as dependency in the second definition
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.
I've been getting errors when minifying my AngularJS app because manually injected dependencies aren't working how I'd expect. The following didn't work:
var config = app.config(function($routeProvider) {
$routeProvider
.when('/', {controller: 'PageCtrl', templateUrl: '../templates/home.html'});
.otherwise({redirectTo: '/'});
});
config.$inject = ['$routeProvider'];
The only thing that worked is:
app.config(['$routeProvider', function($routeProvider) {
...
}]);
Why does the first dependency injection technique work for controllers but not configs?
It is because app.config returns reference to the app (for chaining). This code works:
var config = function($routeProvider) {
$routeProvider
.when('/', {controller: 'PageCtrl', templateUrl: '../templates/home.html'})
.otherwise({redirectTo: '/'});
};
config.$inject = ['$routeProvider'];
app.config(config);
http://jsfiddle.net/ADukg/3196/