angular / angular-hint Goto Github PK

View Code? Open in Web Editor NEW

363.0 35.0 45.0 277 KB

run-time hinting for AngularJS applications

JavaScript 85.55% Shell 2.07% CSS 0.38% HTML 11.99%

angular-hint's Introduction

Angular Hint

Runtime hinting for AngularJS.

Usage

Add <script src="hint.js"></script> to your app's index.html immediately after the angular.js script.

This will load the set of AngularHint modules. Now you are set to use the ng-hint directive.

Including the ng-hint directive with no parameters will install all the AngularHint modules.

Example:

<!doctype html>
<html ng-app="sample" ng-hint>
  ...
  <script src="../../node_modules/angular/angular.js"></script>
  <script src="../../dist/hint.js"></script>
  ...
</html>

For more fine-grained hints, you can use ng-hint-include to include certain AngularHint modules or ng-hint-exclude to exclude certain AngularHint modules.

Example:

<!doctype html>
<html ng-app="sample" ng-hint-include="controllers dom">
  ...
  <script src="../../node_modules/angular/angular.js"></script>
  <script src="../../dist/hint.js"></script>
  ...
</html>

<!doctype html>
<html ng-app="sample" ng-hint-exclude="modules">
  ...
  <script src="../../node_modules/angular/angular.js"></script>
  <script src="../../dist/hint.js"></script>
  ...
</html>

Building

$ yarn install

$ yarn build

Example

In the example directory, you can find a sample application that appears superficially correct but violates many Angular best practices. When AngularHint is in operation it produces hints for correcting the sample application. In the correctExample directory there is an improved version of the sample application.

Interested in Contributing?

See the Contributing Guidelines

License

Apache 2.0

angular-hint's People

Contributors

Stargazers

Watchers

angular-hint's Issues

Testing hintUI

I'm not sure where to keep track of this type of issue. But we are in the process of refactoring the UI provided for AngularHint in the console. My refactor branch can be found at: https://github.com/ealtenho/angularjs-batarang/commits/e2e

We are refactoring the back end communication with the developer tools into a service and adding unit testing.

@btford is this moving in the direction you were thinking of? My tests are still a work in progress.

Module name not found message occurs only with ng-hint-include

Change logic to also give message for incorrect names when using ng-hint-exclude

Feat: use ng-hint="{}" as a map for which modules to include

feat: enable debugging info

See angular/angular.js#8430

Sample AngularHint application?

@btford Besides the contrived examples in the e2e tests, we had discussed having a more realistic sample application using AngularHint to demonstrate its functionality. Would this sample application be developed in this repository? Do we have any ideas of what sort of application it should be like?

Chrome extension for Angular Hint

Yesterday, Brian mentioned a chrome extension to be used for Angular Hint. I made this issue as like a discussion so we can outline the project and some of the features of the extension. Do you mind explaining it a little here so we can have it documented, @btford?

Angular-hint cause failure

This failure was throw when application boostrap

TypeError: undefined is not a function
at new (https://localhost:8072/scripts/main.js:44:11)
at invoke (https://localhost:8072/bower_components/angular/angular.js:3869:17)
at Object.instantiate (https://localhost:8072/bower_components/angular/angular.js:3880:23)
at $get (https://localhost:8072/bower_components/angular/angular.js:7134:28)
at https://localhost:8072/bower_components/angular-hint/hint.js:138:40
at https://localhost:8072/bower_components/angular-hint/hint.js:1094:38
at https://localhost:8072/bower_components/angular/angular.js:6538:34
at forEach (https://localhost:8072/bower_components/angular/angular.js:330:20)
at nodeLinkFn (https://localhost:8072/bower_components/angular/angular.js:6525:11)
at compositeLinkFn (https://localhost:8072/bower_components/angular/angular.js:5986:15) angular.js:9778(anonymous function) angular.js:9778$get angular.js:7216$get.Scope.$apply angular.js:12512(anonymous function) angular.js:1382invoke angular.js:3869doBootstrap angular.js:1380angular.resumeBootstrap angular.js:1402maybeBootstrap

angular: 1.2.16

my main.js file at line 44

44 $http.get('api/about').success(function (data) {
$scope.about = data;
});

I found root cause:

hint.js:1072

    function patchArguments (fn) {
      return function () {
        for (var i = 0, ii = arguments.length; i < ii; i++) {
          if (typeof arguments[i] === 'function') {
            arguments[i] = disallowedContext(arguments[i]);
          }
        }
        return fn.apply(this, arguments);
      };
    }

This function will change $timeout or $http function.

How to provide ng-hint messages

At the very least I think it would make sense to standardized our messages by giving them to the console from one function in this overall library. For example, individual ng-hint libraries could provide an array of their messages. Then ng-hint could log those messages with standardized formatting and labeling.

Alternatively we had discussed a UI other than console.log.

Should we discuss this alternative UI? If not, I am looking into starting a shared library of functions #14 that are common to many of the libraries.

feat(): from AngularJS - ngInclude should generate error for bad expressions

angular/angular.js#8418

Error: $animate.setClass is not a function

After addition angular-hint throws:

Version angular is 1.3.3

Feat: when ng-click is fired suggest similar functions if no bound is found

fix: handle angular.bootstrap

Our current approach only lets us instrument apps that use ng-app. We also need to patch angular.bootstrap

Make sure everything runs in 'strict mode'

Add 'use strict' to all files and make sure all variables are declared with 'var'

bootstrapping and angular docs

We currently have two methods of dealing with bootstrapping since protractor uses bootstrapping and we use bootstrapping to add in our AngularHintModules.

The angular docs must also used defered bootstrapping because they are tripping our protractor deferring bootstrap logic. However, they also seem to be reaching the normal bootstrapping logic. I think this double bootstrapping is causing the following error:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-local+sha.6140861/$injector/modulerr?p0=n…rors.angularjs.org%2F1.3.0-local%2Bsha.6140861%2F%24injector%2Fmodulerr%3F...<omitted>...1) angular.js:36
(anonymous function) angular.js:36
(anonymous function) angular.js:4003
q angular.js:328
f angular.js:3964
Gb angular.js:3904
d angular.js:1500
Qa.resumeBootstrap angular.js:1523
maybeBootstrap

@btford any thoughts on how to approach this?

Github labels and milestones

AngularHint and each of the sub modules should have custom Github labels and milestones to facilitate maintenance and issue tracking.

These should be consistent with the labels on AngularJS.

docs: how to write angular-hint vs. AngularHint vs Angular Hint

@caguillen214 @btford

I'd like to describe in the Contributing guidelines where and when to use different ways of writing the names of AngularHint and the names of the various modules. Programmatically we care about each module being named ngHintNameHere in order to use the module prefixing/loading logic. However in our various documentation sources I'm feeling unsure of where to use angular-hint versus angularHint versus AngularHint. I notice that in this Readme we have angular-hint, but I'm wondering if that was the default generated by GitHub. I think that I would tend to use AngularHint and AngularHintModuleNameHere for modules. Is this a good standard for our Readme's and documentation?

areq error

After I added nghint to my application I am getting this error:

Error: [ng:areq] http://errors.angularjs.org/1.3.1/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at http://localhost:8000/bower_components/angular/angular.min.js:6:416
    at Mb (http://localhost:8000/bower_components/angular/angular.min.js:19:417)
    at mb (http://localhost:8000/bower_components/angular/angular.min.js:20:1)
    at Object.Ub [as annotate] (http://localhost:8000/bower_components/angular/angular.min.js:34:45)
    at http://localhost:8000/bower_components/hint.js:1050:38
    at http://localhost:8000/bower_components/angular/angular.min.js:56:381
    at s (http://localhost:8000/bower_components/angular/angular.min.js:7:408)
    at G (http://localhost:8000/bower_components/angular/angular.min.js:56:248)
    at g (http://localhost:8000/bower_components/angular/angular.min.js:51:172) angular.js:11339(anonymous function) angular.js:11339(anonymous function) angular.js:8415h.$apply angular.js:14210$delegate.__proto__.$apply VM3042:855(anonymous function) angular.js:1454e angular.js:4118d angular.js:1452ta.resumeBootstrap angular.js:1480maybeBootstrap hint.js:49

nghint version: latest, downloaded yesterday // please put version number into hint.js
browser and os: Chromium Version 37.0.2062.120 Ubuntu 14.04 (281580) (64-bit)
bootstrap is mentioned there.. Im using ui-bootstrap from angular team in my app maybe it is related

thanks

angular-hint style guide?

It seems like some issues such as #12 that we are having at this point have to do with overall style choices for angular-hint modules. Is there somewhere in this repo we should create maybe a 'Style.md' file to record our stylistic requirements? It seems like the modularity of angular-hint could allow for further development of modules by other interested parties, and having some decisions set down like, 'hint modules should be named with hint- a description of the modules purpose' would be useful.

feat: interpolation checker

Do you have a packaged version

Hi,

Do you have a packaged repo just to get the necessary code not all the dev dependencies (npm install angular-hint > 200Mb)

My project doubled in size just with this dependency.

Cheers,
Shprink

Document enabling ng-hint when manually bootstrapping the project

Hi ,
Iam Bootstraping my App . Someone give me an example how to Bootstrap angular-hint ?

protractor 'already bootstrapped' error

The latest version of the module loading logic in 0f95525 loads the modules as seen in manual testing. For example, running a local server and visiting the localhost at /example/#/example will show an example app. After a few seconds the angular-hint-dom message will appear in the console as that is the module that is specified to be loaded.

However, I have been unable to implement an e2e test for this behavior. I have a separate branch at ealtenho@a899b67 with my code. When trying to run protractor I get an error that

UnknownError: unknown error: [ng:btstrpd] App Already Bootstrapped with this Element 
'<html ng-app="sampleInclusiveHint" class="ng-scope">'

@btford any advice?

feat: warn when a module is created, but never added to an app

docs: Readme

@btford I'm not following this line in the README:

Add <script src="hint.js"></script> to your app's index.html immediately after the angular.js script.

Since angularHint depends on a built version of the file, wouldn't an application need to reference dist/hint.js to load the correct script?

testing this lib

We have unit tests for each individual plugin, but some high-level integration tests for angular-hint itself would be nice.

I think we should flesh out the example app, then use Protractor to E2E test this, asserting that things are logged correctly.

ddLib is not defined

I think there is an issue with the loading of dependencies for the angular-hint-directives module. When I run the sample app to test the bootstrapping and I load the angular-hint-directives module I get the error:

message
"[$injector:modulerr] Failed to instantiate module ng due to:
ReferenceError: ddLib is not defined
    at $CompileProvider.angular.module.config.$provide.provider.provider.directive (http://localhost:8080/dist/hint.js:97:28)
    at ngModule (http://localhost:8080/bower_components/angular/angular.js:2009:9)
    at Object.invoke (http://localhost:8080/bower_components/angular/angular.js:3906:17)
    at http://localhost:8080/bower_components/angular/angular.js:3824:37
    at Array.forEach (native)
    at forEach (http://localhost:8080/bower_components/angular/angular.js:320:11)
    at loadModules (http://localhost:8080/bower_components/angular/angular.js:3811:5)
    at createInjector (http://localhost:8080/bower_components/angular/angular.js:3751:11)
    at doBootstrap (http://localhost:8080/bower_components/angular/angular.js:1410:20)
    at Object.angular.resumeBootstrap (http://localhost:8080/bower_components/angular/angular.js:1433:5)
http://errors.angularjs.org/1.2.18/$injector/modulerr?p0=ng&p1=ReferenceErr…2F%2Flocalhost%3A8080%2Fbower_components%2Fangular%2Fangular.js%3A1433%3A5)"

@caguillen214 @btford does this have to do with loading the dependencies through browserify? Or is there an issue with the module itself?

Primary consumption

Is AngularHint primarily intended to be used through Batarang? If so, should the methods currently used to flush messages to console.groupCollapsed be removed? Currently a setInterval() flush produces these messages primarily for protractor tests to view them. Should this flushing be a part of the protractor testing rather than a normal function of AngularHint?

Additionally, if the primary consumption of AngularHint is through Batarang, the README of this library and of the individual modules should explain how AngularHint can be accessed through Batarang.

make use of ngHintLog pipeline to deliver messages to the user

Currently ngHintLog in each of the modules is collecting messages. This can be seen in the e2e tests that use hintLog.onMessage to put messages into a console div. AngularHint to should use this pipeline to provide these messages to the user. Should these messages be in console.groupCollapsed? https://github.com/angular/angular-hint-log/issues/7

Check to see if app is using deprecated directives, e.g. ngBindHtmlUnsafe

Add contributing guidelines to submodules

Now that we are receiving pull requests on individual modules, we should create contributing guidelines that point to those in angularHint and give a quick overview of how to submit issues and PRs (ie commit style, how to update a PR with force push, basically the material in the AngularJS contributing guidelines).

Modules needing contributing guidelines:

Warn if injectables length differs from function parameter length

https://github.com/angular/angular-hint-controllers/issues/3

I think this could possibly be a function of a hint-injector module.

See especially: angular/angular.js#3961

TypeError and application crashed after adding ng-hint (1.3.2)

Hi, I installed angular-hint and added ng-hint directive next to ng-app as mentioned in instruction. I received some hints, but also get the following errors and my app crashed:

TypeError: Object function (elem) {
        elem = angular.element(elem);
        for(var i = 0; i < elem.length; i+=2){
          if(elem[i].getElementsByTagName){
            var toSend = Array.prototype.slice.call(elem[i].getElementsByTagName('*'));
    ...<omitted>... } has no method '$$addBindingClass'
    at Object.ngBindCompile [as compile] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:21605:16)
    at applyDirectivesToNode (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:7367:32)
    at compileNodes (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:6915:15)
    at compile (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:6822:15)
    at applyDirectivesToNode (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:7280:33)
    at compileNodes (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:6915:15)
    at compileNodes (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:6927:15)
    at compile (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:6822:15)
    at applyDirectivesToNode (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:7280:33)
    at compileNodes (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:6915:15) <span ng-if="$last" ng-bind="breadcrumb.label">

TypeError: object is not a function
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:7608:13
    at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:347:20)
    at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:7607:11)
    at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:6993:13)
    at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:6996:13)
    at publicLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:6872:30)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:1456:27
    at Scope.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:14200:28)
    at Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:14298:23)
    at bootstrapApply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js:1454:15)

AngularHint triggers its own warnings

I created a very simple angular app

<!DOCTYPE html>
<html ng-app ng-hint>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script src="ngHint.js"></script>
  </head>
  <body>
    First name:<input ng-model="firstName" type="text"/>
    <br>
    Last name:<input ng-model="lastName" type="text"/>
    <br>
    Hello {{firstName}} {{lastName}}
  </body>
</html>

This triggered two warnings in Angular Hint:

Angular Hint: Modules ngHint.js:119
    Warning ngHint.js:136
        Module "ngHintScopes" was created but never loaded. ngHint.js:138
Angular Hint: Controllers ngHint.js:119
    Warning ngHint.js:136
        It is against Angular best practices to instantiate a controller on the window. This behavior is deprecated in Angular 1.3.0 ngHint.js:138

Clearly none of this is my app's fault. In particular, I was definitely not the one who created ngHintScopes, and further it really should be loaded.

Warn for orderBy getting called function in template

I've seen apps that don't realize that orderBy is supposed to be given a reference to a getter function, rather than calling the function directly. But there are advanced cases where assigning the result of a function to orderBy is warranted, so a little "are you sure?" nudge would be helpful.

Bad:

<li ng-repeat="item in items | orderBy:getItemLabel()"></li>

Good:

<li ng-repeat="item in items | orderBy:getItemLabel"></li>

Acceptable Advanced Usage:

<li ng-repeat="item in items | orderBy:getSortPropertyName()"></li>

Check for existence of function "getElementsByTagName"

This addresses the the fact that texts nodes do not have the above function

Register angular-hint on npm & bower?

Would love to be able to get updates as you make them. Using bower/npm is the easiest way to do that :-)

Latest ngHintLog improvements

@caguillen214
ngHintLog is up to v0.3.0 which means that individual modules must be updated again. This is likely to affect unit tests as it strips an unnecessary leading space that was being added to queued messages. Hence any unit tests that look for output from hintLog.flush() need to be rewritten to remove this space. I'm wondering if in the package.json for the various modules it would now make sense to use 'angular-hint-log: >=0.3.0' rather than strictly 'angular-hint-log: 0.3.0' because of this installation cost for each module. I believe this would allow the version of angularHintLog loaded by angularHint to override that of the individual module if it is newer. However, it could later cause problems if a newer version of ngHintLog introduces a breaking change and individual modules are not updated correctly.

feat: use browserify

This should also apply to angular-hint sub-modules.

I'm going to work on this.

Create a high level library of helper functions

There are a number of helper functions shared between many modules. For instance the method of logging messages and of checking spelling are redundant in different modules. We should refactor these into one central place.

@btford , @caguillen214 is a file in this repository the correct place for a shared library to live?

Travis is whinging

Integrate modules

As AngularHint modules are published using NPM and set up to use AngularHintLog, they should be integrated into the overall list: @caguillen214, feel free to post here if your modules are ready for me to integrate.

Repos are needed for hint-event and hint-module and hint-controller

@btford

'directive' or 'directives'?

I know I already had trouble loading the 'directives' module correctly as the naming and logging message made me think the module was called 'directive'. @caguillen214 do we want to standardize on the singular or plural?

Angular-Hint-Helpers as possible npm module?

@ealtenho and I have discussed and found that there a few functions that get used in many modules. Making a module on npm and adding them there would be a good option for making them available across all the modules.

@btford

Feat: warn about global controllers

$controller will load modules off of window if it can't find the controller elsewhere.

This is okay for tiny, illustrative examples, but otherwise not a great practice.

here's the offending js:

|| getter($window, constructor, true);

You should be able to decorate $controller to check if the || getter($window, constructor, true); code path was taken.

syntax in `package.json`

@btford I've looked up the definition of the ~ in npm install syntax, but I'm still confused about why I cannot automatically install the patch versions I have been working on using npm install at this point.

From npm:

 version Must match version exactly
>version Must be greater than version
>=version etc
<version
<=version
~version "Approximately equivalent to version" See semver(7)
^version "Compatible with version" See semver(7)

And from semver:

~1.2.3 := >=1.2.3-0 <1.3.0-0 "Reasonably close to 1.2.3". When using tilde operators, prerelease versions are supported as well, but a prerelease of the next significant digit will NOT be satisfactory, so 1.3.0-beta will not satisfy ~1.2.3.

Are pre-releases with 0.x.x different than betas?
I'm concerned that only I am working with updated versions of most of the submodules since installation seems to require explicit npm install [email protected] syntax.

`ng-hint` throw `object is not a function` (Angular 1.3.1)

When I add hint.js my application load properly but ngHint tells me that ngHint is included on the page, but is not active because there is nong-hintattribute present (note that I get already Controllers, Modules and Directives hint in console).

If I add ng-hint directive next to my ng-app on <html> I get this error :

TypeError: object is not a function
    at http://localhost:9000/assets/vendors/angular/angular.js:7564:13
    at forEach (http://localhost:9000/assets/vendors/angular/angular.js:347:20)
    at nodeLinkFn (http://localhost:9000/assets/vendors/angular/angular.js:7563:11)
    at compositeLinkFn (http://localhost:9000/assets/vendors/angular/angular.js:6959:13)
    at compositeLinkFn (http://localhost:9000/assets/vendors/angular/angular.js:6962:13)
    at publicLinkFn (http://localhost:9000/assets/vendors/angular/angular.js:6838:30)
    at http://localhost:9000/assets/vendors/angular-hint/hint.js:2063:22
    at http://localhost:9000/assets/vendors/angular/angular.js:1456:27
    at Scope.$eval (http://localhost:9000/assets/vendors/angular/angular.js:14110:28)
    at Scope.$apply (http://localhost:9000/assets/vendors/angular/angular.js:14208:23)

Versions info :
ngHint : master at 10:30 today
Angular : 1.3.1

I'm not sure if I'm using ng-hint properly or if it's a bug.

Feel free to ask me more details if needed.

provide usable bower version of angular-hint

I know we should use requirejs, unfortunately we don't yet.
So trying to use angular-hint fails with:

ReferenceError: require is not defined
angular.hint = require('angular-hint-log');

Can you make it possible for people to use angular-hint without requirejs?

BTW: Shouldn't there be a dependency on angular-hint-log in the bower.json of angular-hint?

When to deliver hint messages

In the same vein as #27 of translating the hintLog pipeline into messages that the user can consume, there needs to be some specific time at which the messages are flushed. I believe the current TravisCI build https://travis-ci.org/angular/angular-hint/jobs/31192589 is failing because of the timing of when messages are flushed. These tests pass locally. However, there is some delay between when the messages are logged and when protractor looks at the DOM to read values.

flaky firefox tests with protractor

@btford we observed that our Firefox tests in TravisCI are timing out in the latest builds: https://travis-ci.org/angular/angular-hint/jobs/30691686

I attempted to run the tests locally through Firefox by altering

capabilities: {
    'browserName': 'firefox'
  }

and I found that the tests stall indefinitely.