We have an angularJS project and have been using the #ngdoc notation as seen in the angular source code, however we don't use grunt / bower and would like to generate the documentation. Is there a program which does this without relying on grunt / bower config files?
I've looked at ngdocs, grunt-ngdocs and grunt-ngdoc. Ideally I just want to feed in a regular expression for our js folder and have a html index with links to the documentation for each module.
I've tried jsdoc but it doesn't recognise a lot of the ngdoc annotations resulting in a blank index.html
You could try a template for jsdoc. I found angular-jsdoc very useful.
I would recommend evaluating this, as it requires nothing more than jsdoc installed. And it is able to read an process #ngDoc tags.
Related
Just started a demo Angular2 project (no previous experience with Angular1/AngularJS. Have followed and extended from the online quickstart and tutorials, and all was fine. However I'm at the point where I would like to use some components from a library which is designed for AngularJS, and having no end of problems!
Most of the information available about AngularJS/Angular2 compatibility assumes that you have an AngularJS project that you're adding Angular2 components to - not the other way around - so what I'm hoping to do may not even be possible. What I've tried so far involves a simple stripped-back project based on the Angular2 quickstart, with a single Angular2 component that loads into the index.html. I'd then like to integrate components from the existing library (AngularJS-based) into this.
I've tried using UpgradeAdapter.upgradeNg1Component to create components from the library and add them directly into my Angular2 component
I've tried installing angularjs through npm, importing it in a script tag into my index.html and then using a combination of UpgradeAdapter.downgradeNg2Component and UpgradeAdapter.bootstrap to load my Angular2 as a downgraded module
Neither of these seem to work - the component fails to show, and the browser console tells me I've got an Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/upgrade
Error loading http://localhost:3000/app/main.js
My best guess at the moment is that this is actually an unsupported scenario, and I need to have a 'proper' AngularJS app in order to use the UpgradeAdapter functionality from Angular2. Can anyone confirm this? Or is there something stupid I'm missing here?
Here is a working plunkr describing how to mix Angular1 and Angular2 elements:
http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview
An important point is to bootstrap your main component on the UpgradeAdapter. This way all elements are available in providers (services / factories) and in directives (components / directives):
upgrade.bootstrap(document.body, ['heroApp']);
These two answers could help you:
angular 1.x and angular2 together
How to inject upgraded Angular 1 service/factory to Angular 2 component in ES5?
So the major problem in this case turned out to be the fact that it appears that the upgrade components aren't included as part of the basic angular 2 bundle. After adding:
<script src="node_modules/angular2/bundles/upgrade.min.js"></script>
to my index.html file the error I was seeing disappeared.
Thanks to the answer here for pointing me in the right direction!
I have done the following:
Installed both the AngularJS and NodeJS Plugins in Phpstorm
Downloaded the latest stable release of Angular (1.4.8)
Added angular.js to the project
Added angular.js to the list of libraries in Phpstorm
Directives in my HTML will autocomplete fine (e.g. ng-modal), but trying to do something like Module.fact does not autocomplete to factory. Here is my code:
var appModule = angular.module("appModule", ['ngRoute']);
appModule.fac //This is me typing factory, but auto complete doesn't help
I am running PhpStorm 10.0.2. I have tried using different versions of PhpStorm and I have also tried using Angular 1.5 (the beta version) with the same result. Also, I am new to angular, but my code is working. Thank you!
*I have already reviewed these links and SO posts:
https://www.jetbrains.com/webstorm/help/using-angularjs.html
https://www.jetbrains.com/webstorm/help/configuring-javascript-libraries.html
Why do AngularJS directives (attributes, etc.) show up as "invalid" in WebStorm 8?
Getting angularJS autcomplete in Webstorm/PHPStorm
The angular variable is a global one and when you have to many declarations of the same global variable PhpStorm/WebStorm can not handle auto-completion.
It's important to verify that only 1 declaration for angular is being discovered by PhpStorm. This doesn't have anything to do with your actually JavaScript project, but where PhpStorm looks for declarations.
If you hold down ctrl and mouse over the world angular. It should show it highlighted to be clickable, and a tooltip showing where it is declared.
If the tooltip says there are multiple definitions of the identifier, then it can not do autocomplete correctly. This is true for most JS variables in Php/WebStorm not just this angular variable.
You have a couple of ways to fix this:
1) Force type declaration with JsDoc to TypeScript
/**
* #var {angular.IAngularStatic} myAngular
*/
var myAngular = angular;
This will declare the variable myAngular using the TypeScript definition. There is less likely to be conflict with any already scanned JS source files that also declare angular. It's an easy fix, but adds unnecessary source code to your project.
2) Disable JavaScript source files by excluding them
If you are using node_modules or bower_components then you need to include some of the JS files from those folders, but not unnecessary duplicates. You won't need any Angular JS files since you've already installed the TypeScript definitions (which work better for auto-completion). In the Project Files panel in PhpStorm find the Angular packages, right click on those folders and "Exclude" those folders. You can also do this via project settings in "Files / Settings / Directories"
3) Ignore bundled output files for JavaScript
This is the most common issue I find with PhpStorm/WebStorm. PhpStorm will also scan minified JavaScript files you've packaged into your webroot/js folder. For example; If you use grunt to uglify your JavaScript code into app.min.js and inside that file is Angular and your project code. PhpStorm will scan this and create duplicate declarations of everything it finds.
Find all those duplicate *.js files in your project, right mouse click on the files and select "Mark as Plain Text" from the menu. This will tell the editor to completely ignore the file from all intellisense scanning.
So to summarize. If you control click on a declaration to go to source, and PhpStorm does not go immediately, but instead prompts you select from multiple declarations, then you have duplicates in your project and you need to narrow the scope. Once that is done everything else should work as expected.
f you prefer to use a CDN, place the cursor over the highlight library name, hit Alt+Enter, and Download Library. This will set up a local library in WebStorm’s cache (not in your project) so WebStorm can access AngularJS methods, directives, etc for autocompletion and documentation lookup.
I read
JHipster After creating sample entity nothing is shown in the browser
.In my case bower seem fine. It have the angularjs lib
(When use bower list). Why it still can't reference to angularjs? If you have any suggestion on where to investigate. Thanks.
Can you provide the output from your browser's JavaScript console? Look for a syntax error.
Also you can try
grunt wiredep
in order to inject your bower dependencies into your source code (normally index.html).
Your index.html has no dependencies. You can copy them from sample-app.
https://github.com/eiriklv/react-masonry-mixin/blob/master/README.md
The above example shows the simple steps to get masonry-mixin working on node-js.
What solutions are available to enable my react component to use this plugin within a normal webpage? I would like a solution that has the least amount of 3rd party software to get working.
The require statement is not available without npm from what I understand.
Require statements can be used in client-side using a preprocessor called Browserify.
In order to use Browserify, you have to have one main .js file from which all your other files are loaded via require statements (however tangentially). You then run the Browserify command to parse and bundle it all into one file:
$ browserify main.js > bundle.js
I've personally used react-masonry-mixin, and this is the approach I use (although automated with Gulp).
I am using gulp-angular for the first time, and am following this blog: http://www.angularonrails.com/how-to-wire-up-ruby-on-rails-and-angularjs-as-a-single-page-application-gulp-version/
When I run through the install questions, it just bombs out, on Karma.
I'm on ubuntu 14 in a Vagrant box, node v0.10.37, npm 2.7.5
Any pointers would be greatly appreciated.
fluent#vagrant-ubuntu-trusty-64:~/fluent/client$ yo gulp-angular myapp
.
.
? Which version of Angular do you want? 1.3.x (latest)
? Which Angular's modules would you want to have? (ngRoute and ngResource will be addressed after) angular-animate.js (enable animation features), angular-cookies.js (handle cookie management), angular-touch.js (for mobile development), angular-sanitize.js (to securely parse and manipulate HTML)
? Would you need jQuery or perhaps Zepto? None (Angular will use its own jqLite)
? Would you like to use a REST resource library? None, $http is enough!
? Would you like to use a router ? ngRoute, the official router
? Which UI framework do you want? Bootstrap, the most popular HTML, CSS, and JS framework
? How do you want to implements your Bootstrap components? Angular UI Bootstrap, Bootstrap components written in pure AngularJS by the AngularUI Team
? Which CSS preprocessor do you want? Sass (Node), Node.js binding to libsass, the C version of the popular stylesheet preprocessor, Sass.
? Which JS preprocessor do you want? None, I like to code in standard JavaScript.
? Which html template engine would you want? None, I like to code in standard HTML.
Template processing error on file karma.conf.js
events.js:72
throw er; // Unhandled 'error' event
^
AssertionError: Trying to copy from a source that does not exist: /usr/lib/node_modules/generator-gulp-angular/app/templates/karma.conf.js
at EditionInterface.exports._copySingle (/usr/lib/node_modules/generator- gulp-angular/node_modules/yeoman-generator/node_modules/mem-fs- editor/actions/copy.js:44:3)
Some additional information, not really sure what to make of this, there is a _karma.conf.js file
myapp#vagrant-ubuntu-trusty-64:/usr/lib/node_modules/generator-gulp-angular/app/templates$ ls
_bower.json e2e gulp _.jshintrc _package.json src tslint.json
coffeelint.json _.gitignore _gulpfile.js _karma.conf.js protractor.conf.js _tsd.json
EDIT
I have had to use sudo for all npm commands. Is this normal?
EDIT 2
https://github.com/Swiip/generator-gulp-angular/issues/470
As per the github issue, deleting the reference to karma.conf.js from app/files.json did the job.
I guess there will be an official fix at some point.