{"id":17770401,"url":"https://github.com/gampleman/angular-console","last_synced_at":"2025-04-01T14:25:29.033Z","repository":{"id":26286882,"uuid":"29734535","full_name":"gampleman/angular-console","owner":"gampleman","description":"A console for playing with JavaScript","archived":false,"fork":false,"pushed_at":"2015-05-28T12:15:09.000Z","size":220,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-07T09:48:07.573Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/gampleman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-01-23T13:55:27.000Z","updated_at":"2018-08-12T12:06:59.000Z","dependencies_parsed_at":"2022-08-26T20:22:37.609Z","dependency_job_id":null,"html_url":"https://github.com/gampleman/angular-console","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gampleman%2Fangular-console","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gampleman%2Fangular-console/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gampleman%2Fangular-console/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gampleman%2Fangular-console/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gampleman","download_url":"https://codeload.github.com/gampleman/angular-console/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246653002,"owners_count":20812226,"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":[],"created_at":"2024-10-26T21:22:50.410Z","updated_at":"2025-04-01T14:25:29.012Z","avatar_url":"https://github.com/gampleman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-console\n\nAngular Console is a JavaScript console that you can embed in your webpage. We use\nit for our internal documentation, but it can be used in a variety of contexts.\n\n- Easy to setup\n- Can be easily customized by using HTML attributes\n- Plugin your own evaluation service\n\n\n## Getting Started\n\nDownload the [production version][min] or the [development version][max].\n\n[min]: https://raw.github.com/gampleman/jquery-angular-console/master/dist/angular-angular-console.min.js\n[max]: https://raw.github.com/gampleman/jquery-angular-console/master/dist/angular-angular-console.js\n\nor use\n\n```sh\nbower install angular-console\n```\n\nIn your web page:\n\n```html\n\u003cscript src=\"angular.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"dist/angular-console.min.js\"\u003e\u003c/script\u003e\n```\n\nIf you are not using Angular in your web page, than you need to add this attribute\nto your body:\n\n```html\n\u003cbody ng-app=\"AngularConsole\"\u003e\n```\n\nIf you are using AngularJS, then you need to add this module as a dependency:\n\n```javascript\nangular.module('MyApp', ['AngularConsole']);\n```\n\nYou may want to add some CSS similar to this, but adding some colors etc:\n\n```css\nconsole,\nconsole pre.output,\nconsole pre.output span,\nconsole textarea,\nconsole textarea:focus {\n  font-family:  monospace;\n}\nconsole {\n  color: #ccc;\n  background: #333;\n  padding: 20px 20px 15px;\n  margin: 30px auto;\n  display: block;\n}\nconsole pre.output {\n  display: block;\n  white-space: pre;\n  width: 100%;\n  height: 285px;\n  overflow-y: auto;\n  position: relative;\n  padding: 0;\n  margin: 0 0 10px;\n  border: 0 none;\n}\nconsole pre.output span           { color:#f7f7f7; }\n\nconsole pre.output span.command   { color:#ccc; }\nconsole pre.output span.prefix    { color:#777; }\n/* These are type hints, you can add more if you wish,\n * the builtin ones are number, string, object, array, error, undefined and\n * builtin (used for things like :help)\n */\nconsole pre.output span.error     { color:#f77; }\n\nconsole .input {\n  padding:0 0 0 15px;\n  position:relative;\n}\nconsole .input:before {\n  content:\"\u003e\";\n  position:absolute;\n  top: 1px;\n  left: 0;\n  color:#ddd\n}\nconsole textarea {\n  border:0 none;\n  outline:0 none;\n  padding:0;\n  margin:0;\n  resize: none;\n  width:100%;\n  overflow:hidden;\n}\nconsole textarea:focus {\n  outline:0 none;\n}\n```\n\n## Documentation\n\nMain usage is through the `\u003cconsole\u003e` element which will output a thing that looks\nlike a console where you can type in expressions that will be evaluated.\n\n### Attributes\n\nThis element is customizable via several attributes:\n\n#### `result-prefix`\n\nAn expression that should evaluate to a string. This will be rendered in front of results of evaluated\nexpressions.\n\nExample:\n\n~~~html\n\u003cconsole result-prefix=\"'=\u003e'\"\u003e\u003c/console\u003e\n~~~\n\nNote the extra quotes.\n\n#### `placeholder`\n\nString. The text that will be displayed in the input area if no text is sent.\n\nExample:\n\n~~~html\n\u003cconsole placeholder=\"Type here to see some cool stuff...\"\u003e\u003c/console\u003e\n~~~\n\n#### `help-text`\n\nAn expression that should evaluate to a string. You can customize the text that appears via the `:help` command using this attribute.\n\n#### `evaluator`\n\nString. This would be a name of an evaluator service. The default one evaluates\nJavaScript code in an iFrame and returns results. You can create your own and register\nit through this attribute (or simply call it `consoleEvaluator` to replace the default).\n\nAn evaluator service might look like this:\n\n~~~javascript\nangular.factory('fooBarEvaluator', function($q) {\n\n  /* You will be passed the directive's attributes object,\n   * it's scope object.\n   */\n  return function(attr, scope) {\n        // you can retrieve string settings like this:\n    var foo = attr.fooVal || 'foo',\n        // and dynamic ones like this:\n        bar = attr.bar \u0026\u0026 scope.$parent.$eval(attr.bar);\n    // and bound ones like this\n    var foobar = foo + bar;\n    if (attr.foobar) {\n      scope.$parent.$watch(attr.foobar, function(val) {\n        foobar = val;\n      });\n    }\n\n    // any more initalization should happen here\n\n    // then return a promise for an evaluator object\n    return $q.when({\n      // this object currently should have an `evaluate` method\n      evaluate: function(command) {\n        switch(command) {\n          case 'foo':\n            // this function should return a promise for a Result object\n            return $q.when({\n              // this will be displayed as the result text, should be a string\n              result: foo,\n              // you can use the optional type attribute to add a css class to the result\n              type: 'string'\n            });\n          case 'bar':\n            return $q.when({ result: bar });\n          case 'foobar':\n            return $q.when({ result: foobar });\n          default:\n            return $q.when({ result: 'Unrecognised command', type: 'error' });\n        }\n      }\n    });\n  };\n});\n~~~\n\nThen in the HTML you would do:\n\n~~~html\n\u003cinput type=\"text\" placeholder=\"foobar\" ng-model=\"foobarVal\"/\u003e\n\u003cconsole placeholder=\"Type some foobars\" evaluator=\"fooBarEvaluator\"\n  foo=\"fooie\" bar=\"'bar' + 2\" foobar=\"foobarVal\"\n  help-text=\"'This language only accepts foo, bar and foobar'\"\u003e\u003c/console\u003e\n~~~\n\nThe default evaluator accepts the following attributes to customize its behavior:\n\n#### `src`\n\nString. The console creates an iframe which is used as the context for evaluating\nscripts. By default, this is an empty page, but you can set it to be a particular\nURL. Using a special page for the url, you can customize the context/environment\nthe expressions will be evaluated in.\n\nExample:\n\n~~~html\n\u003cconsole src=\"../my-app.html\"\u003e\u003c/console\u003e\n~~~\n\n### `scripts`\n\nExpression that evaluates to an array of string URLs. You can preload a number of\nremote scripts into the execution context before the console is initiated.\n\nExample:\n\n~~~html\n\u003cconsole scripts=\"['https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js', 'my-script.js']\"\u003e\u003c/console\u003e\n~~~\n\n### `inject`\n\nExpression that evaluates to an array of strings. This is an Angular specific feature.\nYou will need to add Angular JS to your execution context and instantiate an Angular\napp on the body of that page. You can achieve this by loading a page that does this\nvia the `src` attribute, or you can do it dynamically via the `scripts` mechanism.\n\nIf this is set up correctly, then for every member of the inject array, a local variable\nwill be created that has the value of requesting a dependency of the same name from\nthe injector.\n\nExample:\n\n~~~html\n\u003cconsole src=\"myapp.html\" inject=\"['$q', 'MyService']\"\u003e\nvar deffered = $q.defer(); // this allows us to use `$q` as a local variable\n\u003c/console\u003e\n~~~\n\n### Contents\n\nWhatever text is inside the attribute is evaluated in the context and printed out.\nIt will be split on `// =\u003e`, where that comment is ignored and the result of the\nprevious statement will be printed.\n\nExample:\n\n~~~html\n\u003cconsole\u003e\nvar a = 1;\nvar b = 2;\na + b // =\u003e\na * 2 // =\u003e\n\u003c/console\u003e\n~~~\n\nwould result in the console looking something like this:\n\n```javascript\nvar a = 1;\nvar b = 2;\na + b\n=\u003e 3\na * 2\n=\u003e 2\n```\n\nYou would then have access to `a` and `b` as local variables and the three\nstatements would be prepopulated in your history.\n\n### API\n\nThe directive exposes a controller whose methods you can call or overwrite, in\nwhich case you can customize the behavior.\n\n#### `evaluate(command)`\n\nThis will `eval` the string command in the context and add it to the history, displaying\nit in the console as well as the result.\n\n\n#### `specialCommands(command)`\n\nThis is a filter on the commands which handles the special commands the user can type.\nIf it returns `false`, the command will not be `evaluate`d.\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgampleman%2Fangular-console","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgampleman%2Fangular-console","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgampleman%2Fangular-console/lists"}