Does anyone have any experience in documenting/structuring angularjs projects so the JSDoc can generate nice comments (for your directives, controllers, filters etc.) in an HTML format? At the moment it generates one file with the _global class that points to the namespace of my app with couple functions and that's it...
Or maybe there is a better way to generate html version of doc blocks in angularjs?
PS: I am using standard jsdoc syntax to document my code (#param, #return etc.)
Update: My specific question is: Is there any way to generate html documentation for angularjs doc blocks to cover all controllers/directives/filters etc.? When ran JSDoc command line utility it covered only about 5% of my code in the HTML report...
Thanks!
I have been working on a grunt plugin that utilizes AngularJS's documentation generation code. It follows their syntax and output. grunt-docular. The link shows documentation generation for the docular source as well as the original AngularJS source. It's configurable and extendible.
Go to grunt-docular and find the install link for an example of creating your own documentation
EDIT: See John David Five's answer below
My answer was much, much older and should no longer be accepted.
Build steps:
npm install -g grunt-cli
git clone https://github.com/angular/angular.js
cd angular.js
npm install
grunt package
Docs will be availiable at build/docs folder. If you have PHP 5.5 you can view it with:
cd build
php -S localhost:8000
view in browser: http://localhost:8000/docs/index.html
Related
I have a project:
https://www.npmjs.com/package/#fireflysemantics/slice
I need to move it to the Angular package format. The reason is this:
node_modules/#fireflysemantics/slice/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format.
I think the right way to do this is to create a new empty branch with:
git checkout --orphan angular-package-format
//clear the working directory
git rm --cached -r .
Then just generate a new Angular library project into this new branch:
ng new angular-package-format --create-application=false
cd angular-package-format
ng generate library slice
Then commit and publish that library as noted here:
https://medium.com/#ole.ersoy/creating-an-angular-9-npm-library-1a658ecfa3dc
I think this is probably the right way to go about it, but wanted to check with everyone else as this is the first time I'm attempting this. Is there anything you would change WRT the steps I mentioned?
I am trying to use the save-svg-as-png library with my angular 7 project.
However, I cannot manage to get it to work. I have installed the library using
npm install --save save-svg-as-png
and I can see the library under node_modules.
Unfortunately, the library is an old-style javascript library and I do not know what I need to do in order to have access to it in my typescript components.
The readme refers to the Typings library for which type definitions apparently exist. However, the Typings page mentions that it is deprecated for TypeScript 2, so I did not pursue this.
Apparently there is #types/save-svg-as-png for native Angular 2+ support, but when I try to install it with
npm install --save #types/save-svg-as-png
the library cannot be found (npm ERR! code 404).
I googled some more and came across this issue on github where somebody has apparently got it working with Angular 2 by including it in the angular-cli.js file, but with the changes to Angular, this file no longer exists in version 7 and I do not know how that would need to be done nowadays.
I've also found the following article on how to integrate javascript libraries into Angular 2+, but most of it relies on #types being available (which they are not, see above) and only has a brief section on how to supply your own typings.d.ts file but after playing around for quite a while, I did not get any further. Is there a more detailed explanation showing how to use this approach?
I've also found this article on stackoverflow on how to integrate IIFE based libraries into typescript apps but did not get it working.
I've added the following line to my index.html file
<script type="javascript" src="node_modules/save-svg-as-png/lib/saveSvgAsPng.js"></script>
but how do I now access the functions provided by the library? If I understood things correctly, they should now be available on the window object, but that does not seem to be the case.
I've also read this stackoverflow question on how to use non typescript libraries but one of my problems is that I don't even know into what namespace save-svg-as-png is being imported.
Has anyone managed to get this library working with an Angular 6/7 project and could give a detailed explanation on all steps required?
I'll try to summarise the solution as suggested by Hypenate:
Install the library:
npm install --save save-svg-as-png
At the top of my typescript file/angular component:
import * as svg from 'save-svg-as-png';
Using it in my angular component:
svg.svgAsPngUri(document.getElementById('idOfMySvgGraphic'), {}, (uri) => {
console.log('png base 64 encoded', uri);
});
All exported functions are available on svg.
Also, we can use the saveSvgAsPng.js file as an external js file instead of installing that package
Add saveSvgAsPng.js file into src/assets/js
And add this JavaScript file in scripts array in angular.json file
"scripts": [ "src/assets/js/saveSvgAsPng.js" ]
declare saveSvgAsPng in your component.ts
declare const saveSvgAsPng: any;
And call that when you need to download.
saveSVG(): void{ saveSvgAsPng(document.getElementById('id'), fileName); }
Make sure to restart your angular app (ng serve) if you change scripts array or declared name
I have installed complexity-report on a javascript project
Instalation is done using $ npm install complexity-report on the root directory of the project. I can run $ cr and it shows some configuration options like on the image above here.
What i don't know is which command i have to use or what steps i have to follow to calculate for example the complexity of a specific js folder?
I need some help with a description of how to use this tool. Some explanations of that tool are given here but i don't understand which is the next step to follow in my case.
Thanks in advance
Maybe this question is a bit off the rules. I'm using and npm package, which built in type definitions for TypeScript. Unfortunately there is a bug in the definitions, which I can easily fix.
I want to make this new version of the package available to my build server. First I thought I can just fork the repository on Github and add this repository as the source in my package.json, but then I realized that this package needs to be built.
So my question is, where should I go from here? Of course I've sent a pull request, but what can I do until this is merged and released? Should I clone the package and publish it by myself?
I just forked the repo and build it with my fix included.
Then i used my github-fork in the package json.
(you can use github links with branch or tag annotations)
As soon as the merge was made i switched back to the original package.
I had quite similar problem with buggy type definitions. The steps to fix an npm package and then use are:
fork the package
create a new fix branch,
fix the bug, push to your forked repo,
point to the repo in your package.json,
create a pull request to help package maintainers 💪
You can find more details here on my blog: https://www.kozubek.dev/2019/02/23/fixing-npm-package.html
Hope this helps!
I'm looking for a solution that allows the rest of my team to work with my custom Webstorm-LiveTemplates.
Is there a way to keep live templates in a repository like git?
I need that WebStorm automatically loads it...
If you have NPM (Node Package Manager) installed you can use:
live-template-installer
Command line utility for automatically installing live templates to
Intellij or Webstorm
One of the features is installing a live template from git repo.
It is intended to sync to a git for easy distribution and backup of
templates.
Enjoy.
I'm looking for a solution like .editorconfig project, a simple-way to tell WebStorm which liveTemplates we are using for single project...
I would not be obligated to perform tasks grunt or similar