I'm building an app and i have a little problem.
For the index, i change my url with history.pushstate when i click on a button with jquery.
For example, www.mysite.com become www.mysite.com/something without reloading the page. But if a load this page i don't find www.mysite.com because "something" doesn't exist.
And I don't know how do the link between them.
I tried to do this but it doesn't work with AngularJS.
var myApp = angular.module('photo', ['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'machin.html'
});
$routeProvider.when('/something-one', {
templateUrl: 'machin.html'
});
$routeProvider.when('/something-two', {
templateUrl: 'machin.html'
});
$routeProvider.otherwise({ redirectTo: '/' });
}]);
This is the way to do it or I'm just lost ? ^^
Solved
My solution works sorry all. I forgot the script angular-route but the rest of my script works.
In your button, you can bind event using ng-click instead of using jQuery.
<button ng-click="goto('/something')">Go to something</button>
In your controller:
$scope.goto = function(url) {
$location.path(url);
}
When you're working with Jquery, you're out of angular scope. So angular will not know about the URL change. You may need to trigger digest cycle in that case.
You could try this
var myApp = angular.module('photo', ['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'machin.html'
})
.when('/something-one', {
templateUrl: 'machin.html'
})
.when('/something-two', {
templateUrl: 'machin.html'
})
.otherwise({ redirectTo: '/' });
}]);
and in your html
Go to something one
Related
I am an AngularJS beginner. I have the following code:
A component defined by the following js file:
angular.module('EasyDocsUBBApp')
.component('loginTag', {
templateUrl: 'login-tag/login-tag.html',
controller: function () {
alert(1);
this.login = function () {
console.log(this.username + ':' + this.password);
};
}
});
The content of my app.js file, where I also configured the routing is:
var app = angular.module('EasyDocsUBBApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login-tag/login-tag.html'
})
.when('/test', {
templateUrl: 'test.html'
})
.otherwise({
redirectTo: 'login-tag/login-tag.html'
});
});
My issue is that the controller is not loaded (the alert window does not appear). Could someone indicate me what I did wrong? (if any supplementary details on my code are needed, please tell me)
In your configuration for $routeProvider, try this:
.when('/', {
template: '<login-tag></login-tag>'
})
Remember to add your component.js to your index file.
I have just started learning angularJS but i can notice the same thing so many time that at some places when we start writing a function in angularJS i noticed that some people define the function they are going to use like this
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
But the same function is working fine if we just write the function without this ['$routeProvider' like this
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
});
I know there is no big difference when coming to code writing but still is there any difference in both the ways. If yes, then is it about minifying? and is there any negative point other that that of using it?
Thanks in advance!
mainApp.config(['$routeProvider', function($routeProvider) {
}]);
This type define a controller is callled Inline Array Annotation. And It is min-safe. min-safe mean if you minify your code then it will still work.
mainApp.config(function($routeProvider) {
});
This type of define a controller is called 'Implicit Annotation'. And its not min-safe. min-safe mean if you minify your code then it will not work.
And there a another way to declare a controller $inject Property Annotation
var MyController = function($scope, greeter) {
// ...
}
MyController.$inject = ['$scope', 'greeter'];
someModule.controller('MyController', MyController);
read more info click here
I have a module App and factory i18n, what is the best way to call i18n.load
method form App (config? run? etc?)
angular
.module('App', [
'ngRoute',
'service.i18ndb'
])
.config(function ($routeProvider) {
//want to i18n.load() here somehow
$routeProvider
.when('/signin', {
templateUrl: '../views/sign-in.html',
controller: 'SigninCtrl'
})
.when('/mix', {
templateUrl: '../views/mix.html',
controller: 'MixCreateCtrl'
})
.otherwise({
redirectTo: '/signin'
});
});
angular.module('App')
.factory('service.i18ndb', function() {
return {
load: function() { console.log("Busy"); }
}
}
);
The problem you will always have if you use .run is having to deal with a page that has no i18n loaded. This means you will need to have a way to deal with your view when their is no i18n loaded. You can either hide it or the text will flash with the wrong values at first.
However, AngularJS gives you a wonderful feature to make sure it is loaded before your view is loaded: the resolver!
Here is how to do it.
var i18nResolver = function(service.i18ndb) {
return service.i18ndb.promise;
};
$routeProvider
.when('/signin' {
templateUrl: '../views/sign-in.html',
controller: 'SigninCtrl',
resolve: {
i18n: i18nResolver
}
});
You can fix this code to use the correct promise of your HTTP request or whatever service you are using.
One of the benefits of using this way is you can have a different labels for a different page for your i18n and use the i18n service to recover them no matter where you are.
You are defining your app module twice. One you create your factory, it can be injected to the controller and used there. You could try something like this:
angular.module('App', ['ngRoute','service.i18ndb'])
.factory('service.i18ndb', function() {
return {
load: function() { console.log("Busy"); }
}
})
.config(function ($routeProvider) {
//want to i18n.load() here somehow
$routeProvider
.when('/signin', {
templateUrl: '../views/sign-in.html',
controller: 'SigninCtrl'
})
.when('/mix', {
templateUrl: '../views/mix.html',
controller: 'MixCreateCtrl'
})
.otherwise({
redirectTo: '/signin'
});
})
.controller('SigninCtrl', function($scope, service.i18ndb) {
// Call your factory function here
service.i18ndb.load();
// If the function returns a value you could assign it to a scope
// variable so it can be used in your template 'sign-in.html'
$scope.your_variable = service.i18ndb.load();
});
angular
.module('App', [
'ngRoute'
])
.config(function ($routeProvider) {
//want to i18n.load() here somehow
$routeProvider
.when('/signin', {
templateUrl: '../views/sign-in.html',
controller: 'SigninCtrl'
})
.when('/mix', {
templateUrl: '../views/mix.html',
controller: 'MixCreateCtrl'
})
.otherwise({
redirectTo: '/signin'
});
})
.run(['i18ndb', function(i18ndb) {
i18ndb.load();
}])
.factory('i18ndb', function() {
return {
load : function() {console.log('test')}
};
});
);
You were requiring a module which has not been defined (as far as I can tell). The factory you were adding was on the 'App' module not the 'service.i18ndb'.
You then need to dependency inject the i18ndb factory in to the run method to call it from there (presuming that you want to call that function to bootstrap your app).
I'm using $routeProvider to change a page (telmplate) and controller when user click a link.
Like this:
$routeProvider.when('/profile/', {
templateUrl: '/app/views/profile.html',
controller: 'ProfileCtrl'
}).when('/timeline/', {
templateUrl: '/app/views/timeline.html',
controller: 'TimelineCtrl'
}).when('/chat/:username', {
templateUrl: function(param){
if(param){
return '/app/views/chat.html?' + param;
}
return '/';
},
controller: 'ChatCtrl'
}).otherwise({ redirectTo: '/' });
The problem is there are so many pages on my app and I need to register every single url on .when condition repetitively, whereas the template url and controller name is loaded based on link path.
My question is: Can I generalized all those when condition into a single when statement?
Like this:
$routeProvider.when(url, {
templateUrl: '/app/views/' + url + '.html',
controller: url + 'Ctrl'
});
Thanks in advance :)
You can try something like below:
angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/page/:name', {
templateUrl: function(urlattr){
return '/pages/' + urlattr.name + '.html';
},
controller: urlattr.name+'Ctrl.js'
});
}
]);
Please try it. In this case I am assuming your html page name is same as Controller name and have 'Ctrl' as suffix.
I have a url such as this: http://foo.bar/#/some/other/path
How do I capture "some/other/path" as a route parameter?
I tried this:
var App = angular.module("App", [])
.config(function($routeProvider){
$routeProvider
.when('/:path', { controller: ListCtrl, templateUrl: 'list.html'})
.otherwise({ redirectTo: '/'})
});
But :path is only giving me some rather than some/other/path
As mentioned by Stewie in the comment above, Angular unstable 1.1.3 now supports catch-all by using an asterisk.
For example:
var App = angular.module("App", [])
.config(function($routeProvider){
$routeProvider
.when('/*path', { controller: ListCtrl, templateUrl: 'list.html'})
.otherwise({ redirectTo: '/'})
});
Partial string matches—-such as matching for instances of jpg in a url—-still don't seem supported.