Angular Material - Text now showing - angularjs

I just started using Angular for university purpose and I wanted to start easy so I just copied some stuff for the official Angular material page into my editor.
(Used bower to install angular-material "bower install angular-material")
This is my code (image, because they don't like HTML code here):
http://imgur.com/pr8YYvN
The button is showing up, but the fancy "click on" animation doesn't work and I cannot see the button description neither!
It was me who add the "." in front of every src/href (the button is not there on the original angular example page, but without the dot, the font won't even be in material style but just standard e.g. Arial)
Where is the problem, did I forget something?
Thanks in advance!

You are using the controller MainCtrl in your application, but you never actually created a MainCtrl in your JS. You also reference YourController in your JS, which is also not declared anywhere.
I recommend to read the error messages angular is giving you in the console.

Related

Hosting Angular 1.5 Component in a Bootstrap 3 popover

I have an Angular 1.5 Component that works fine on a vanilla HTML page, but when I try to embed it in a Bootstrap popover, it sort-of-only-but-not quite works.
The component does a little keyboard interception and filtering of keypresses, hooks into the model's formatting chain and uses a couple of other services and directives, but nothing too "funky".
The total and values[] attributes are passed through the scope, but while total displays, the values don't but the component does not how many entries there are in the values array. Nothing obvious is dumped out in the console.
I'm not sure where to start troubleshooting this one.
Code is available: https://github.com/jeffeld/bf-calculator.git
Clone, npm install and gulp default will build it. Test code is in index.html.
Many thanks,
Jeff

Eclipse plugin for angular not working

cant make the plugin
https://github.com/angelozerr/angularjs-eclipse/wiki/Getting-Started
work, not sure why though. have followed all instructions to the T.
although angular module is installed, the problem is i cant see any angular editor.
Please help
right click on the project created in eclipse--> configure--> convert to Angular project, you will be able to get content assist for angular directives or elements on the html file now.

Detecting swipe events in Appgyver app

Are there any directives to detect swipe events? If not, how can I use something like angular-touch?
An example case is i want to hide a modal on swipe up.
I have just used angular-touch on an app and it seems to work well.
Simply download angular-touch.js from the web or use NPM install angular-touch and it will download a node module. I did this and then copied angular-touch.js into my scripts folder with my app.js file. I then added a script link to the file and then declared the module in my app includes [ngTouch].
To use, all you have to do in the container div in the page is add ng-swipe-left="function()" or ng-swipe-right="function". Remember, the function must be written in your controller for the action to actually happen.
e.g.
Hope this helps.

angular-bootstrap accordion won't open

Plunker: http://plnkr.co/edit/Sjfb3Esx1NsjwaYGLMGZ?p=preview
Accordion is in the servers tab.
The plunker actually works. My real app does not. The only thing that plunker is not really replicating is the ui-router stuff. On my actual app the accordion won't open. Other questions on SO say that ui.bootstrap is not included and that fixed their problem. I do have ui.bootstrap included though.
I've also tried copying and pasting the example from http://angular-ui.github.io/bootstrap/ that doesn't work either.
I'm at a loss for what else to look for.
More info:
I'm not getting any errors. Also other ui-bootstrap directives work just fine. I'm using tabs on this same page, and modal and dropdown work on other pages.
there is an issue with some version of angular-ui, the js assumes that one atleast one accordion is open and tries to calculate width. But bootstrap hides all accordions. So try displaying one accordion through css, i.e. set the display property of the accordion.
As per my comment:
It's my template. Somehow my template files are out of sync with the js files. In the template it is calling ng-click="toggleOpen()" which does not exist in my code. When I roll that back to ng-click="isOpen = !isOpen" everything works as expected. I need to figure out why my templates and js files are out of sync.
I installed ui-bootstrap using bower which does not include template files. I need to disable template caching during development so I can't use the tpls code. I downloaded the template directory from github and some of the templates simply do not match up with the version of code that bower downloads. I updated the template file to an older version that correctly matches the code from bower. Everything works now.

Angularstrap datepicker not working

I'm using AngularJS with requireJS with angularstrap. Right now I simply want to get a datepicker working in my modal box which also uses angularstrap and bootstrap but I keep recieving the error:
Cannot read property 'dates' of undefined
myctrl1.js is the file that downloads datepicker.js and I have all my dependancies in main.js listed. I have never been able to get what should be a fairly simple thing to work so posting here is my last resort.
Plunkr here: LINK
Main files are index.html, controllers.js, myctrl.js
I had the same issue when using jQueryUI. This datepicker is incompatible with jQueryUI datepicker (both use datepicker name), so you should remove jQueryUI from your code or do some namespace workaround.
Perhaps you forgot add bootstrap-datepicker.js on your page. I had same problem and this was solution.

Resources