angular / angular-hint Goto Github PK
View Code? Open in Web Editor NEWrun-time hinting for AngularJS applications
run-time hinting for AngularJS applications
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?
@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?
$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.
|| getter($window, constructor, true);
You should be able to decorate $controller
to check if the || getter($window, constructor, true);
code path was taken.
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?
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)
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.
<li ng-repeat="item in items | orderBy:getItemLabel()"></li>
<li ng-repeat="item in items | orderBy:getItemLabel"></li>
<li ng-repeat="item in items | orderBy:getSortPropertyName()"></li>
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 no
ng-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.
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
Our current approach only lets us instrument apps that use ng-app
. We also need to patch angular.bootstrap
Change logic to also give message for incorrect names when using ng-hint-exclude
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.
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.
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.
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?
Add 'use strict' to all files and make sure all variables are declared with 'var'
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
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?
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.
Would love to be able to get updates as you make them. Using bower/npm is the easiest way to do that :-)
@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.
@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.
This addresses the the fact that texts nodes do not have the above function
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?
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?
This should also apply to angular-hint sub-modules.
I'm going to work on this.
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.
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
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.
@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.
After addition angular-hint throws:
`Error: $animate.setClass is not a function
toggleValidCss@http://localhost:8000/app/bower_components/angular/angular.js:16173:1
FormController@http://localhost:8000/app/bower_components/angular/angular.js:16168:3
invoke@http://localhost:8000/app/bower_components/angular/angular.js:3966:14
instantiate@http://localhost:8000/app/bower_components/angular/angular.js:3977:23
$ControllerProvider/this.$get</<@http://localhost:8000/app/bower_components/angular/angular.js:7281:18
[2]</</</<@http://localhost:8000/app/bower_components/angular-hint/dist/hint.js:138:30
[33]</</</<@http://localhost:8000/app/bower_components/angular-hint/dist/hint.js:1123:28
nodeLinkFn/<@http://localhost:8000/app/bower_components/angular/angular.js:6670:34
forEach@http://localhost:8000/app/bower_components/angular/angular.js:332:11
nodeLinkFn@http://localhost:8000/app/bower_components/angular/angular.js:6657:11
compositeLinkFn@http://localhost:8000/app/bower_components/angular/angular.js:6105:13
publicLinkFn@http://localhost:8000/app/bower_components/angular/angular.js:6001:30
ngViewFillContentFactory/<.link@http://localhost:8000/app/bower_components/angular-route/angular-route.js:918:7
nodeLinkFn@http://localhost:8000/app/bower_components/angular/angular.js:6711:13
compositeLinkFn@http://localhost:8000/app/bower_components/angular/angular.js:6105:13
publicLinkFn@http://localhost:8000/app/bower_components/angular/angular.js:6001:30
createBoundTranscludeFn/boundTranscludeFn@http://localhost:8000/app/bower_components/angular/angular.js:6125:21
controllersBoundTransclude@http://localhost:8000/app/bower_components/angular/angular.js:6732:18
update@http://localhost:8000/app/bower_components/angular-route/angular-route.js:868:25
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost:8000/app/bower_components/angular/angular.js:12980:15
updateRoute/<@http://localhost:8000/app/bower_components/angular-route/angular-route.js:550:15
qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:8000/app/bower_components/angular/angular.js:11572:31
qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:8000/app/bower_components/angular/angular.js:11572:31
qFactory/ref/<.then/<@http://localhost:8000/app/bower_components/angular/angular.js:11658:26
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:8000/app/bower_components/angular/angular.js:12701:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:8000/app/bower_components/angular/angular.js:12513:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:8000/app/bower_components/angular/angular.js:12805:13
done@http://localhost:8000/app/bower_components/angular/angular.js:8378:34
completeRequest@http://localhost:8000/app/bower_components/angular/angular.js:8592:7
createHttpBackend/</xhr.onreadystatechange@http://localhost:8000/app/bower_components/angular/angular.js:8531:1
Version angular is 1.3.3
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.
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?
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
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.
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:
Hi ,
Iam Bootstraping my App . Someone give me an example how to Bootstrap angular-hint ?
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.
@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?
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.