What is Reddit's opinion of Plunker?

Hi, I am the creator of this monstrosity. I see that it's getting pretty roundly panned as a return to the bad days of Flash and so on.

I am by no means suggesting that anyone use this for anything where usability is a concern. Of course, the demo themes are a bit over-the-top and not all of them are intended for serious use because I wanted to illustrate a few different things which could be done with it, but not that necessarily should be done in most contexts.

If everyone started using this on their websites tomorrow, after I got over the initial excitement, I'm sure I'd be as horrified as you guys.

Aware of this fact, here is what I wrote in the section "What's It For?":

> Horizonal.js grew out of some simple experimentation with CSS transforms and animations, and if nothing else it is a showcase for the cool visual effects that can be achieved through these technologies.

> Other use cases could be slides for presentations, image galleries, portfolios, marketing websites, or whatever else you can think of. Note that this is very much an experimental project, so be careful and test well before using in production!

Luckily this was just a side project to give me something to work on in my spare time, so I'm not too distressed if it's not everyone's cup of tea. But thanks all the same for checking it out and leaving feedback!

I do maintain that there can be certain use cases where this would be appropriate and cool, and hey, it's really fun to hack away at customizing the transitions. If anyone is interested in having a go, try the playground on plunker. If you come up with something nice, let me know and I can add it to the demos. Then you can join me in the hall of shame for bringing back the bad old days :P

Interesting solution. It certainly makes sense to allow code to be embeddable and runnable from SO. As the creator of Plunker (http://plnkr.co), I think that there will continue to be value in external services that provide a more complete UX and other value added bits like transpilation for things like less.

I am completely new to AngularJS-- three weeks. I have already done in maybe two dozen lines what would have taken much longer with a jQuery only solution... I am using ng-model, ng-change, ng-disable, ng-options, (instead of ng-repeat in a select element), $http, & $log. My post earlier this week is literally this: http://plnkr.co/edit/wTIo8y6Det9Y5VLP86pM

If you didn't have 5,000 other better things you are doing, you could see my short evolution from 'guy fairly okay with javascript' to 'guy becoming fairly okay with Angular'. This library is great-- but the two-way binding is what has really done it for me... React seems cool and all-- I don't need to say bad things about it. It is just that even as janky as Angular feels and how terrible the documentation is-- my application of the code has created an easier to understand user interface from the perspective of a stranger looking at my code. I attribute that to being so because there is so much less of my code and that is mostly because they have given me tools to do all the things I had thought to do... I am filling dropdowns that are dynamically linked to one another and acting on each change event appropriately. Just really impressed with the tool.

I'm a big angular user. I created Plunker, which is 100% written in Angular.js as a part of my learning experience of the framework.

My biggest gripe is the challenge of server-side rendering. I would like a mechanism to deliver pre-rendered markup to the client side and have that markup then 'taken over' and cached by angular as a template. I'm sure there is some tricky way to put this together, but for the time being I have not seen a clean solution.

The reasoning is a bit tricky, but I'll do my best to explain why it is the expected behavior.

When you kick off an async call, you're essentially telling the browser to call all of these function calls at one time. In async, we're telling the browser to keep moving on to the next instructions and don't wait for every single async calls to complete. The very nature of an async call is that we don't know how long it is going to take to finish because we need to move on to other things.

This means that even though you have your AJAX request in a for loop that executes sequentially (line 11), the AJAX calls don't wait for each other to finish and the browser just executes them and then speeds on without waiting for them all to finish. This might seems silly, but it actually is very useful oftentimes because it allows the browser not to lock up while it waits for files to come from the server. The downside is that the programmer (you) gives up the ability to easily see when entire batch of the requests are complete.

By not waiting for the AJAX requests to finish, the javascript event loop just goes on to the next instruction, which in your case, is the for loop on line 27. Since responseData.length is 0 at this point, the browser just assumes that it should ignore this for loop and keep going past it to the end of the file.

There are methods you can modify your code to use deferreds/promises to get around this limitation. It is a fairly advanced topic but here is a tutorial that might help: http://danieldemmel.me/blog/2013/03/22/an-introduction-to-jquery-deferred-slash-promise/

In order to see callbacks vs promises as used in flow control, you can check out this advanced example: http://plnkr.co/edit/XJeorB?p=preview

Note that chained callbacks execute one after the other, while async/promise based calls will finish in a random order and are all kicked off at once.

There are various suggestions already (and you could add bundling, as another option), but if you want to try to walk through this and solve it, you'd need to:

Show the code. Maybe not all, but a minimal (non-)working example with the actual code you have and not just a general description. Ideally, you'd put that in a Fiddle/Bin/Pen/whatever. I could suggest for the current problem Plunker as it allows you to easily create multiple files in you demo.
Explain exactly what "won't work" means to you. More precisely, explain, with the code, what part is not behaving as you expected, what you expected and what is actually happening instead. This is probably the most important part, as people may be answering to what they understood you were asking, but not necessarily to what you actually intended to ask.

EYY YOOW!

The reason your code isn't working is because you're trying to fire off your jQuery libraries before the directive initializes.

Basically, the way directives work is that they need to download the template first, and then show it. The downloading and the code in your init.js file is happening at the same time.

To fix it, you need to only initialize your jQuery when the template has already loaded (preferrably through the link function)

Working version: http://plnkr.co/edit/DA4GgIYSvbhwg3IVFFXU?p=preview

Who knows really, not enough investigation done.

Here is the source for Imagus: http://plnkr.co/edit/9acdFh?p=preview

I pulled it from the Chrome Store using the CRX Viewer extension.

I glanced at it, but I'm not really well versed on browser extensions and the protections that they use.

If anyone wants to play with Angular2 code with ES6/Typescript syntax, the plunker links in the "Step by Step Guides" section are a really quick way to dig in, since they include all the transpiling/systemjs/polyfill/etc stuff already.

Here's a direct link to one of them.

Your logic was wrong in my opinion.

your code was missing body tags
you were using css in javascript code, which is unrecommended due to maintanance and modularization (of concepts) read
you should forget to call javascript functions in anchor elements in this way!
you should avoid using the inline style property on DOM elements. It makes maintaining your code harder. Use class selectors instead.
you are using the same id on multiple elements, hence id must be unique! You should use class instead.

My example: http://plnkr.co/edit/woW2Ct1Z9UIv3hzBY3yH

i was using jquery for accessing DOM elements, attaching event handlers for events, like clicking on the DOM item what should hide/show the specific node.
i was refactoring your code, to be more modular, by copying the javascript code into a separate file

Or if you want a vanillajs slution: http://plnkr.co/edit/dHQYHn3zmDuK1CeFHCcF

If you have questions about the code, feel free to ask.

Cheers

I've been working with Angular for a while now- and while I love it in general, I hate working with forms. The process of declaring validation rules bloats the HTML. The syntax for showing validation errors is very verbose. And in general, the process is tedious.

After putting a lot of thought into this topic, I decided to release my own open source project to (hopefully) make things easier on myself and my fellow Angular developers.

I sent a pre-release version of formFor to a colleague at Rosetta Stone who was kind enough to plug it into one of their Angular projects. She was able to reduce the number of lines of form-related code in their views and controllers by ~75%! (Also, for those of you who care, it only takes a small adjustment or two for formFor to play nicely with IE8.)

Here's a couple of demos for you guys:

Simple form: http://plnkr.co/edit/p1cKIYdBYAJ9NYUZ2Jst
Slightly more complicated: http://plnkr.co/edit/lJEeXRcgqFbp3c7pxvbU?p=preview

Anyway, I'd love to hear your thoughts about this library. Where should it go next?

Try http://plnkr.co

Its biggest feature over things like jsfiddle or codepen is the ability to have basically mini projects with several files that are referenced. It also has syntax highlighting for multiple languages, live preview, and real time collaboration (haven't tested this personally) amongst other common features.

It's popular in the AngularJS community for sharing prototypes because of the ability to structure your app.

Basically, <ng-content></ng-content> is like transclude from Angular 1. Here is a plunker showing ways that you can use it.

So, lets say you have 'black-border', component, and the template looks like:

If you are using this black-border component somewhere else in your application, you could do.

<black-border> <h1>Hello World</h1> </black-border>

The "Hello World" would then be embedded within the <div> that has the black border on it.

You can also use selectors with ng-content, so if you had 'borders-component'

and in a part of your application it was being used like

<borders-component> <header>I'm a header</header> <div class="body">I'm a body</div> <footer>I'm a footer</footer>
</borders-component>

The header would be inside the black-border, the body would be inside red border, and the footer would be placed inside of the orange border.

There were a couple of problems in your code but the main one I ran into was that you were calling the controller twice, which was then causing two different instances of $scope.characters to initialized. Here's the plnkr to the corrected code. Notice that I'm only calling the controller once and that I'm passing the model from the inputs into the submit button's ng-click function.

It would be worth your time to sit down and read John Papa's Style Guide for Angular. It'll help give you some clarity on common angular pitfalls and practices.

Good luck and happy coding.

I couldn't find a demo page in the website. Maybe you don't have one, but I would like to see what it looks like before I invest time into downloading it, setting up my own sample, and trying to understand the configuration options. You could use Plunker, CodePen, or jsfiddle to show some samples.

I run Plunker (http://plnkr.co) on Modulus (http://modulus.io) where zero downtime deployment is a simple 'modulus deploy', I have real-time server stats and I have automatic scaling for the odd traffic surge. Also, every issue I've ever had was quickly responded to by a competent human and resolved.

I strongly recommend Modulus.

While I don't recommend taking the conventions (or lack thereof) too seriously, Plunker (http://plnkr.co) is open source and is built with Angular.js.

You can see the front-end code in this repo: https://github.com/filearts/plunker_www

When I say don't take the conventions too seriously, it is because I built Plunker while learning Angular.js and so the approaches taken to the same sort of issue may be quite inconsistent between different parts of the app. Also, it is written in coffee-script which I no longer use.

That being said, there is some good stuff buried in there.

You might find better examples of Angular code in a (now very outdated) version of Plunker.NEXT that is open-sourced. Now I use webpack to handle dependencies. The front-end bits are at: https://github.com/filearts/plunker-next/tree/master/servers/web/assets/js

Glad to hear I'm not the only one who felt this way ;)

My <select-field> directive doesn't require you to work with ngOptions. Here's the docs (with some examples): https://github.com/bvaughn/angular-form-for/wiki/selectField-Reference

And here's a demo with a select field: http://plnkr.co/edit/lJEeXRcgqFbp3c7pxvbU?p=preview

Directives actually have a controllerAs: field you can populate to achieve the same behavior, since you're not usually using an ng-controller directive in those situations. All it's doing is attaching that controller variable to the $scope itself.

This:

function MyController () { this.someValue = "Hello!"; }

<div ng-controller="MyController as myController"> {{ myController.someValue }} </div>

Is no different from:

function MyController ($scope) { $scope.myController = this; this.someValue = "Hello!"; }

<div ng-controller="MyController"> {{ myController.someValue }} </div>

Except that the "as" syntax implicitly creates a namespace that refers to the controller's this whereas you have to make a namespace yourself (if needing to solve the 2-way binding inheritance issue) in the latter scenario.

http://plnkr.co/edit/rw7QclqIhL5GUb4gBZXM

Because of how simple this feature is I honestly can't think of any "downsides" that didn't already exist with the manual namespacing hack you had to do previously.

My thought would be to make a component or a directive who's sole purpose is to figure out which type of component to create.

Here's an article describing how to build a directive to do that: http://www.codelord.net/2015/05/19/angularjs-dynamically-loading-directives/

I attempted to do it with a component, but i havn't been successful. My first thought was rather than doing a static template, i would use a function. Unfortunately, while you have access to the attributes at that time, they have not yet been interpolated, so all my code would see is that the activity is the string 'activity', not an object who's type i can check. Here's a plnkr of what i was working on, but it does not work: http://plnkr.co/edit/idEz07dLjCiY3chG35Ua

Can't share it because it's practically owned by my company, you can look however at http://plnkr.co/edit/GJTLrnQdRDBvZenX59PZ?p=preview by user zoechi. As an added bonus, his work is done with TypeScript, I've used pure ES6 because of workplace requirements (his code is more concise for it).

Actually, that's not quite true. You can include as many separate modules as you would like on the page, but you have to use <code>angular.bootstrap</code> to initiate all but the first.

Example

http://plnkr.co/edit/9EtA4ITkyke2JAtZz5E7

A couple of problems:

when you were registering your services with Angular, you prefixed the function name with SW. However, these functions did not belong to the SW object - causing it to fail.
the one() and other() functions in your controller weren't exposed to your scope, meaning the view wouldn't be able to call them.

The big issue with instanceof is that it doesn't work with objects that are shared between windows/frames. People writing libraries that are meant to be widely reused or building "third party JS" components tend to eschew it for that reason.

You can with 2 inline-block elements next to each other:

.one { display: inline-block; height: 100%; vertical-align: middle }

.two { display: inline-block; vertical-align: middle; }

Dynamic heights! woo

Edit: Japanese flag example on Plunker

Nice work.

I added fractions to hours and minute hands http://plnkr.co/edit/OBq7563Yolkqh2fMwN4s?p=preview

edit: smoothed the seconds hand @ ~ 30fps now too. killing a little time with very little code today.

I'm sorry, I should've been more precise. It can run asynchronously.

The problem with your example is the Observable you have created. That is, you create an Observable with a "fixed source", the array with 5 items. That creates a, say, resolved stream of five events. When you call map or forEach on that, you consume the whole stream because the events are already generated when you reach the map and forEach statements.

Now, suppose you create your Observable from an asynchronous source of events, say, mouse clicks...

const source = Observable.fromEvent(document.body, 'click');

Now, this stream is asynchronous. It starts with no events, and every time a click on document.body happens, then a new event is triggered in the stream. This means if you now do...

const example = source.map(click => click.clientX) example.forEach(x => console.log("click at x: ", x)); console.log('end');

Now, each event fired on the stream executes asynchronously on your transformations.

This is why I mentioned it may help to think of streams as "sort of arrays"... but it may not too. It may confuse some people and help others.

Here we go:

http://plnkr.co/edit/RO5GZYgfEmbbEnZLbxSU?p=preview

Rather than using the items I was talking about previously, I changed your model into an arraymodels, as I thought it might be easier to understand.

I've tried to add comments to explain the reasoning behind most of the changes - any questions or further explanation you want, ask and I'll try go into more detail.

there's a problem with the encoding of the é character. If You save your .csv file with encoding UNICODE- UTF-8 your problem should disappear. Using the Mike example: http://plnkr.co/edit/XBjL6P Hope it helps!

Try this to get you started: http://plnkr.co/edit/tgMmGtOr3vm1XBWrUOKO?p=preview

A couple notes

$("this").val($("#UserInput"));

If you want to reference "this", do it without quotes so you're not turning it into a string. Second, "this" in this case would be where the event took place, and since you're watching for a click on the "submit" button, "this" will reference the submit button, nothing else.

See if you can make some progress from there, let me know if you need any more help.

You should really be bundling your app with System Builder or similar. You could do it this way, but it might be easier to configure System to know about @angular imports and do the right thing. Check out the way the Angular2 plunk template does this in config.js.

for what it's worth, I'll be working on ui-router-ng2 over the next few months. I plan to release an alpha around ng-conf timeframe.

The transition from ng1 to ng2 for a ui-router app will mostly involve migrating ng1 state template+controller to ng2 component.

Here's my ui-router + ng2 proof of concept in a plunker: http://plnkr.co/edit/PF69BVa1WnUYZKkURgMm

Source code is currently at https://github.com/christopherthielen/ui-router/tree/ng2 but will be getting a new home soonish.

I'm a newbie with angular 2 and typescript, but i've used rxjs observables alongside angular 1, so i took a shot at it. Here's the plunker of my implementation: http://plnkr.co/edit/4eI5ce0iS6G69FzHNfEH?p=preview

I updated getPersonById in service.ts to use angular 2's Http service. It gets from a rest api, then when it gets the response back, maps it into an object matching the person interface. I did not update getDepartments.

In form_edit_component.ts, the ngOnInit function synchronously sets the model to an empty object, then calls getPersonById, and when it receives the response, updates the model.

Some small changes were made to main.ts and app.ts to import stuff related to http and rx.js

EDIT: though it's currently not being executed, i also modified your createObservable function to use some of the built in observable functionality and thus be just a one-liner.

Here I roughed out something.

UserService to hold global settings for user information/settings (like notification settings). NotificationService that wraps a toast plugin (in this case I'm just using alert() ), exposes public function, injects userService to see if it should be called or not.

two controllers, just to show you how this works between possible situations. Quick rough draft. Not saying this is how you should lay out your application more of a blueprint of how the logic could work

http://plnkr.co/edit/IXrdODl45IKKcIL0x56o?p=preview

Ng2-animate isn't complete yet so they haven't exposed it to the public api.

There is a hook in the DomRenderer using the class ng-animate. Check out this plunker for an example.

It's very buggy though as elements can get stuck in a state as they are triggered to enter or leave the dom. For now the best way is to just add an animation class first then update your model in a animationend event.

I've made a directive to make this a bit easier https://github.com/FuelInteractive/fuel-ui/blob/master/src/directives/Animation/Animation.ts

bootstrap will work just fine for this, you just gotta work at it a little bit. Nesting grids will make this layout work and can keep responsiveness in tact as well.

http://plnkr.co/edit/EcE0ZpZT7iwvxqUXFptV?p=preview

You're going to want to expand the right frame to see it, and then add heights to your panels.

His example didn't convert properly between base58 strings and bytes/hex.

Here's a working example using the Bitcore library, which is cheating a little: http://plnkr.co/edit/hmyczU6UKjkjExYVW557?p=preview

Under the hood, here's what has to happen:

Take your base string e.g. 1MikesAppGameWinner123456 and pad it out to 34 characters

1MikesAppGameWinner123456XXXXXXXXX

Convert the base58 string to byte array/buffer/hex (whatever your crypto library works with). Base58 is a Bitcoin-specific thing, you won't find it in any standard crypto libraries.

00e3480279a329f91524ea33b12a1763c20aecef7bf45a70f2

Strip off the last 4 bytes

00e3480279a329f91524ea33b12a1763c20aecef7b

Double SHA256 it

694c0988c6d61d99648bf3b889ab6e75e7d64ef047cf129d101a8ba99e1a34cd

Take the first 4 bytes 694c0988 and append to the address bytes

00e3480279a329f91524ea33b12a1763c20aecef7b694c0988

Convert to base58

1MikesAppGameWinner123456XXXTyNQk7

Thinking purely abstractly, if you want more than one custom component to share the same behaviour, then your best bet would be to use mixins.

The React class creator offers mixin support, and this is how you would use it. Although, do note that <code>createClass</code> will be deprecated on future versions of React, in favour of using idiomatic JavaScript instead of using a custom library that attempts to extend the language somehow.

So in preparation of using ES6 classes, here's a library you can use (shameless plug): https://github.com/shovon/mixins

Glad you got it working!

So the reason my first suggestion and also new Date doesn't work is that expressions only have access to things inside that controller's scope, it doesn't actually eval javascript.

For the same reason, {{Math.floor(0.5)}} won't work

Now, if you really wanted to, you could attach <code>Math</code> and <code>Date</code> to the scope, but that would definitely not be the Angular Way (although I don't really see how it's less testable than using a filter, maybe someone else could shed some light on this)

You can either make it two different apps, which sounds like not what you want to do. You can always make two SPAs with shared components.

That being said I have a large app I'm working on that has three "modes" which require totally different layouts. I'm using UI Router and my first state is the entirety of my index.html. My index has the head content and a body containing only a ui-view tag.

I then define an abstract states for each layout type. In the case of the application example linked below I have an 'app' parent state that defines the layout for most of the application and a 'dashlayout' state that defines the layout for the various dashboard states.

http://plnkr.co/edit/EdpAzti7zxBnMaxp2tqv

I replied on /r/javascript/ but to repeat:

If you are willing to learn JavaScript and AngularJS at the same time here is a cookie clicker clone I created using AngularJS and an AngularJS based game engine I've been building.

Using just this example you should be able to add your own "buildings" and achievements right away. If you want to understand more about the engine take a look at the wiki. If you have any questions contact me.

P.S. /r/incremental_games is probably more appropriate.

Your problem was simply calling the incorrect function name inside the buttons' onClick =)

ex. onClick="Dewritos(1)" --> onClick="addDewritos(1)"

Everything else works fine, here it is working.

I'm guessing you mean you wish to stack them on top of each other, and not position them ABSOLUTELY on top of each other.

I'd suggest a container that wraps them both to the desired size, then placing them inside with 100% width, or with the display:block; property.

http://plnkr.co/edit/RoR2qXy4LwThZA5Q2WMX?p=preview

(I'm responding with help and on behalf of the Angular team)

This is already supported in Angular 1: See this http://plnkr.co/edit/ToQoecY3R45Uuiwt1lD2?p=preview.

In Angular 2 this use-case will also be supported. The forms in Angular 2 have a lot more programmatic control and should be able to handle this without an issue.

In case OP is interested in how modulus could be applied to solve the problem, here's a quickly thrown together sample: http://plnkr.co/edit/vSZxqLtA48Nhw5rsXREJ

It's coded in javascript but the logic carries across. Just a quick note to cover myself. The sample is certainly not as well done as it could be and I'm also skipping quite a bit of error checking.

That's not really how this works, friend. The official documentation has this covered fairly well. There's also a plunk you can see for an example.

Here's the plunker

It's an early version, but a nice preview of what we're doing. Currently we're focusing on removing our dependencies and cleaning up what we have.

Ok. First you need to realize that JavaScript in a browser can't open files server side. That would be a security nightmare.

However if the file is accessible via the web , meaning it's being being served by a web server, then you can download the file using ajax and parse it. You don't need papaparse to do this. It's cleaner to use just vanilla javascript.

Here's an example: http://plnkr.co/edit/PiQCjM4lCrBud80PL7cT?p=preview

You'll notice I just used javascript's split method to split the data by line, then for each line just split it by white space.

This is using jquery, but let me know if you want a version that doesn't use jquery.

It depends. Do you only have one input field in this form? Or a lot? Do you submit the data when the user presses the submit button? So assuming you have a bunch of fields in the form, you only want to send what has changed, right? As long as you attach the name attribute to your form, and to your input fields, you can determine what is "dirty" and what is "pristine"

Look at this plunker. When the submit button is clicked, we loop over the form object and find out what input values have changed, if $pristine is false, we have the key (name of the property we want to update to the api) and the new value

http://plnkr.co/edit/jjrAh02Hfn3Ig507WA0E?p=preview

Open up your web console to view the console logs i nthis example... I hope this helps you. Just remember to make sure you have the name attribute matching the key in the object. name="field_10" ng-model="user.field_10" so when you loop over the field object your key value is exactly what you need.

Not a dumb question at all. As others have pointed out, you have several options. You can:

1) Just run the code in your browser developer tools console.

2) Create a simple .html file that links to the javascript file or contains the code inside <script> tag. This gives you the access javascript browser 'context' , browser developer tools and web page for input and output.

3) You can, with some effort, install node.js and run plain javascript files on command prompt. This give you the access to javascript node 'context' and lets you manipulate files, and do stuff that is not possible on browsers due to security restrictions. For input and output you only have command line, unless you install additional modules.

4) You can run it online in various services like repl.it or plunker repl.it is somewhat similar to option 3. because it just runs javascript file without associated web page (without giving you access to node 'context' or modules). Plunker lets you select javascript (web development) libraries and is similar to option 2.

I am a very satisfied customer of http://Modulus.io.

I have run http://plnkr.co (>1m pageviews per month) off their Paas since migrating from Nodejitsu a few months back. The migration was painless and the resulting stability improvements have been very impressive.

Beyond that, the team running the service has been extremely responsive both via email and irc on #modulus. Strongly recommended.

It seems to me that you need two views onto the same list. Each item on that list has state that determines when it should be shown in a given list.

This is what I ended up with:

I have a live plunker for you here: http://plnkr.co/edit/w03a28HLnF2GqFmCidPK?p=preview

I hope it's obvious that I could apply the filter to the first list to only show the unselected items and to change the UI so that clicking in either list toggles the selection.

You could store the selection in a separate object if need be but I think this way is better.

Whether adding it via javascript or html, it should work the same way. For instance, check out this plnkr. Now the onclick is in the html and doesn't have to be added via javascript. Now you can do your request and swap the text according to the response. Speaking of which, I recommend you either check out Promises or this page on XMLHTTPRequest response so you can toggle the Follow/Unfollow in accordance with the response.

I think I managed to solve it. The problem is, I subscribe twice, once with async and the other time with .subscribe. I should be reusing the observable, by using shareReply. Here's the final code, feel free to comment: http://plnkr.co/edit/F0dheIdgoNNw53hNVjZm?p=preview

I copied your code and it seemed to work fine for me (well, the http call results in a 404, but that's to be expected). http://plnkr.co/edit/rm2ulvRlavkTbjxS5Sdv?p=preview

I made a couple changes to your code, but they were just to get things running, not to try to fix your bug:

1) I had to change one of the module calls to .module('recFitApp', []), to create the module. You may well have this elsewhere in your project besides the files you quoted
2) In the controller, i removed the reference to $routeParams and just hard coded a number.
3) I changed the .success() and .error() callbacks to be a .then(). success and error are deprecated in general, and have been removed in the latest version (1.6)

Looks like you just need to append the width unit to the style rule - working version.

Change was from [style.width]="imgWidth" to [style.width]="imgWidth + 'px'"

in the AppComponent.

> A gay dog with an amazing asshole.

Would you be willing to upload a picture of this card as it has two previously unknown parts to it for the gallery and the generator?

Here's some code i put together based on what i think you're trying to do. Feel free to ask if you have any further questions.

http://plnkr.co/edit/V1yrUb4lQUz9wUnhgh5a?p=preview

Basically, yes, you can use an array to store the data for each of the inputs, and then for each of those inputs you can send off an $http request. Each of the http requests results in a promise. If you want to do them both in parallel and wait until they're both complete, see my example which uses $q.all() to combine them. If you want to do them sequentially (say, because the second request requires some data returned by the first), see daveloper80's solution

You've set up your factory so that it creates a brand new ShoppingListService every time it's called. So when controller1 calls

var shoppingList = ShoppingListFactory(initNames, initQty);

It's creating a brand new service with its own item array and bought array. And then when controller2 calls

var boughtItems = ShoppingListFactory();

It's not returning the same ShoppingListService as the first time. Rather it creates a brand new ShoppingListService with its own item array and bought array. Since your two controllers are interacting with seperate sources of data, changes to one do not affect the other.

If you only need one shopping list for the entire page, then i would drop the factory and do it something like this: http://plnkr.co/edit/0XufclNA1dsHfVQObepH?p=preview

Having a quick look - it seems like your ImageUploadComponent is not telling the App component when you change the image object. You need an EventEmitter.

The changes I made were:

adding the imageChange output to the ImageUploadComponent
wiring the imageChange event up in App using two-way binding shorthand: [(image)]=image
calling updateImage in the imageUpload handler of ImageUploadComponent
emitting an imageChange event in the updateImage method of ImageUploadComponent

I think this code would be clearer if didn't have both the image upload directive and the component.

http://plnkr.co/edit/SPvoN5Z1JYL3dObfAoj5?p=preview

http://plnkr.co/edit/THUEnE5KBTmGXprrphoW?p=preview

Basic ui-router example with only one state. You would need to add additional states
Uses components, introduced in 1.5. Stick with these. They make your code more manageble and prepare you for Angular 2.0
"Hello World" is pulled from a web service using $http

I find that using too many named views with absolute addressing can be confusing and overengineered. Often, they can be replaced by simple nested views.

http://plnkr.co/edit/IIfdTlPvLrkphXRfqC73?p=preview

Here you go : http://plnkr.co/edit/c1CO3bcY9sf2NwhOq8FD?p=preview

You'll need to change <key> to your gmap key.

Or you can simply change to use this instead : https://angular-ui.github.io/angular-google-maps/

This is not a dynamic solution for an unlimited number of items, but check out this plunker where I used ng-class to check the $index of the item and apply a different class to the first 5 vs second 5 items in the ng-repeat.

http://plnkr.co/edit/ipCWku8BDJaX1nc8mNys?p=preview

The key bit is here:

ng-class="{'results-1' : ($index / 5) < 1, 'results-2' : ($index / 5) >= 1 && ($index / 5) < 2 }"

I have updated your plunker

I modified the url of your 'requests' state, but you don't have to. You can leave it empty, but you should modify then your 'requests.viewStatus' state to this: '^/ViewStatus' (to avoid the //ViewStatus uri)

I made a modification so that departments_list is expecting an observable as its input, instead of a number. When that observable resolves to a person, the departments_list selects the corresponding item. http://plnkr.co/edit/ybOmyNAM4N5lnJCrsLMj?p=preview

If you'd prefer that department_list not have to know what a person is, you could instead have it accept an observable which resolves to a number rather than a person. Some tweaks would be needed in FormEdit to pass in the right thing.

EDIT: oh, but now the two way binding isn't working, because the binding is on the observable, not on the value that was emited by the observable. So if you then select a different department, it doesn't update the person. Shucks...

The reference to jQuery is not set up, so that's failing. You also need to clean up the js references, you are including angular but not using it.

I cleaned it up a bit, this works: http://plnkr.co/edit/J2ZsN8hg5UhReJ1XU6HY?p=preview

Edit: I just noticed the ng-module. So I would avoid mixing Angular and jQuery like this. Angular has an $http object you can use for ajax request and I'd recommend to stick to that if that's what you want. The reason is that by default bindings don't update when a change happens outside of angular.

Edit#2: Here it is completely using Angular and no jquery http://plnkr.co/edit/kmzmWrYtmqZHgtpWBabP?p=preview

Edit#3: Refactored it to use a factory service instead of doing the ajax call in the controller: http://plnkr.co/edit/25pqW3dlOW4DzL03XKi3?p=preview

RiotJS is a great option...
http://riotjs.com/
Its like react but alot smaller and I found it easier to get into.
One thing about it tho is how you do the tags. In your case it sounds like you wanted something you could just throw in and for that the more html way is great. Heres an example...
http://plnkr.co/edit/ivxfe9?p=preview
...tools dont bitch about the syntax/formatting and you dont need to compile anything as its done in the browser, so no compile chain stuff needed.

I managed to get it working. Hope this link works. (I've never used plunker before)

First off, when you share code via plunker, you have to manually add your dependencies (angular, angular-router, etc) via the plunker interface or else actually include them in your source files. I did that for you. Also, in your index.html when you include things like scripts their locations are all relative. So, on your local machine your angular file might be at 'app/controllers/customersController.js', but then when you included it on plunker it needed to be changed to just 'customersController.js' because it is in the same location as the index.html.

(I'm pointing that out so that if you were to just copy this code back to your original project, it most likely won't work with your folder structure.)

Second, you either didn't include, or simply didn't make the 'appSettings' dependency that you are injecting into your CustomersController. Removing that seemed to fix the problem as it was completely stopping the controller from running.

Third, I renamed your customerFactory to customersFactory as you were switching names throughout. Consistency is key.

If you have any more questions feel free to reply to this.

http://plnkr.co/edit/W06A2LErhGtQbZlYxMOM?p=preview

Here's a plnkr with the changes. I've kept them minimal but if I were developing this I would go with something like Angular or Ember, or even MeteorJS if you want. This would simplify the models so you don't have to do string manipulation on HTML to get subtotals and totals.

Ok so I tried out your suggestions here:

http://plnkr.co/edit/EHTPQCpKDdBR06Np7dhp?p=preview

But the address it's returning is: "1MikesAppGameWinner123456d98"

When I input the address in Blockchain.info it says it's invalid, any suggestions?

Here's how it looks using the colors used in the Sussex study: http://i.imgur.com/r47swio.png

Plunkr: http://plnkr.co/edit/eNPJm6fJULHHFFiHf4vB?p=info

Color table found here: http://www.nature.com/article-assets/npg/srep/2014/141118/srep07089/extref/srep07089-s1.pdf

Could be a bit too much...

I thought about it but I didn't want to host it...

Edit: Actually, I found a way around that. Here you go in javascript, Insult Generator Online

Using Angular with ui-router (angular plugin) you can define witch .html loads at whatever section of your body. You can look an example here : http://plnkr.co/edit/u18KQc?p=preview

It may be overkill for that specific project, but its a widely used framework and it will help you moving forward in your carrier if you start now with a popular tool (you can also see how browser buttons work in this example)

I don't use $scope anymore, it's been somewhat deprecated so I had to try it out in plunkr. It is a string, not an object. All the string methods I've tried work without a problem too.

Don't know what the issue is here exactly and it seems like the other guy won't share more code or info with us.

You can try it out yourself here.

I test async stuff with done in jasmine.

here's one way mock out promises in these situations. IIRC you need to force a $digest for the promise to resolve.

http://plnkr.co/edit/O6xgjNcz3807q0Yur0DZ?p=preview

I don't really test my controllers so I might be wrong.

Correct. Any change to a scope variable triggers a digest cycle. In your case, you have two things triggering the digest cycle: the button and the interpolation.

Generally, don't do function calls within interpolation. It should be a string or a string with a filter.

Also, if (window.localStorage && quote) is never true because quote is empty string, thus falsey.

http://plnkr.co/edit/QUZQfuczEBm1mKWEHQo7?p=info

Had to step out, but here's something quick that should make sense? PM me if you need any more guidance or have any questions.

http://plnkr.co/edit/SA9zPqLgPW9ccthDY1B5?p=preview

Pretty contrived, have a quick look at the script.js basically the "parent" component would fetch the data and then set the result on its state. The "child" component is passed this data as a "prop" and renders accordingly.

In this example, the parent component simulates a fetch of data (takes two seconds and then just returns whatever you entered in the input as the name property on an object), the child renders "No Data"/"Fetching..." or the name. The name property is also tied to the CSS background-color of the child.

Here is a Plunker for the scenario you described in one of your comments. It uses an attribute directive to capture the clicks and a service to exchange the elements.

Other than that you mentioned in the OP that you want to manipulate the element, for that I would also recommend taking a look at the already available directives (ng-class, ng-model, ng-if, ng-show, ...).

Having said that you should avoid some of the event based ng-* directives - https://www.airpair.com/angularjs/tips-n-tricks/speed-up-your-angular-apps-and-rid-sasqwatches.

Make a loading variable in your scope, and set it to true when the $http starts, then when the promise finishes, inside of your callback set that variable to false. You can use ng-hide or ng-if to hide your DOM elements or ng-disabled as well.

Example Plunker

Try this: https://jsfiddle.net/kwzhbbk7/

Your problem is here:

function($scope, tickets){ $scope.tickets = tickets.tickets; // <--- tickets does not have a property/method named tickets, you need to change this to tickets.items }]);

The "tickets" factory you import in your controller is the exact object that you return from your factory. In this case it's your t object. So just like if you tried to call t.tickets up in your factory definition it would cause an error, the same thing is happening when you try to use tickets.tickets in your controller. They are referencing the exact same object.

On a separate note I highly recommend Plunkr over jsfiddle for working with Angular. jsFiddle only offers Angular 1.2, Plunkr offers the latest (1.4).

http://plnkr.co/edit/XxJD0YTbyT6QBFV5lDku

You could do something like this. Use a service to store some variables, so that you can inject that service into the 2nd controller and retrieve the stored variable.

http://plnkr.co/edit/XxJD0YTbyT6QBFV5lDku

You could do something like this. Use a service to store some variables, so that you can inject that service into the 2nd controller and retrieve the stored variable.

If you are willing to learn JavaScript and AngularJS at the same time here is a cookie clicker clone I created using AngularJS and an AngularJS based game engine I've been building.

Using just this example you should be able to add your own "buildings" and achievements right away. If you want to understand more about the engine take a look at the wiki. If you have any questions contact me.

You could catch the links and call preventDefault on the left-clicks of the reddit ones. Here's an example.

I attached the event handler to the body, but you could technically put it anywhere.

Check out the plnkr here: http://plnkr.co/edit/AjsXMGkUBcVVODbpA9jL?p=preview

There were a few things that needed to be fixed to make it work:

You've got 'scattPlot' in your body ng-app attribute, but the angular module is named "nvd3TestApp". These two things need to match in order for angular to load your app. If you get this wrong, you'll get a console error like "Module 'scattPlot' is not available! ..."
Your controller function isn't actually set up as an angular controller. To do that, you just need to add a line like:

app.controller('ExampleCtrl', ExampleCtrl);

That registers ExampleCtrl as the name of a controller that Angular will know about, and so when you use ng-controller="ExampleCtrl" in your HTML file, Angular will know what code to run.

The colorFunction and colorArray should be moved inside the controller function (you'll get a "$scope is undefined" error otherwise)

I think that's pretty much it!

Generally, the first thing I'll do if an app isn't working is look at the browser's console. In Chrome, click on the 3 bars to the right of the address bar > More Tools > Javascript Console. In Firefox, Tools > Web Developer > Web Console.

Once that's up, make sure you're on the Console tab, then refresh the page and look for any errors that pop up and fix those first. If you get NO errors, try putting some "console.log('hello')" calls around your code to see if any of it is even running, or set breakpoints in the Sources (Chrome) or Debugger (Firefox) tab.

Good luck! Let me know if you have any other questions.

That's pretty cool :). I took a slightly different route and just utilised Oscillators with this library: https://github.com/meenie/band.js - You can see an example here: http://plnkr.co/edit/LG20SL?p=preview

http://plnkr.co/edit/Y7alafirmR8IyMZvPKCr?p=preview

Your calculations were wrong for swipe up and swipe down. I fixed you using the wrong axis in swipeUp, and in swipeDown the distance traveled will always be negative on the Y-axis.

I don't have time to make the text for up and down appear, but this fixes your fundamental problems. Also, I would suggest not using time as a factor in the swiping. Some people have disabilities that would make swiping take longer than what you're assigning it.

Some more suggestions. Don't prefix your directives with 'ng', that's a native angular thing and is bad practice. You don't put the logic that modified the DOM inside the directive controller, you usually put that inside the directive's link function.

You're also not using the directive's scope effectively. You can pass the variable for the 'up', 'down', 'left', right' through an attribute to the directive's scope using the '@' symbol. I also noticed you want to execute an action on the directive from an attribute passed to it through the element, you can do this by putting that action in a separate attribute, and then reference that in the directive's scope using the '&' symbol.

I'll work on your directives a bit more at lunch to help you out some more.

This is a good start though. Directives are probably the trickiest aspect of AngularJS to understand, and they took me quite some time to really wrap my mind around them (and I don't know everything yet).

EDIT: I updated the plunkr after working on it for a bit. http://plnkr.co/edit/Y7alafirmR8IyMZvPKCr?p=preview. Still at the same URL. You can still see the history for it to see what I changed on yours before I made mine. Just as a note. I did not apply a lot of best practices to my newest plunkr. I just wanted to get it to work.

Perhaps what you need instead of having empty() inside the callback, is to chain it, like so:

$('#content').empty().fadeOut('slow');

I created a plunk to demonstrate it in action: http://plnkr.co/edit/i4Tet6FvN4WW7OKw17aK?p=preview

It's a bit hard to see where the issue is without seeing the code. If you can throw it up on a plunker you might have more luck with responses here.

There is even an Angular seed you can fork from.

two points... If you mention that your company has made it their solution, probably wouldn't have needed to go back and forth...

If someone wants to use Angular to do all of their web apps....what is the point of pointing out there are ten thousand different ways....I've always hated those responses....short of someone accidentally running something completely malicious unintentionally....let people go down a road they want to go down, especially if it leads to failure. That is easily 99% of learning right there. You are merely pointing them in a direction, no need to rob them of an opportunity to learn why or why not. (Not saying Angular is a bad choice, my company is using it as well and I like it just fine)

Finally with Angular, check out sites like http://plnkr.co/ as well as angulars getting started location... https://docs.angularjs.org/misc/started

If you are past that point already, being more specific with your question would definitely help.

No problem.

function add(a) { var sum = a;

function inner(b) { sum += b; return inner; }

inner.toString = function(){return sum}

return inner;

}

http://plnkr.co/edit/nZic7SEmhn045Nvcjh6F?p=preview here is my plunkr if you want.

Here you go: http://plnkr.co/edit/tblbOoGUdXUPfDROisyP?p=preview

Couple of things to keep in mind:

1) Your events (like 'mouseover') need to be on the appropriate element in the DOM. You had that event bound to the g-element representing the entire chart area which was why the entire thing became half opaque. I moved it to the 'rect' element that represented the bars.

2) You had the right idea with the tooltip as far as needing the data to be passed in. Unfortunately you removed the necessary to determine top medalist per bar, so I added that back in (line 80).

Hope that helps!

The reason is, that the default selectors of angular-material are more specific than yours.

This is the selector angular-material uses

.md-button.md-default-theme:not([disabled]):hover

to overwrite it you need to be more specific or add !important to your rule.

/* mouse over link */ a.md-button.md-primary.md-default-theme:hover { background-color: yellow; }

/* OR */ a.md-button:hover { background-color: yellow !important; }

http://plnkr.co/edit/orxx6K047WJTaaMm45aC?p=preview

http://plnkr.co/edit/8onv0rIpftaBls3YmVrc?p=preview

You're welcome. :)

Change angular.module('achievementsDisplay', []) to angular.module('app', []) to match ng-app="app".

Also, you can't assign alert()'s result to a variable named "alert" because "alert" is already defined as the function alert(). That breaks the code. Don't do this:

var alert = alert("Attention! Success!");

My personal issues:

strictly "id" and "text" properties for the elements, if my current services return different names to this properties, the init of a new input fails.
I think you mentioned, but the lack of support for "input" elements is a huge deal.
When using bootstrap, the search box overflows the actual input element (http://plnkr.co/AaOfgdpX2xgBxSbHLc49). This also happens when I was testing without bootstrap.

Aside of that, looks pretty good. Also, what about validation? Any plan to integrate jquery-validator?

Ok I looked at your code. Two things needed adjusting

in the top of the js file you were not calling printcards you had

printcards;

that should be

printcards();

Also in deal cards you had a return statement at the top of the function, so playerHand and dealerHand don't get set.

Here is the code with the changes and the cards display: http://plnkr.co/edit/wu5NhDeEHQ0hRNXH5Nor?p=preview

Make $scope.c a function.

$scope.c = function() { return Number($scope.a) + Number($scope.b); };

Then in your html, instead of {{c}}, use {{c()}}.

Example

I tracked this down to a change in v1.3.0-rc.2, apparently from this commit where isolate bindings, instead of assigning to a reference on $$isolateBindings on the directive, that object gets reset.

The fix is hacky: http://plnkr.co/edit/CRxhX6?p=preview

HI :) I'm fairly new to Angular as well...here is a bandaid fix.. not ideal but works.. here I moved ng-controller to index.html and just hardcoded the sidebar and leaned on a filter. Directives and scope can get inception-like.

Hope this helps! http://plnkr.co/edit/foxWML?p=preview

What is Reddit's opinion of Plunker?
From 3.5 billion Reddit comments

➔ Plunker website

By popularity on Reddit, this Service is:

100 reviews of this app found across Reddit:

What is Reddit's opinion of Plunker? From 3.5 billion Reddit comments

➔ Plunker website

By popularity on Reddit, this Service is:

100 reviews of this app found across Reddit:

What is Reddit's opinion of Plunker?
From 3.5 billion Reddit comments