{"id":19319842,"url":"https://github.com/hyperoslo/hyper-content-for-angular","last_synced_at":"2025-04-22T17:32:27.148Z","repository":{"id":28836977,"uuid":"32360670","full_name":"hyperoslo/hyper-content-for-angular","owner":"hyperoslo","description":"Inject content into a different part of your page","archived":false,"fork":false,"pushed_at":"2015-04-07T10:50:08.000Z","size":467,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-05-09T16:36:06.180Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hyperoslo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-17T00:08:12.000Z","updated_at":"2023-07-24T05:19:28.000Z","dependencies_parsed_at":"2022-08-30T22:31:50.207Z","dependency_job_id":null,"html_url":"https://github.com/hyperoslo/hyper-content-for-angular","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperoslo%2Fhyper-content-for-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperoslo%2Fhyper-content-for-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperoslo%2Fhyper-content-for-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperoslo%2Fhyper-content-for-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyperoslo","download_url":"https://codeload.github.com/hyperoslo/hyper-content-for-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223828854,"owners_count":17209976,"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":[],"created_at":"2024-11-10T01:25:27.681Z","updated_at":"2024-11-10T01:25:28.240Z","avatar_url":"https://github.com/hyperoslo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hyper-content-for\n\nInject content into a different part of your page.\n\n## Description\n\nThis module adds directives that allow you to store blocks of HTML for use other\nplaces in your application. It is inspired by the Ruby on Rails view helper `content_for`,\nwhich is useful when you need to change something outside of the view's own scope.\n\nAnother way to accomplish this is to use `$rootScope`, but that's generally considered\nbad practice (much like leaking variables onto your `window` scope in plain JavaScript).\n\n## Usage\n\nSo how do you actually use this thing? It's quite simple, actually! The module\nexposes two directives, `hyper-content` and `hyper-yield`. The `hyper-content`\ndirective wraps around the content and takes an ID through the `for` attribute.\nThe `hyper-yield` directive is filled by the content that shares the same ID,\npassed through the attribute `to`. An example:\n\n_In the template file (e.g. index.html):_\n\n```html\n\u003chyper-content for=\"header\"\u003e\n  \u003ch2\u003eAll articles\u003c/h2\u003e\n\u003c/hyper-content\u003e\n```\n\n_In the layout file:_\n\n```html\n\u003cheader\u003e\n  \u003ch1\u003eBlog 2000\u003c/h1\u003e\n  \u003chyper-yield to=\"header\"\u003e\u003c/hyper-yield\u003e\n\u003c/header\u003e\n```\n\n_Resulting layout:_\n\n```html\n\u003cheader\u003e\n  \u003ch1\u003eBlog 2000\u003c/h1\u003e\n  \u003chyper-yield to=\"header\"\u003e\n    \u003ch2\u003eAll articles\u003c/h2\u003e\n  \u003c/hyper-yield\u003e\n\u003c/header\u003e\n```\n\n## Installation\n\nThis module is hosted on npm and Bower. To install it into your application, use\nthe appropriate command line tool. If you're using Bower:\n\n```\n$ bower install --save hyper-content-for\n```\n\nIf you're using npm, use the `npm` executable instead:\n\n```\n$ npm install --save hyper-content-for\n```\n\nIf you like to live on the edge, feel free to download the file from our [GitHub\nrepository] as well. Just keep in mind that it might not always be stable.\n\n[github repository]: https://github.com/hyperoslo/hyper-content-for-angular\n\nEither way, you'll want to add it as a dependency to your main module:\n\n```javascript\nvar app = angular.module('app', ['hyperContentFor']);\n```\n\n## Contributing\n\nPlease check our [playbook] for guidelines on contributing.\n\n[playbook]: https://github.com/hyperoslo/playbook/blob/master/GIT_AND_GITHUB.md\n\n## Credits\n\n[Hyper] made this. We're a digital communications agency with a passion for good\ncode, and if you're using this library we probably want to [hire you].\n\n[hyper]: http://hyper.no\n[hire you]: http://www.hyper.no/jobs\n\n## License\n\nThis project is available under the MIT license. See the [LICENSE].\n\n[license]: https://github.com/hyperoslo/hyper-content-for-angular/blob/master/LICENSE.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperoslo%2Fhyper-content-for-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyperoslo%2Fhyper-content-for-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperoslo%2Fhyper-content-for-angular/lists"}