Angular2 - Material2 examples : MdAutoComplete - javascript

Here is the problem,
I am actually trying the examples available there :
https://github.com/angular/material2
And I am stuck on this one :
https://github.com/angular/material2/tree/master/src/demo-app/autocomplete
I use angular2 with CLI, so I have a fresh template and I try to "copy/paste" this component. But it fails with this message :
Unhandled Promise rejection: Template parse errors:
Can't bind to 'mdAutocomplete' since it isn't a known propery of 'input'. ("
<div class="demo-autocomplete">
<md-input-container>
<input mdInput placeholder="state" [ERROR ->][mdAutocomplete]="auto">
...
...
There is no directive with "exportAs" set to "mdAutocomplete"
...
Looks like the mdAutocomplete directive does not exist.
I follow the example step by step, is there something wrong ?
Thanks for reading/help

MdAutoComplete isn't finished yet! https://github.com/angular/material2/tree/master/src/lib/autocomplete
material2's changelog says:
https://github.com/angular/material2/blob/master/CHANGELOG.md
2.0.0-beta.1 rebar-teacup (2016-12-23)
Remove MdAutocompleteModule that was accidentally included in beta.0
Correct path to umd bundle in package.json (#2368) (d286e6d), closes #2366

Related

AceEditor:Uncaught Error: couldn't load module ace/theme/

I use AceEditor in my code. When I try to save my changes, I get this error
Uncaught Error: couldn't load module ace/theme/ or it didn't call define
at afterLoad (ace.js:18798:1)
at ace.js:3776:1
at Array.forEach (<anonymous>)
at ace.js:3775:1
at _require (ace.js:88:1)
at req (ace.js:138:1)
at afterLoad (ace.js:3771:1)
at HTMLScriptElement.s.onload.s.onreadystatechange (ace.js:3397:1)
As I understand it, to fix the error, i need to set basepath.However, adding the line this.editor.set('basePath', 'https://unpkg.com/ace-builds#1.4.6/node-modules/react-ace/src') in the ace.tsx file does not help.
The basePath is the folder where ace.js is located. for unpkg it would be
ace.config.set('basePath', "https://unpkg.com/ace-builds#1.4.6/src-noconflict")
note that the method is on config object not on editor instance.
Depending on what packager you use there may be better ways to configure this.

Intellij IDEA: "Cannot find declaration to go to" - message in a new javascript project

I'm getting "Cannot find declaration to go to in" message when try to Ctrl + click the path of an imported module
This message shows up if the path contains "#" symbol as a root reference.
This is happening in my new project and there is no such problem in the old project.
How to fix this problem?
Here is the solution:
First of all invalidate cashes: menu File -> Invalidate Caches
After that set webpack settings
according to https://www.jetbrains.com/help/idea/using-webpack.html#edit_webpack_configuration_file
And also mark \src\ dir as a sources root directory
upd:
And also make sure that value of property "settings.editor.selected.configurable" = "preferences.pluginManager" in file /.idea/workspace.xml :
<component name="PropertiesComponent">
...
<property name="settings.editor.selected.configurable" value="preferences.pluginManager" />
...
</component>
upd: not sure about this step...

Using gulp-angular-templatecache to combine HTML into template.js, getting $injector Module Unavailable error

I'm using gulp-angular-templatecache, to grab all my partial HTML template files and combined them into 1 template.js file.
The first part I was able to complete, I can run my Gulp task and it creates templates/templates.js.
templates.js:
angular.module("templates").run(["$templateCache", function($templateCache) {$templateCache.put("beta.html","<div class=\"login-container\" ng-controller=\"BetaCtrl as beta\">\n <section class=\"login-form-block\">\n <header>\n <div class=\"tickertags-logo-big\"></div>\n <h1>Welcome to the TickerTags beta! Enter the email address where your beta invitation was sent below. We will send you an email with your temporary password.</h1>\n </header>\n\n <div class=\"login-form\">\n\n <form name=\"loginForm\" ng-submit=\"beta.beta(credentials)\" novalidate>\n\n <div class=\"login-alert\" ng-class=\"{ hideLoginMsg: beta.hideMessage == true }\">{{ beta.message }}</div>\n\n <input type=\"email\"\n id=\"email\"\n placeholder=\"Email\"\n name=\"email\"\n ng-model=\"credentials.email\">\n\n <button type=\"submit\" class=\"login-btn\">Email Password</button>\n </form>\n\n <p class=\"terms-of-use-line\">By signing up you agree to our Terms of Use and Privacy Policy</p>\n\n </div>\n </section>\n</div>\n");
Now I've linked to the templates.js file correctly in my index:
<script src="templates/templates.js"></script> <<--
<script src="authentication/authFactory.js"></script>
<script src="help/helpController.js"></script>
etc...
And I've included it in the main app module:
var app = angular.module('tickertags', [
'ui.router',
'templates', // <--
'authFactory',
'betaController',
'passResetController',
'loginController',
'apiFactory',
'scopeFactory',
etc...
Yet getting this error still:
https://docs.angularjs.org/error/$injector/nomod?p0=templates
Error: $injector:nomod
Module Unavailable
Ideas on why I'm seeing that?
Because that module wasn't declared properly.
You need to declare the templates module somewhere in your app like this: angular.module("templates", []); Or use options.standalone = true in the gulp plugin
From the documentation:
Note: this plugin will not create a new AngularJS module by default, but use a module called templates. If you would like to create a new module, set options.standalone to true.

ng-bind-html - with angular-sanitize - throws error in console

I am trying to add html to a div as follows:
$scope.thehtml = $sce.trustAsHtml("<b>hello</b>")
<div ng-bind-html="thehtml">
</div>
I see following error in console:
TypeError: undefined is not a function
at htmlParser (js/angular/angular-sanitize.js:205:17)
at $sanitize (js/angular/angular-sanitize.js:119:5)
at Object.ngBindHtmlWatchAction [as fn] (js/angular/angular-sanitize.js:420:15)
at h.$get.h.$digest (js/angular/angular.min-125.js:98:396)
The angular-sanitize.js:205:17 is this:
if ( html.indexOf("<!--") === 0 ) {
index = html.indexOf("-->");
Apparently html is not being treated as a String, therfore the error on indexOf ?
I have included the angular-sanitize.js, and added module 'ngSanitize' to the app.
Please see this plunk.
From what I can see your implementation looks fine! My plunk is working and I am not getting an exception with the same code.
I have not had to add ngSanitize as a dependancy of the module, I have just injected $sce into my controller.
The versions of the libraries I have used are as follows:
https://code.angularjs.org/1.2.28/angular.js
https://code.angularjs.org/1.2.0-rc.3/angular-sanitize.js
Please try replacing your script references with these versions to see if it the libs that are at fault.
Let me know how you get on! Good luck :)
Include angular first, then angular-sanitize:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/x.y.z/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/x.y.z/angular-sanitize.js"></script>

Using helpers with grunt-static-handlebars

Can anyone give me any pointers/examples on how to use your own custom helpers with grunt-static-handlebars? I've read the documentation and can't see how to do this.
I created helpers to use when using handlebars client side and I'd love to be able to replicate that on the serverside when building pages but currently can't work out how to do that.
I tried to create the fullName helper from the handlebars docs. I set my helpersPath to /helpers and created a fullName.js with this code
Handlebars.registerHelper('fullName', function(person) {
return person.firstName + " " + person.lastName;
});
Then I added it to the base.json config file
{
...
"helpers": [
"fullName"
],
...
}
And then attempt to use it in a partial {{fullName person}}
But when I attempt to run the grunt task I getting an error. Fatal error: Object #<Object> has no method 'call'
Any ideas where I'm going wrong?
You can try out grunt-handlebars-to-static, which have a example project available solving your exact problem. Also the task is highly flexible for all different kinds of folder arrangement. The docs gives two examples of most typical folder arrangement as starters.
Disclaimer: I am the author :) Cheers.

Categories