{"id":17236227,"url":"https://github.com/emmanueltouzery/ng-typeview","last_synced_at":"2025-04-14T02:52:29.905Z","repository":{"id":68665782,"uuid":"76504948","full_name":"emmanueltouzery/ng-typeview","owner":"emmanueltouzery","description":"Enables type-checking of angular1 views","archived":false,"fork":false,"pushed_at":"2019-09-04T05:10:47.000Z","size":278,"stargazers_count":18,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-27T16:55:53.889Z","etag":null,"topics":["angular","angularjs","templates","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/emmanueltouzery.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-14T23:15:33.000Z","updated_at":"2023-08-25T17:33:30.000Z","dependencies_parsed_at":"2023-03-08T16:00:44.558Z","dependency_job_id":null,"html_url":"https://github.com/emmanueltouzery/ng-typeview","commit_stats":{"total_commits":240,"total_committers":2,"mean_commits":120.0,"dds":"0.029166666666666674","last_synced_commit":"272a9a653d7b96503e619d65786d85949705d15f"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmanueltouzery%2Fng-typeview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmanueltouzery%2Fng-typeview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmanueltouzery%2Fng-typeview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emmanueltouzery%2Fng-typeview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emmanueltouzery","download_url":"https://codeload.github.com/emmanueltouzery/ng-typeview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248735360,"owners_count":21153386,"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","templates","typescript"],"created_at":"2024-10-15T05:35:40.552Z","updated_at":"2025-04-14T02:52:29.879Z","avatar_url":"https://github.com/emmanueltouzery.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng-typeview\n[![NPM version][npm-image]][npm-url]\n\n## Purpose\n\nng-typeview aims to enable type-checking of `angular1` views. Normally, angular1 views\nare html files with special purpose markers (special tags \u0026 annotations) which are\nregistered as angular directives and filters, which cooperate with the matching\ncontroller(s) which are written in javascript.\n\nIt is possible to use `typescript` instead of javascript for angular applications;\nin that case you get type-checking for the controllers and the remaining\nclient-side code, but still no type-checking for the views, which are exercised\nonly at runtime.\n\nng-typeview allows to extract the code from the views in new 'viewtest' typescript\nfiles, which can then get type-checked against the controllers.\n\n## Operation mode\n\nng-typeview is not an application, but a library. The reason is that it is\nexpected that each real-world angular1 application will have enough customizations\nto require special handling, which will be better managed through custom code than\noptions of an executable.\n\nng-typeview expects that in the controllers you define an interface for the scope:\n\n```typescript\ninterface Scope extends ng.IScope {\n    modal: {title: string};\n    showTitle: boolean;\n}\n```\n\n(ng-typeview searches for an interface named `Scope` in the controller)\n\nIn the matching view, ng-typeview searches for expressions like `{{title}}`,\nor `ng-if='showTitle'`, and similar.\n\nThen it generates a new 'viewtest' typescript file containing the scope definition,\nand also expressions extracted from the view. A bit more complex expressions\nsuch as `ng-repeat`, `ng-switch` are also supported. Filters such as\n`myList | orderBy: 'name'` as well. The generated typescript code is not meant\nto be executed, only to be used for type-checking.\n\nIn addition you can also let ng-typeview know about your own directives and\nfilters so they'll get extracted from the views \u0026 properly converted to\ntypescript code for type-checking.\n\nYou can view an example of the operation by looking in the ng-typeview source, in the\n`test/data` subfolder, there is a controller, a view, and the expected generated\ntypescript code, that can confirm whether the view type-checks or not.\n\n## API docs\n\nYou can see the full API documentation [by clicking here.](http://emmanueltouzery.github.io/ng-typeview/globals.html)\n\nThe main entry point is the [processProject](http://emmanueltouzery.github.io/ng-typeview/globals.html#processproject) function.\nYou must prepare a [ProjectSettings](http://emmanueltouzery.github.io/ng-typeview/interfaces/projectsettings.html)\nobject and `processProject` will go through your source and generate the 'viewtest'\nfiles. Each field of `ProjectSettings` allows you to customize an aspect of the\nintegration with your angular1 application.\n\n## Getting started\n\nYou need to create an application depending on ng-typeview. And basically you\njust need to call `processProject`. Then ng-typeview will generate the 'testview'\nfiles in the folder of your application. Then try to compile your application.\nThe typescript compiler will warn you in case some code from the views doesn't\nmatch code from the controllers.\n\nYou can look at `test/ng-typeview.ts` for a sample set-up.\n\nThat's good for a first run, but then you probably have to customize ng-typeview\nfor your application.\n\nng-typeview leaves the generated 'testview' files in your source code directory; it's\nprobably best not to commit them to source control. If you minify your javascript,\nthey won't be included since nothing links to them. If you don't, they might be\ncopied to your server, but since noone links to them and they have no side-effects\nthey shouldn't pose any problem. That said, deleting them is trivial, as they have\na clear filename pattern.\n\n## Customizations\n\nng-typeview uses the [typescript compiler API](https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API)\nto parse the javascript and typescript code, [htmlparser2](https://github.com/fb55/htmlparser2)\nto parse the views, and the [parsimmon](https://github.com/jneen/parsimmon) parser\ncombinator library to parse angular expressions (such as \"for .. in .. track by ..\").\n\n### ProjectSettings.ctrlViewConnectors\nTo begin with, ng-typeview must be able to connect controllers and views.\nIt must find out that the controller `app/core/user-list-ctrl.ts` matches the view\n`app/core/user-list-view.html`. ng-typeview makes no assumption on files layout\nor naming conventions (especially since the controller-view connection may not\nbe 1:1).\nBy default ng-typeview can detect `$modal.open()` calls, which connect controllers and views,\nand also module state declarations (the `ng-controller` directive is ignored though for now).\nYou can register new ways of connecting controllers and views, for instance if your\napp wraps these calls through helper functions, preventing ng-typeview from spotting them.\n\nSince this is typescript parsing, this part is tied to the\n[typescript compiler API](https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API).\n\n### ProjectSettings.ngFilters\nIf you define your own angular filters, you can let ng-typeview know about them\nand the parameters they expect through `ngFilters`. You just need to give a name\nand parameter types.\n\n### ProjectSettings.attributeDirectives \u0026 tagDirectives\nYou can also register your directives. There you must generate typescript code\n(as string), used to check the type-safety of the expressions found in the views.\nYou implement either a [AttributeDirectiveHandler](http://emmanueltouzery.github.io/ng-typeview/interfaces/attributedirectivehandler.html),\nor a [TagDirectiveHandler](http://emmanueltouzery.github.io/ng-typeview/interfaces/tagdirectivehandler.html).\n\nAs input you get the contents of tags \u0026 attributes from the view.\nYou are given some API to assist with the code generation,\n[CodegenHelper](http://emmanueltouzery.github.io/ng-typeview/classes/codegenhelper.html);\nin fact you must use it, because ng-typeview must know when you declare new\nvariables.\n\nThe directives that ng-typeview supports out of the box are developed using that\nmechanism, so you can also look at `src/ng-directives.ts` for examples of use.\n\n\n## Caveats\n\n* the API is still changing very often\n* was tested only against two projects from a single company for now\n* incomplete mapping of standard directives \u0026 filters (ng-typeview does not support\n  all of the syntaxes of `ng-repeat` for instance.. Pull requests welcome :-) )\n* probably incomplete in just about all the aspects, as angular is huge\n* angular1 only\n\n## Commands\n\n    npm install\n\n    npm test\n\n    npm run-script docgen\n\n[npm-image]: https://img.shields.io/npm/v/ng-typeview.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/ng-typeview\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femmanueltouzery%2Fng-typeview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femmanueltouzery%2Fng-typeview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femmanueltouzery%2Fng-typeview/lists"}