(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);
Related
friends, I am new in angular js and I was trying to work with angular Route, but when I click on #/home it gives me some strange URL http://127.0.0.1:3000/#!/home#%2Fhome
But By default, the otherwise condition is working fine http://127.0.0.1:3000/#!/home
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/list', {
templateUrl: 'Views/listing.html',
controller: 'mycontroller'
}).otherwise({
redirectTo: '/home'
})
}]);
you can try with
use $locationProvider
angular.module('myApp', ['ngRoute'])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('');
}]);
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 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/