{"id":20314360,"url":"https://github.com/normandy72/custom-service","last_synced_at":"2026-05-06T10:41:14.085Z","repository":{"id":153902744,"uuid":"586463414","full_name":"Normandy72/Custom-Service","owner":"Normandy72","description":"Custom Service in AngularJS. Coursera course \"Single Page Web Applications with AngularJS\" by Yaakov Chaikin.","archived":false,"fork":false,"pushed_at":"2023-01-08T13:19:40.000Z","size":74,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-14T12:46:51.152Z","etag":null,"topics":["angular","angularjs","css","css3","html","html5","javascript","js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Normandy72.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-08T08:21:07.000Z","updated_at":"2023-01-09T10:30:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"70295ed6-936b-403b-8e8a-1e1e59f8813d","html_url":"https://github.com/Normandy72/Custom-Service","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FCustom-Service","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FCustom-Service/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FCustom-Service/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FCustom-Service/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Normandy72","download_url":"https://codeload.github.com/Normandy72/Custom-Service/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241818842,"owners_count":20025208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["angular","angularjs","css","css3","html","html5","javascript","js"],"created_at":"2024-11-14T18:14:55.594Z","updated_at":"2025-10-05T07:03:12.637Z","avatar_url":"https://github.com/Normandy72.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Custom Service\n\n## 1\n### Controllers's responsibilites\nUse controllers to\n* Set up initial state of $scope\n* Add behavior to the $scope\n\nDo __NOT__ use controllers to\n* Handle business logic directly\n* Share code or state across controllers\n\n### Register Service Function Constructor\n```\nangular.module('app', [])\n.controller('ctrl', Ctrl)\n.service('CustomService', CustomService);\n```\n### Singleton Design Pattern\nRestricts object to always having a single instance.\n* Each dependent component gets a reference to the same instance.\n* Multiple controllers injected with a Service will all have access to the same service instance.\n\n### Lazily Instantiated\nOnly created if application component declares it as a dependency.\nIf no components in application are dependent on this service, it will never get created.\n\n***\n#### _Summary_\nControllers are not supped to\n* Handle business logic\n* Code sharing\n* Be used to share data across other components\n\nCustom services instantiated with `.service` method\n* Singletons (only 1 instance of object exists)\n* Lazily instantiated (only created if something depends on them)\n\n`.service('name', function)`, treats function as a function constructor\n***\n## 2\n### Factory Design Pattern\nCentral place that produces new objects or functions\n* Can produce any type of object, not just a singleton\n* Can be used to produce dynamically customizable services\n\n### Factory vs. Service Confusion\n* `.factory()` is __not__ just another way of creating the same service you can create with `.service()` but it __can be__.\n* `.service()` is also a factory, but a much more limited one compared to `.factory()`. It's a factory that always produces the same type of service - a singleton, without an easy way to configure its behavior.\n\n### Register Service Factory Function\n```\nangular.module('app', [])\n.controller('ctrl', Ctrl)\n.factory('CustomService', CustomService);\n```\n### Service Factory Function - Return Function\n```\nfunction CustomService(){\n    var factory = function(){\n        return new SomeService();\n    };\n    return factory;\n}\n```\n### Service Factory Function - Return Object Literal\n```\nfunction CustomService(){\n    var factory = {\n        getSomeService: function(){\n            return new SomeService\n        }\n    };\n    return factory;\n};\n```\n##### Using Object Function Approach\n```\n...\nvar someSrv = CustomService();\nsomeSrv.method();\n```\n##### Using Object Literal Approach\n```\n...\nvar someSrv = CustomService.getSomeService();\nsomeSrv.method();\n```\n***\n#### _Summary_\n`.factory()` allows us to produce any type of object or function\n* that includes a service (even a singleton), but is __not__ limited to\n* `service()` is just a more limited factory\n\n`.factory('name', FactoryFunction)` - name is what's injected\n\nInjected factory function refers to whatever is returned in the factory function\n* can be object literal with a property that's a function that creates something\n* can be a function that creates something\n***\n\n## 3\n### Custom Services with .provider()\nSteps to use `.provider()` function:\n#### Step 1 - Define Provider Function\n```\nfunction ServiceProvider(){\n    var provider = this;\n    provider.config = {...};\n\n    provider.$get = function(){\n        var service = new Service(provider.config.prop);\n        return service;\n    };\n}\n```\n#### Step 2 - Register Provider Function With Module\n```\nangular.module('app', [])\n.controller('ctrl', Ctrl)\n.provider('Service', ServiceProvider);\n```\nName of service (`'Sevice'`) as it will be injected into other services, controllers, etc.\n\nName of this function __does not__ matter at all.\n\n#### Step 3 - Inject It As Usual\n```\nCtrl.$inject = ['$scope', 'Service'];\nfunction Ctrl($scope, Service){\n    Service.someMethod();\n};\n```\n#### Step 4a (Optional) - Register Config Function\n```\nangular.module('app', [])\n.controller('ctrl', Ctrl)\n.provider('Service', ServiceProvider)\n.config(Config);\n```\nConfig guaranteed to run before any services, factories or controllers are created.\n\n#### Step 4b (Optional) - Inject Provider Into Config\n```\n...\n.provider('Service', ServiceProvider);\n...\nConfig.$inject = ['ServiceProvider'];\nfunction Config(ServiceProvider){\n    ServiceProvider.config.prop = 'value';\n};\n```\n***\n#### _Summary_\n`.provider()` - most verbose, but most flexible\n* configure factory not just at time of use, but at app bootstrapping\n\n`.provider('name', function)`\n* whatever the 'name' is  - that's what gets injected into other components\n\n`.config()` function gets called _before_ any service, factory, or controller is instantiated\n* therefor, we __can't__ inject any regular components into `.config`\n* we __can__ inject the provider of service with nameProvider\n***\n## 4\n### ng-if\n* if statement is true - div (or other) will be shown\n* remove element from DOM\n\n### ng-show\n* if statement is true - div (or other) will be shown\n* do not remove element from DOM\n\n### ng-hide\n* if statement is true / false - div (or other) will be hidden / shown\n* do not remove element from DOM\n***\n#### _Summary_\n`ng-if` is a general purpose \"if statement\" like attribute directive. If its value is false, Angular removes the containing element from the DOM entireely.\n\n`ng-show` / `ng-hide` attribute directives automatically attach CSS classes to the containing element that either show or hide the element. The containing element does not get removed from the DOM.\n***","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnormandy72%2Fcustom-service","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnormandy72%2Fcustom-service","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnormandy72%2Fcustom-service/lists"}