I have a small problem, I am using a route like
.when('/beta/profiles/new', {
controller: 'ProfilesController',
controllerAs: 'vm',
templateUrl: 'profiles/new.html',
resolve: {
action: function() { return "new"; }
}
})
.when('/beta/profiles/index', {
controller: 'ProfilesController',
controllerAs: 'vm',
templateUrl: 'profiles/index.html',
resolve: {
action: function() { return "index"; }
}
})
now in my controller I have something like this:
function ProfilesController(profileService, action) {
var vm = this,
permittedActions = ["index", "new"];
var actions = {
index: function() {
vm.hideProfile = {
currentProfile: null,
showModal: false,
setCurrentProfile: function(profile_id) { this.currentProfile = profile_id },
toggleHide: function() {/*...*/}
}
profileService.all().then(function(data) {
vm.profiles = data.result;
})
},
new: {/*.. */}
}
if(permittedActions[action] > -1) actions[action]();
}
now my question is if I hit a link (in the header,lets say) multiple times in succession, each time I hit profiles/index.html should it re-initialize everything ?
if I want to takethe advantage of angular's dirty checking thing should I put the vm.hideProfile out of the index function ? and If I do that should I also not do the same with vm.profiles = [];?
how/what can I do to check if variables are getting re-initialized and angular's dirty checking is not in play, or is it just common sense!! or should I just have a separate controller for each action?
and in case of re-initialization, is there any better way so that I can keep the hideProiles inside the index because I really don't need my new and show actions to know about hideProfile, since its unnecessary?
A few things that hopefully can help:
Dirty checking is for objects bound to an active $scope (and $rootScope). https://docs.angularjs.org/guide/scope
To use $scope in your controller, (a) inject it. e.g. ProfilesController($scope, profileService, action), (b) put things on it, e.g. $scope.vm = vm;
looking at your code, the raw initialization should be super fast.
Don't think javascript is secure. If security is a real concern for your app, protect at the server.
Lastly on app arch, since angular is an MVC framework: define functions in your controller, and connect them to actions in the view via $scope. eg
$scope.index = function() { // do stuff
if (action !== "index") {return}; // disallowed by route
//continue
}
Related
I couldn't come up with normal title. Sorry for that.
So the problem is that in a big project, with big business logic there are a lot of modals. And every new modal is the same code with little changes, like templateUrl, controller and such things. This is how pop up is getting called now:
return uibModal.open({
templateUrl: current.path + 'url.html',
controller: 'AppController',
windowClass: 'PopUp',
size: 'md',
resolve: {
disabled: [function () {
return scope.disabled;
}]
}
}).result.then(function( comment ){
record.comment = comment;
})
And this routine never ends. So what I'm interested in is - what is the best practice to reduce the same code(same to this situation) in your project? Should you use service? Or just create global function?
In AngularJS you should always avoid global functions. Services were created for this purpose. I also use $uibModal and was tired of writing the same thing over and over again.
I made a ModalService which allowed me to abstract away a lot of the repetitive code:
function ModalService() {
var ModalService = this;
ModalService.basicModal = function(options) {
var _options = options || {};
return $uibModal.open({
animation: angular.isDefined(_options.animation) ? _options.animation : true,
keyboard: angular.isDefined(_options.keyboard) ? _options.keyboard : true,
backdrop: _options.backdrop || 'static',
size: _options.size || 'sm',
templateUrl: _options.templateUrl || 'templates/modal-message.html', //default template in case user does not provide one
controller: _options.controller || ModalMessageCtrl, // a default controller in case user does not provide one
controllerAs: _options.controllerAs || 'vm',
resolve: options.resolve || {}
});
};
ModalService.simpleModal = function(options) {
...
};
}
You can define many varieties of modals that can be invoked easily from the controller:
ModalService.basicModal();
ModalService.simpleModal();
// etc...
And all of these can accept optional parameters to customize the modal:
ModalService.basicModal({
size: 'lg'
});
ModalService.simpleModal({
templateUrl: "my-custom-template.html",
controller: function($scope) {
//some custom inline controller
}
}).result.then(function() { //do something });
// etc...
You can use $uibModalProvider.options to set the default options during the configuration phase of the application.
app.config(function($uibModalProvider) {
$uibModalProvider.options = {
windowClass: 'PopUp',
size: 'md'
};
});
If you're using UI Bootstrap 2.1.0 or greater you can also leverage angular's component based architecture to remove some of the extra cruft when opening a modal.
Given a component defined as follows:
app.component('myModal', {
bindings: {close: '&', dismiss: '&', resolve: '<'},
controller: MyModalController,
templateUrl: 'myModal.html'
});
You can leverage the component in a modal as follows:
$uibModal.open({
component: 'myModal',
resolve: {
// pass data to component
}
}).result.then(function() {
// Modal closed
}).catch(function() {
// Modal dismissed
});
Question: how do I access a dynamically generated data in scope B, when I go from scope A and generate this data in scope A, using angular's ui-controller. Data is not available when the scope is initialized.
Note: I am fine with showing request data in the URL. I'm looking for the simplest way for new state to read data it needs and pass it to server and properly generate its contents.
When the page loads, it fetches data from server and populates scope "tests" with new data. This new data is shown on the page. I create links to scope "test" with this data. Links look like this:
<a ui-sref="test({id:test._id})">{{test.name}}</a>
On a rendered page it looks like this:
<a ui-sref="test({id:test._id})" class="ng-binding" href="#/test/57adc0e30a2ced3810983640">A test</a>
The href is correct and points to a database reference of an item. My goal is to have this reference as a variable in scope "test". My state provider:
$stateProvider
.state('tests', {
url: '/tests/',
templateUrl: 'test/index.html',
controller: 'Test.IndexController',
controllerAs: 'vm',
data: { activeTab: 'tests' }
})
.state('test', {
url: '/test/{id}',
templateUrl: 'test/item.html',
controller: 'Test.ItemController',
controllerAs: 'vm',
data: {
activeTab: 'tests',
testId: '{id}'
}
});
So far no matter what I tried I couldn't access "testId" in the "test" scope. It was either "undefined", created errors or returned "itemId: {id}".
My Item.Controller:
(function () {
'use strict';
function Controller(TestService) {
var vm = this;
vm.test = null;
function getTest(id) {
TestService.GetTestById(id).then(function(test) {
vm.test = test;
});
}
function initController() {
getTest(...);
}
initController();
}
angular
.module('app')
.controller('Test.ItemController', Controller);
})();
TestService provides http get methods for getting data from server.
(function () {
'use strict';
function Service($http, $q) {
var service = {};
function handleSuccess(res) {
return res.data;
}
function handleError(res) {
return $q.reject(res.data);
}
function GetTestById(_id) {
var config = {
params: {
testId: _id
}
};
return $http.get('/api/tests/:testId', config).then(handleSuccess, handleError);
}
service.GetTests = GetTests;
service.GetTestById = GetTestById;
return service;
}
angular
.module('app')
.factory('TestService', Service);
})();
I tried $scope - scope is not defined. I tried a number of other techniques, shown by other users with similar success - either "undefined" or error of some sort.
This is based on another person's code so there may be obvious mistakes, please let me know if you find any. If you need more code, let me know - I'll upload it to github (its a messy work in progress at the moment so I'm not sure what should be uploaded).
I have 2 views that share the same controller. In each one of this view I used resolve to retrieve some date before displaying it. Then I inject it in my controller (so I inject two dependancy for each view).
But the problem is when I go from a view to another, the console display an error because it doesn't see the dependancy from the other view. This is my route configuration
.state('ambassade', {
url: '/mot_ambassadeur',
views: {
"#": {
templateUrl: "pages/GestionAmbassade/mot_ambassadeur.html",
controller: "GestionAmbassadeController",
resolve: {
informationsAmbassade: function(GestionAmbassadeService) {
return GestionAmbassadeService.getMotAmbassadeurService();
}
}
}
}
})
.state('personnel', {
url: '/personnel',
views: {
"#": {
templateUrl: "pages/GestionAmbassade/personnel.html",
controller: "GestionAmbassadeController",
resolve: {
personnelAmbassade: function(GestionAmbassadeService) {
return GestionAmbassadeService.getPersonnelService();
}
}
}
}
})
This is my controller, the 2 injections are informationsAmbassade and personnelAmbassade :
.controller('GestionAmbassadeController', function ($rootScope, $scope, $injector, $sce,
informationsAmbassade,
personnelAmbassade) {
$scope.getMotAmbassadeur = function () {
if (localStorage.getItem("lang") == "fr") {
$scope.motAmbassadeur = $sce.trustAsHtml(informationsAmbassade.contents[0].translation.fr_fr.contenu);
$scope.load = true;
}
$scope.photoAmbassadeur = informationsAmbassade.contents[0].content.path;
};
$scope.getPersonnel = function () {
$scope.Personnels = [];
if (localStorage.getItem("lang") == "fr") {
for (var i = 0; i < personnelAmbassade.contents.length; i++) {
//if ( angular.isDefined(res.contents[i].type) && res.contents[i].type.nom == 'personnel' )
$scope.Personnels.push({
nom: $sce.trustAsHtml(personnelAmbassade.contents[i].translation.fr_fr.contenu),
poste: $sce.trustAsHtml(personnelAmbassade.contents[i].translation.fr_fr.titre)
});
}
$scope.load = true;
}
};
So when I go to ambassade route it doesn't see the personnalAmbassade injection and vice-versa. I know I can use the two resolves for each state but this is what I'm avoiding for performance purpose. Can someone help me figure out this "issue".
You should see the inject in the controller as an Interface from more object orientated languages.
So name it something like entityService and make it so both services you are trying to inject have a method of the same name that you can call from the controller. (Or in your case 'contents' arrays)
.controller('GestionAmbassadeController', function ($rootScope, $scope, $injector, $sce,entityService) {
Then in the resolve put:
entityService: return GestionAmbassadeService.getPersonnelService();
or
entityService: return GestionAmbassadeService.getMotAmbassadeurService();
Depending on the controller instance.
Edit: It doesn't seem like a good idea to have the same controller for both states it this case. You will only be able to use one of the two defined scope functions anyway. So it would be beter to just have separate controllers.
Thank you guys. Both answers solved the problem (I tried them :D). But I think the first one is more suitable because in the second one when I have too many pages for the same controller it will be a little slower than the first answer.
But both still works. Thank you.
edit : when I said the first one I was talking about Bob Brinks answered. It moves down when he edited it.
You should create a top abstract state to resolve your datas, then you are sure to load the right dependencies (both of them) when you are in your controller.
.state('app', {
abstract:true,
template:'<div ui-view></div>',
resolve:{
informationsAmbassade: function(GestionAmbassadeService) {
return GestionAmbassadeService.getMotAmbassadeurService();
},
personnelAmbassade: function(GestionAmbassadeService) {
return GestionAmbassadeService.getPersonnelService();
}
}
}
.state('app.ambassade', {
url: '/mot_ambassadeur',
views: {
"#": {
templateUrl: "pages/GestionAmbassade/mot_ambassadeur.html",
controller: "GestionAmbassadeController"
}
}
}
})
.state('app.personnel', {
url: '/personnel',
views: {
"#": {
templateUrl: "pages/GestionAmbassade/personnel.html",
controller: "GestionAmbassadeController"
}
}
})
I have an AngularJS service which communicates with the server and returns
translations of different sections of the application:
angular
.module('utils')
.service('Translations', ['$q','$http',function($q, $http) {
translationsService = {
get: function(section) {
if (!promise) {
var q = $q.defer();
promise = $http
.get(
'/api/translations',
{
section: section
})
.success(function(data,status,headers,config) {
q.resolve(result.data);
})
.error(function(data,status,headers,config){
q.reject(status);
});
return q.promise;
}
}
};
return translationsService;
}]);
The name of the section is passed as the section parameter of the get function.
I'm using AngularJS ui-router module and following design pattern described here
So I have the following states config:
angular.module('app')
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('users', {
url: '/users',
resolve: {
translations: ['Translations',
function(Translations) {
return Translations.get('users');
}
]
},
templateUrl: '/app/users/list.html',
controller: 'usersController',
controllerAs: 'vm'
})
.state('shifts', {
url: '/shifts',
resolve: {
translations: ['Translations',
function(Translations) {
return Translations.get('shifts');
}
]
},
templateUrl: '/app/shifts/list.html',
controller: 'shiftsController',
controllerAs: 'vm'
})
This works fine but as you may notice I have to explicitly specify translations in the resolve parameter. I think that's not good enough as this duplicates the logic.
Is there any way to resolve translations globally and avoid the code duplicates. I mean some kind of middleware.
I was thinking about listening for the $stateChangeStart, then get translations specific to the new state and bind them to controllers, but I have not found the way to do it.
Any advice will be appreciated greatly.
Important note:
In my case the resolved translations object must contain the translations data, not service/factory/whatever.
Kind regards.
Let me show you my approach. There is a working plunker
Let's have a translation.json like this:
{
"home" : "trans for home",
"parent" : "trans for parent",
"parent.child" : "trans for child"
}
Now, let's introduce the super parent state root
$stateProvider
.state('root', {
abstract: true,
template: '<div ui-view=""></div>',
resolve: ['Translations'
, function(Translations){return Translations.loadAll();}]
});
This super root state is not having any url (not effecting any child url). Now, we will silently inject that into every state:
$stateProvider
.state('home', {
parent: 'root',
url: "/home",
templateUrl: 'tpl.html',
})
.state('parent', {
parent: 'root',
url: "/parent",
templateUrl: 'tpl.html',
})
As we can see, we use setting parent - and do not effect/extend the original state name.
The root state is loading the translations at one shot via new method loadAll():
.service('Translations', ['$http'
,function($http) {
translationsService = {
data : {},
loadAll : function(){
return $http
.get("translations.json")
.then(function(response){
this.data = response.data;
return this.data;
})
},
get: function(section) {
return data[section];
}
};
return translationsService;
}])
We do not need $q at all. Our super root state just resolves that once... via $http and loadAll() method. All these are now loaded, and we can even place that service into $rootScope:
.run(['$rootScope', '$state', '$stateParams', 'Translations',
function ($rootScope, $state, $stateParams, Translations) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.Translations = Translations;
}])
And we can access it anyhwere like this:
<h5>Translation</h5>
<pre>{{Translations.get($state.current.name) | json}}</pre>
Wow... that is solution profiting almost from each feature coming with UI-Router... I'd say. All loaded once. All inherited because of $rootScope and view inheritance... all available in any child state...
Check that all here.
Though this is a very old question, I'd like to post solution which I'm using now. Hope it will help somebody in the future.
After using some different approaches I came up with a beautiful angularjs pattern by John Papa
He suggest using a special service routerHelperProvider and configure states as a regular JS object. I'm not going to copy-paste the entire provider here. See the link above for details. But I'm going to show how I solved my problem by the means of that service.
Here is the part of code of that provider which takes the JS object and transforms it to the states configuration:
function configureStates(states, otherwisePath) {
states.forEach(function(state) {
$stateProvider.state(state.state, state.config);
});
I transformed it as follows:
function configureStates(states, otherwisePath) {
states.forEach(function(state) {
var resolveAlways = {
translations: ['Translations', function(Translations) {
if (state.translationCategory) {
return Translations.get(state.translationCategory);
} else {
return {};
}
}],
};
state.config.resolve =
angular.extend(state.config.resolve || {}, resolveAlways || {});
$stateProvider.state(state.state, state.config);
});
});
And my route configuration object now looks as follows:
{
state: ‘users’,
translationsCategory: ‘users’,
config: {
controller: ‘usersController’
controllerAs: ‘vm’,
url: ‘/users’.
templateUrl: ‘users.html'
}
So what I did:
I implemented the resolveAlways object which takes the custom translationsCategory property, injects the Translations service and resolves the necessary data. Now no need to do it everytime.
Update: this should be possible in angular-ui-router as of 1.0.0alpha0. See the release notes https://github.com/angular-ui/ui-router/releases/tag/1.0.0alpha0 and the issue https://github.com/angular-ui/ui-router/issues/1018 I created.
I would like to access the state's name and other attributes the app is navigating to using angular ui-router when working on the resolve.
The reason: I want load some user data (including their access rights) asynchronously before allowing the app the enter that page.
Currently this is not possible because injecting $state into the resolve points to the state you're navigating away form, not to the one you're navigating to.
I know I can:
get the toState somewhere else with $rootScope('$stateChangeStart') and save it in my settings service for instance. But I think it's a little messy.
hard code the state into the resolve, but I don't want to reuse my resolve for all pages
I also created an issue on the ui-router github (Please + 1 if you are interested!):
https://github.com/angular-ui/ui-router/issues/1018
Here's my code so far. Any help appreciated!
.config(function($stateProvider) {
$stateProvider.state('somePage', {
// ..
resolve: {
userData: function($stateParams, $state, Settings) {
return Settings.getUserData() // load user data asynchronously
.then(function (userData) {
console.log($stateParams);
console.log($state);
// Problem: $state still points to the state you're navigating away from
});
}
}
});
});
Update for Ui-Router 1.x
$provide.decorator('$state', ($delegate, $transitions) => {
$transitions.onStart({}, (trans) => {
$delegate.toParams = trans.params()
$delegate.next = trans.to().name
})
return $delegate
})
Ui-Router 0.x
You can always decorate $state with next and toParams properties:
angular.config(function($provide) {
$provide.decorator('$state', function($delegate, $rootScope) {
$rootScope.$on('$stateChangeStart', function(event, state, params) {
$delegate.next = state;
$delegate.toParams = params;
});
return $delegate;
});
});
And use as such:
.state('myState', {
url: '/something/{id}',
resolve: {
oneThing: function($state) {
console.log($state.toParams, $state.next);
}
}
});
So I discovered the answer to this myself. If you're code is behaving like mine, the $stateParams object is properly injected, but $state is an empty (or old) state object.
What worked for me was referencing this in the resolve function:
.state('myState', {
url: '/something/{id}',
templateUrl: '/myTemplate.html',
controller: function() {},
resolve: {
oneThing: function($stateParams) {
console.log($stateParams); // comes through fine
var state = this;
console.log(state); // will give you a "raw" state object
}
}
})
The first log will return what you'd expect. The second log will return a "raw" (for lack of a better term) state object. So, for instance, to get the state's name, you can access, this.self.name.
I realize this isn't preferred...it would be a lot nicer if $state (or another standardized object) could provide this information for us at the resolve, but this is the best I could find.
Hope that helps...
this.toString() will give you the state name
This has been asked here.
It looks like they built into 1.0.0-rc.2 $state$ which you can inject into the resolve function and get this information.
resolve: {
oneThing: function($state$) {
console.log($state$);
}
}