{"id":22468580,"url":"https://github.com/projectweekend/angular-fully-loaded","last_synced_at":"2026-02-23T15:31:44.034Z","repository":{"id":15512371,"uuid":"18246611","full_name":"projectweekend/angular-fully-loaded","owner":"projectweekend","description":"An AngularJS directive for displaying loading and error messages","archived":false,"fork":false,"pushed_at":"2014-05-10T15:23:11.000Z","size":220,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-25T10:45:30.125Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/projectweekend.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-29T17:38:54.000Z","updated_at":"2014-05-10T15:23:12.000Z","dependencies_parsed_at":"2022-08-27T00:11:58.455Z","dependency_job_id":null,"html_url":"https://github.com/projectweekend/angular-fully-loaded","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/projectweekend/angular-fully-loaded","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectweekend%2Fangular-fully-loaded","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectweekend%2Fangular-fully-loaded/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectweekend%2Fangular-fully-loaded/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectweekend%2Fangular-fully-loaded/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/projectweekend","download_url":"https://codeload.github.com/projectweekend/angular-fully-loaded/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/projectweekend%2Fangular-fully-loaded/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29746543,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-06T11:17:52.176Z","updated_at":"2026-02-23T15:31:44.009Z","avatar_url":"https://github.com/projectweekend.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"This is an [AngularJS](http://angularjs.org/) module that makes it easy to display loading and error messages in your app. It uses a simple pattern for comminucating loading/error statuses leaving all decisions about the visual presentation of these items up to the developer.\n\n## Install it\nIf you're familar with how to include third-party modules in AngularJS, then you can probably skip this section. If you're new to the framework, this should help.\n\n### Step 1\nCopy the `angular-fully-loaded.js` file from this repository into your project. In this example, I'm using the directory '/js/lib' for the location. My main AngularJS app in this case is in `/js`.\n\n![Screenshot of files in project folder](https://raw.githubusercontent.com/projectweekend/angular-fully-loaded/master/screenshots/copy-files-into-project.png)\n\n### Step 2\nInclude the file before the main app file:\n\n~~~html\n\u003cscript src=\"/js/lib/angular-fully-loaded.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/js/app.js\"\u003e\u003c/script\u003e\n~~~\n\n### Step 3\nAdd `angular-fully-loaded` to the app requirements (`/js/app.js`).\n~~~javascript\nvar app = angular.module('myApp', [\n    'myApp.controllers',\n    'myApp.filters',\n    'myApp.services',\n    // 3rd party dependencies\n    'fully-loaded'\n]);\n~~~\n\n## Use it\nThis module creates two custom directives (tags) that can be used anywhere in your templates.\n\n### Loading Directive\nThe loading directive has two attributes that must be populated:\n\n* **data** - This attribute must be bound to a property in your controller. This property must be an object with a booloean property of its own named `loading`. Toggling the value of `loading` from a controller or service will cause the message to show/hide.\n* **template** - This is the path to the HTML template the controls the presentation of the loading message.\n\n#### Loading Controller Example\n~~~javascript\nvar cMod = angular.module( 'myApp.controllers', [] );\n\ncMod.controller( 'MyCoolCtrl', function ( $scope ) {\n\n    $scope.SomethingThatLoadsData = {\n        status: {\n            loading: false // toggle this to true anywhere you wait\n        }\n    };\n\n} );\n~~~\n\n\n#### Loading Template Example\n~~~html\n\u003cfl-loading data=\"SomethingThatLoadsData.status\" template=\"fully-loaded/my-loading-template.html\"\u003e\u003c/fl-loading\u003e\n\n\u003c!--\n    This script tag holds the HTML for the loading message.\n    It can be placed in any page the Angular app will load.\n    I like to place mine in the index page so it gets cached early.\n--\u003e\n\u003cscript type=\"text/ng-template\" id=\"fully-loaded/my-loading-template.html\"\u003e\n    \u003cp\u003eThis is my loading message\u003c/p\u003e\n\u003c/script\u003e\n~~~\n\n### Error Directive\nThe error directive has the same two attributes as the loading directive:\n\n* **data** - This attribute must be bound to a property in your controller. This property must be an object with a booloean property of its own named `error`. Toggling the value of `error` from a controller or service will cause the message to show/hide.\n* **template** - This is the path to the HTML template the controls the presentation of the error message.\n\n#### Error Controller Example\n~~~javascript\nvar cMod = angular.module( 'myApp.controllers', [] );\n\ncMod.controller( 'MyCoolCtrl', function ( $scope ) {\n\n    $scope.SomethingThatLoadsData = {\n        status: {\n            loading: false, // toggle this to true anywhere you wait\n            error: false // toggle this to true when something goes wrong\n        }\n    };\n\n} );\n~~~\n\n#### Error Template Example\n~~~html\n\u003cfl-error data=\"SomethingThatLoadsData.status\" template=\"fully-loaded/my-error-template.html\"\u003e\u003c/fl-error\u003e\n\n\u003c!--\n    This script tag holds the HTML for the error message.\n    It can be placed in any page the Angular app will load.\n    I like to place mine in the index page so it gets cached early.\n--\u003e\n\u003cscript type=\"text/ng-template\" id=\"fully-loaded/my-error-template.html\"\u003e\n    \u003cp\u003eThis is my error message\u003c/p\u003e\n\u003c/script\u003e\n~~~\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojectweekend%2Fangular-fully-loaded","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprojectweekend%2Fangular-fully-loaded","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprojectweekend%2Fangular-fully-loaded/lists"}