PHPackages worldskills/angular-worldskills-utils - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. worldskills/angular-worldskills-utils ActiveComponent[Utility & Helpers](/categories/utility) worldskills/angular-worldskills-utils ===================================== v0.3.1(1y ago)09021MITJavaScript Since Nov 26Pushed 1y ago6 watchersCompare [ Source](https://github.com/worldskills/angular-worldskills-utils)[ Packagist](https://packagist.org/packages/worldskills/angular-worldskills-utils)[ RSS](/packages/worldskills-angular-worldskills-utils/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (1)Versions (26)Used By (0) WorldSkills AngularJS Utils =========================== [](#worldskills-angularjs-utils) Installation ------------ [](#installation) Install with Bower: ``` bower install angular-worldskills-utils --save ``` Load the JavaScript in your HTML file: ``` ``` Usage ----- [](#usage) Add the dependency to your AngularJS module: ``` angular.module('yourApp', ['worldskills.utils']); ``` Define the following constants (don't forget to replace your client id): ``` angular.module('yourApp').constant('WORLDSKILLS_CLIENT_ID', ''); angular.module('yourApp').constant('WORLDSKILLS_API_AUTH', 'https://api.worldskills.org/auth'); angular.module('yourApp').constant('WORLDSKILLS_AUTHORIZE_URL', 'https://auth.worldskills.org/oauth/authorize'); angular.module('yourApp').constant('LOAD_CHILD_ENTITY_ROLES', false); angular.module('yourApp').constant('FILTER_AUTH_ROLES', []); ``` ### Authentication [](#authentication) To use any of the following authentication functions, make sure to use the `auth` object in at least one controller, e.g.: ``` angular.module('yourApp').controller('ContainerCtrl', function($scope, auth) { $scope.auth = auth; }); ``` ### Return to state [](#return-to-state) To load the previous state after the user has logged in on WorldSkills Auth, you can use `sessionStorage.getItem('redirect_to_state')`. Configure the `$urlRouterProvider` as following: ``` angular.module('yourApp').config(function($urlRouterProvider) { $urlRouterProvider.otherwise(function ($injector, $location) { // check for existing redirect var $state = $injector.get('$state'); var redirectToState = sessionStorage.getItem('redirect_to_state'); var redirectToParams = sessionStorage.getItem('redirect_to_params'); sessionStorage.removeItem('redirect_to_state'); sessionStorage.removeItem('redirect_to_params'); if (redirectToState) { if (redirectToParams) { redirectToParams = angular.fromJson(redirectToParams); } else { redirectToParams = {}; } $state.go(redirectToState, redirectToParams); } else { $state.go('your.home.state'); } }); }); ``` ### Require authenticated user [](#require-authenticated-user) To require an authenticated user for certain states, add `requireLoggedIn: true` in the state data: ``` .state('your.state', { url: '/your/url', templateUrl: 'views/template.html', controller: 'YourCtrl', data: { requireLoggedIn: true } }) ``` You can also require specific roles for a state with `requiredRoles`: ``` .state('your.state', { url: '/your/url', templateUrl: 'views/template.html', controller: 'YourCtrl', data: { requireLoggedIn: true, requiredRoles: [ {code: 100, role: 'Admin'} ] } }) ``` ### Custom fallbacks for forbidden state [](#custom-fallbacks-for-forbidden-state) Custom fallback in order to handle forbidden redirect manually rather than to redirect to login url automatically. Add `forbiddenFallbad: function` to `app.js` ``` .state('people', { url: '/people?search', templateUrl: 'views/people.html', controller: 'PersonnelCtrl', data:{ requireLoggedIn: true, forbiddenCallback: function(auth, $state){ //state passed from $rootScope.$state $state.go('person.view', {'pid': auth.user.person_id}); }, requiredRoles: [ {code: 600, role: APP_ROLES.ADMIN}, {code: 600, role: APP_ROLES.MANAGER} ] } }) ``` Also now allows custom fallbacks for login error state, use case: redirect to a signup page instead of auth.loginUrl ``` .state('restrictedState', { url: '/needsLogin', templateUrl: 'views/restricted.html', controller: 'RestrictedCtrl', data: { requireLoggedIn: true, unAuthenticatedCallback: function(auth, $state){ $state.go('signup'); }, requiredRoles: [ {code: 1800, role: APP_ROLES.ADMIN}, {code: 1800, role: APP_ROLES.MANAGER}, {code: 1800, role: APP_ROLES.USER} ] } }) .state('signup', { url: '/signup', controller: 'SignupCtrl', templateUrl: 'views/signup.html', data: { requireLoggedIn: false } }) ``` ### Spinner directive [](#spinner-directive) Show an animated loading indicator graphic. ``` ``` ### TextSpinner directive [](#textspinner-directive) Show a loading indicator on a button. ``` Save ``` Spinner sizes ------------- [](#spinner-sizes) Added small and big versions ``` ``` ### Health Score 34 — LowBetter than 77% of packages Maintenance33 Infrequent updates — may be unmaintained Popularity15 Limited adoption so far Community14 Small or concentrated contributor base Maturity63 Established project with proven stability Bus Factor1 Top contributor holds 58.6% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~144 days Recently: every ~421 days Total 25 Last Release 711d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/fb470bb4c5d42b9c3ba3cd49ac26972ae2273faf1b08c2bc9cac66b305a42d93?d=identicon)[fabian](/maintainers/fabian) --- Top Contributors [![fabian](https://avatars.githubusercontent.com/u/13346?v=4)](https://github.com/fabian "fabian (41 commits)")[![Joni-Aaltonen](https://avatars.githubusercontent.com/u/428709?v=4)](https://github.com/Joni-Aaltonen "Joni-Aaltonen (24 commits)")[![gbervik](https://avatars.githubusercontent.com/u/4145894?v=4)](https://github.com/gbervik "gbervik (5 commits)") ### Embed Badge ![Health badge](/badges/worldskills-angular-worldskills-utils/health.svg) ``` [![Health](https://phpackages.com/badges/worldskills-angular-worldskills-utils/health.svg)](https://phpackages.com/packages/worldskills-angular-worldskills-utils) ``` ### Alternatives [fullcalendar/fullcalendar Full-sized drag & drop event calendar 20.4k373.3k4](/packages/fullcalendar-fullcalendar)[eternicode/bootstrap-datepicker A datepicker for Bootstrap 12.7k543.8k6](/packages/eternicode-bootstrap-datepicker)[eonasdan/bootstrap-datetimepicker Date/time picker widget based on twitter bootstrap 7.2k492.4k9](/packages/eonasdan-bootstrap-datetimepicker)[trentrichardson/jquery-timepicker-addon Adds a timepicker to jQueryUI Datepicker. 2.6k70.2k](/packages/trentrichardson-jquery-timepicker-addon)[grimmlink/bootstrap-filestyle jQuery customization of input html file for Bootstrap Twitter http://markusslima.github.io/bootstrap-filestyle/ 71510.6k](/packages/grimmlink-bootstrap-filestyle)[tempusdominus/bootstrap-4 A date/time picker component designed to work with Bootstrap 4 and Momentjs. 6079.3k](/packages/tempusdominus-bootstrap-4) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)