{"id":18425264,"url":"https://github.com/owen-it/ng-loader","last_synced_at":"2025-04-07T16:31:45.775Z","repository":{"id":55477916,"uuid":"84450277","full_name":"owen-it/ng-loader","owner":"owen-it","description":"Webpack loader for AngularJs components","archived":false,"fork":false,"pushed_at":"2020-12-28T10:59:34.000Z","size":1201,"stargazers_count":29,"open_issues_count":2,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-10-28T05:23:14.763Z","etag":null,"topics":["angular-components","angularjs","component","loader","ng-component-loader","ng-loader","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/owen-it.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}},"created_at":"2017-03-09T14:20:10.000Z","updated_at":"2023-10-26T23:30:31.000Z","dependencies_parsed_at":"2022-08-15T01:10:59.484Z","dependency_job_id":null,"html_url":"https://github.com/owen-it/ng-loader","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/owen-it%2Fng-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/owen-it%2Fng-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/owen-it%2Fng-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/owen-it%2Fng-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/owen-it","download_url":"https://codeload.github.com/owen-it/ng-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223286479,"owners_count":17120000,"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-components","angularjs","component","loader","ng-component-loader","ng-loader","webpack"],"created_at":"2024-11-06T05:03:21.253Z","updated_at":"2024-11-06T05:03:21.889Z","avatar_url":"https://github.com/owen-it.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng-loader \u003ca href=\"https://www.npmjs.com/package/ng-loader\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/ng-loader.svg\" alt=\"Downloads\"\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.com/package/ng-loader\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/ng-loader.svg\" alt=\"Version\"\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.com/package/ng-loader\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/ng-loader.svg\" alt=\"License\"\u003e\u003c/a\u003e\n\n`ng-loader` is a loader for Webpack that can transform `*.ng` files into [AngularJs Components](https://docs.angularjs.org/guide/component).\n\n\u003e Note: ng-loader@1.0.0 had a different purpose than version 2.*, it was currently migrated to [ng-module-loader](https://github.com/owen-it/ng-module-loader).\n\n## What is Webpack?\n\nwebpack is a tool to build JavaScript modules in your application. To start using `webpack` from its [cli](https://webpack.js.org/api/cli) or [api](https://webpack.js.org/api/node), follow the [Installation instructions](https://webpack.js.org/guides/installation).\nwebpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features. Learn more about [why you should use webpack](https://webpack.js.org/guides/why-webpack).\n\n## Understanding Loaders\n\nLoaders are transformations that are applied on a resource file of your application. They are functions (running in Node.js) that take the source of a resource file as the parameter and return the new source.\nLearn more about [loaders](https://webpack.js.org/concepts/loaders/).\n\n## Install\n\n```\nnpm install --save-dev ng-loader\n```\n\n## Usage\n\nUse the loader either via your Webpack config.\n\n#### Via webpack config (recommended)\n\n```javascript\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.ng$/,\n        use: [ 'ng-loader' ]\n      }\n    ]\n  }\n}\n```\n\n#### Passing parameters:\n\nYou can also configure `ng-loader` and the sub-loaders for your components. Bellow is the default configuration.\n\n```javascript\n{\n  test: /\\.ng$/,\n  use: [\n    {\n      loader: 'ng-loader'\n      options: {\n        hotReload: true,\n        loaders: {\n          html: [\n            'html-loader'\n          ],\n          js: [\n            {\n              loader: 'babel-loader',\n              options: {\n                presets: ['es2015'],\n                plugins: ['transform-runtime'],\n                comments: false\n              }\n            }\n          ],\n          sass: [\n            'style-loader',\n            'css-loader'\n          ]\n        }\n      }\n    }\n  ]\n}\n```\n\n### Angular Component\n\nIn AngularJS, a Component is a special kind of [directive](https://docs.angularjs.org/guide/directive) that uses a simpler\nconfiguration which is suitable for a component-based application structure.\n\nThis makes it easier to write an app in a way that's similar to using Web Components or using the new Angular's\nstyle of application architecture.\n\nAdvantages of Components:\n- simpler configuration than plain directives\n- promote sane defaults and best practices\n- optimized for component-based architecture\n- writing component directives will make it easier to upgrade to Angular\n\nYou can see the full documentation [here](https://docs.angularjs.org/guide/component).\n\n##### The `*.ng` file\n\nA `*.ng` file is a custom file format that uses HTML-like syntax to describe a angular component. Each `*.ng` file consists of three types of top-level language blocks: `\u003ctemplate\u003e`, `\u003cscript\u003e` and `\u003cstyle\u003e`:\n\n```html\n\u003c!-- ./src/components/my-component.ng --\u003e\n\u003ctemplate\u003e\n    \u003ch1 class=\"ui header\"\u003e\n        {{ $ctrl.description }}\n    \u003c/h1\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n    export default {\n        controller(){\n            this.description = 'A AngularJs Component!'\n        }\n    }\n\u003c/script\u003e\n\n\u003cstyle lang=\"sass\"\u003e\n    @import '~semantic-ui';\n\u003c/style\u003e\n```\n\nng-loader will parse the file, extract each language block, pipe them through other loaders if necessary, and finally assemble them back into a CommonJS module whose module.exports is a [AngularJs Component](https://docs.angularjs.org/guide/component) options object.\n\n### Language Blocks\n\n#### `\u003ctemplate\u003e`\n\n- Default language: `html`.\n\n- Each `*.ng` file can contain at most one `\u003ctemplate\u003e` block at a time.\n\n- Contents will be extracted as a string and used as the `template` option for the compiled AngularJs Component.\n\n#### `\u003cscript\u003e`\n\n- Default language: `js` (ES2015 is supported automatically if `babel-loader` or `buble-loader` is detected).\n\n- Each `*.ng` file can contain at most one `\u003cscript\u003e` block at a time.\n\n- The script is executed in a CommonJS like environment (just like a normal `.js` module bundled via Webpack), which means you can `require()` other dependencies. And with ES2015 support, you can also use the `import` and `export` syntax.\n\n```js\n    // tag script inside ng file ./src/components/my-component.ng\n    exports default {\n        controller () {\n            this.description = 'A AngularJs Component';\n        }\n    };\n```\nRegistering your component:\n\n```js\nimport * as angular from 'angular';\n\nimport myComponent from './components/my-component.ng';\n\nangular.module('app', []).component('myComponent', myComponent);\n```\n\nYou can also return an array with the component data. The first item represents the component name and the second component options.\n\n```js\n    // tag script inside ng file ./src/components/my-component.ng\n    exports default ['myComponent', {\n        controller: () =\u003e {\n            this.description = 'AngularJs';\n        }\n    }];\n```\n\nand register as follows\n\n```js\nimport * as angular from 'angular';\n\nimport myComponent from './components/my-component.ng';\n\nangular.module('app', []).component.apply(angular, myComponent);\n\n// ES2015\n// .component(...myComponent)\n```\n\n#### `\u003cstyle\u003e`\n\n- Default Language: `css`;\n- Multiple `\u003cstyle\u003e` tags are supported in a single `*.ng` file;\n- By default, contents will be extracted and dynamically inserted into the document's `\u003chead\u003e` as an actual `\u003cstyle\u003e` tag using `style-loader`;\n\n#### The component\n\n```html\n\u003cmy-component\u003e\u003c/my-component\u003e\n```\n\n### Hot Reload\n\nThis feature is provided by [ng-hot-reload-api](https://github.com/owen-it/ng-hot-reload-api)\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://raw.githubusercontent.com/owen-it/ng-loader/master/hot-reload.gif\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/owen-it/ng-loader/master/hot-reload.gif\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### Syntax Highlighting\n\nYou can treat `*.ng` files as HTML in your editor.\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://raw.githubusercontent.com/owen-it/ng-loader/master/syntax-highlighting.png\" target=\"_blank\"\u003e\n        \u003cimg src=\"https://raw.githubusercontent.com/owen-it/ng-loader/master/syntax-highlighting.png\" /\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n### License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fowen-it%2Fng-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fowen-it%2Fng-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fowen-it%2Fng-loader/lists"}