What are /r/angularjs' favorite Products & Services?

From 3.5 billion Reddit comments

> Typescript

You don't have to use Typescript.

> no recommended project structure

https://angular.io/styleguide

> no default templating language

How about HTML? I would be extremely unhappy if the forced something like Jade on me by default.

Look into the Ionic framework, if you're willing to add another technology to the stack. It provides a bunch of intro / starter projects which generate from the cli.

http://ionicframework.com/

edit: this isn't really answering your question - just pointing out the existence of this library in case it interests you.

You can also get services like this:

var injector = $(document.body).injector(); var someService = injector.get('someService');

I learn that not so long ago on Toptal Post. And I've been doing angular for quite a bit now, so yeah, them tips.

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.

As a mostly self-taught angular dev (I built DuckieTV ) I would say just go with anything. Don't build for recruiters, build for yourself and indeed, solve a real problem.

Any angular code looks mostly the same (properly compartmentalized) into directives, services, filters and providers, so when you do any project at all, people will know that you grasp those concepts and can implement anythingthey throw at you.

Don't underestimate understanding the core development concepts versus core angular concepts. I've got about the same overall development experience and I needed about 4-6 weeks to let the angular concepts really properly sink in (reading, reading, reading, reading, coding, fiddling, breaking stuff, refactoring).

After that, applying those concepts becomes a bit more natural in my personal experience.

I thought this one was pretty good for covering the basics, and it's free:

https://www.codeschool.com/courses/shaping-up-with-angular-js

Egghead.io has a ton of content as well for free (not all of it is free, mind you), but it's not very well-structured, so it can be a little less rewarding. But this small set is pretty coherent:

https://egghead.io/series/angularjs-app-from-scratch-getting-started

I'm going to ignore your self-promotion and assume you're asking a question, then point you to the official docs:

https://angular.io/guide/dependency-injection

Angular is a JavaScript framework for writing single page applications. AngularJS is the original version of the framework. Angular is the new version, which was a complete rewrite of the framework at version 2. They're now up to version 5, but still just call it Angular.

If you're wanting to get into Angular, I'd recommend the newer version. Check out /r/Angular2 or https://angular.io/ for more info.

You're trying to do DOM manipulation in the post-linking function which won't work. By the time the post-link function runs, the DOM has already been constructed by Angular's compile phase. There's nothing wrong with manipulating the DOM in a directive, that's what they're explicitly for, actually. But to do that, you have to use the compile function instead of the link function.

compile: function(tElement, tAttrs){ angular.element(tElement).addClass('class');

return { link: //link code goes here }; };

Compile always returns an object of the link function and you no longer use the separate link function like in your example (Angular will just ignore it). If you need to access scope in the compile function (say to set a dynamic class based on controller data) you can't do that in compile, so instead you have to use a pre-link function in the returned object. Pre-link has access to scope and runs before the linkage phase, so it effectively works like compile.

return { pre-link: function(scope, element, attrs){ //you can manipulate DOM here with scope properties }, post-link: function(scope, element, attrs){ //mostly for attaching event listeners and things like that };

This blog post helped me wrap my head around it. Sorry for the lack of formatting. I'm on my phone.

Edit: I shouldn't say you can't manipulate the DOM in the post-link phase. You can, but it's mostly done on events like click and you have to run $apply to make sure that Angular passes the change out to the DOM.

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

Actually it's just sanity in MVC/multitier software design that goes way beyond Anguler. I understand if these can be a bit lost on new JS developers but for those of us who come from three-tier era with Java (or even Python or PHP) experience this concept of separation of concerns is rather obvious.

Which brings me to my point: learning Angular is a great idea for a front-end developer. But it's designers probably expected an audience with traditional web app background (how else could you justify forcing IoC/dependency injection on JavaScript).

One should really try to dig deeper in these concepts:

• n-tier architecture
• inversion of control
• MVC
• separation of concerns
• design patterns

I wish I could suggest a good book, but most of design/architecture literature out there is full of useless patterns created to go around limitations (and/or batshit insanity) of languages like Java and C#. I guess Head First Design Patterns will at least not bore you to death.

It isn't necessary to build a directive for this. http://jsfiddle.net/pcw73aL2/ - a dummy example that traverses a nested structure recursively with ng-include. You would obviously back it up with some JavaScript instead of the mock data that I put in ng-init.

Yeoman is a great resource to get you setup very quickly. There's so much involved in it though. So I'd recommend also reading up on Grunt, Bower, and NPM if you haven't already.

Jesse Warden has a crash course thats a great place to get started: https://www.youtube.com/watch?v=vkRv0r_tNXY

Otherwise: http://yeoman.io/codelab.html

Best of luck! Your going to hate Angular before you love it.

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.

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

>My company is trying to go mobile

As in mobile app? You'll be setting yourself up for a world of pain custom-coding an Angular hybrid app w/o the help of a UI framework. In Angular land, that's Ionic. They're on 1 now, though word on the street is they'll be one of the earlier adopters of 2; yet they'll still not likely release as such until 2's stable. Nobody (TMK?) has an estimate at present for 2's release. I wouldn't start coding in 2 IMO, stick to 1 for now and Ionic if it's your fancy. They'll have some solid upgrade docs when 2's ready.

Also, consider React Native. It's <1.0, but it's unstable is more stable than Angular2's. There are many production apps already released. IMO React Native & Ionic are the two most hopping in hybrid comparisons today. React Native's big pro is it compiles native UI elements, mitigating the most problematic performance bottleneck on hybrid. It's big con: no Android yet (soon...)

TL;DR check out React Native. If you need Android ASAP, or want to stay Angular use Ionic. Re: 1.x v 2.x, choose 1.x.

I was using browserify with Angular for a while, which is conceptually similar to RequireJS. However, after reading this article: https://medium.com/@dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917

I realized it is completely unnecessary.

Per the article, I removed browserify completely and replaced it with simply concat (in my case gulp-concat). That works faster, more reliably and the code has less "require" boiletplate.

Looks like the online pdf you linked to is someone's bought and perhaps slightly out of date copy.

I recommend buying it from the author's gumroad page. $29 for the mobi, epub, pdf, code and updates.

I prefer physical books too, but in this case I like reading the pdf on my pc. Makes it easier to check out the jsbin examples and other online sources he links to

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.

Angular 1 dev here. We've started the migration path to angular 2. This includes things like incorporating TypeScript into our angular 1 branch, and also started an angular 2 branch from scratch and rewrite some of the base files as angular 2 components while using the upgrade adapter for user controls already written in angular 1.

I've found if very helpful to rewrite some angular 1 services as an angular 2 injectable. Even rewriting some of the smaller directive in angular 2 help point out some of the differences between the two frameworks. The good and the ugly.

If you aren't quite ready to get your feet wet with angular 2, I highly recommend you start using TypeScript ASAP. Here is a great article to get you started that takes advantage of the great features TypeScript in angular 1

https://codepen.io/martinmcwhorter/post/angularjs-1-x-with-typescript-or-es6-best-practices

Some search terms that might help would be "notification count" or "alert count". Here's a visual example

kheup has the right idea. Here's a slight improvement to his fiddle without all the boolean logic and some basic styles added.

https://jsfiddle.net/y2g0Loa0/1/

Step 1: Figure out a small website you can build for fun Step 2: https://spring.io/quickstart Step 3: Build the API Step 4: https://angular.io/start Step 5: Build the website using angular

That should cover it. Remember you’re not trying to be a pro, know just enough to cover the basics.

KISS: keep it simple, stupid

Edit: Being a professional dev requires confidence, who cares if you don’t know it. Learn it! That’s the best part about coding, is learning :)

Here's a good description of one of the techniques I use:

https://egghead.io/lessons/nodejs-creating-demo-apis-with-json-server

It handles HTTP GET, POST, PUT, and DELETE, and also supports CORS. It's a very easy way to get a realistic API up and running quickly.

One easy way to check is to use Pagespeed insights.

They provide a screenshot of their result. https://developers.google.com/speed/pagespeed/insights/

That said, Google is not the only search engine. Others are not nearly as good at indexing JS. So you may want to consider prerender.io if your dynamic content absolutely needs to be indexed by everyone.

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

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.

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.

works fine, if you refer to your variables correctly. you were inconsistent with the underscores in your variable names.

and fyi, the best practice for angular 1.3 (i believe) and up is to avoid using $scope if possible. instead, use the controllerAs syntax, placing any properties you want on the controller's scope on the controller object itself.

Judging from the quickstart systemjs is optional:

> The QuickStart uses SystemJS to load application and library modules. There are alternatives that work just fine including the well-regarded webpack.

RxJS is not optional AFAICT from the sources, at least router and the Http service depend on it.

Hi !! Currently, I'm using oclazyload (https://oclazyload.readme.io) it doesn't need requirejs and is very easy to use. You can lazy load modules and files. Here i've an example to configure dynamically a $ stateProvider with menu options from database ... but i've a bit problem with the service. Check out it.

https://groups.google.com/forum/m/#!msg/angular/mad25yzWLbI/rRFRtYxS9IAJ

I hope you find it useful.

It has to do with the ng-if - here's an updated fiddle, the only change is wrapping everything in an ng-if="true" http://jsfiddle.net/dLcLkycb/2/

https://docs.angularjs.org/api/ng/directive/ngIf ng-if creates its own scope (see second paragraph)

I think you're overthinking this.

Unless you really need the templates to be recompiled with their new bindings, I would recommend just watching for changes on the input model, and assigning the value to the current display.

Example fiddle: http://jsfiddle.net/ntqL1cc2/

A popular rule of thumb in angular is that if you're recompiling directives and templates; there's usually a better way to do it.

Edit: As an alternative (potentially more confusing), as long as the values in question are objects, you can bind them like so: http://jsfiddle.net/o7oezhqo/1/ which feels more like the 'angular' way.

This only works as long as you pass an object to the function, and bind the text in the input box and display boxes to a property of that object.

Which in turn works because javascript will pass a reference to the object, meaning that assigning $scope.input = input results in some strange entanglement. Whenever any properties of $scope.input update, the original object ($scope.vals.one) update too.

This is in contrast to the first example, where $scope.input was being assigned to a string value, and thus was not a reference to anything. (strings don't get passed by reference, but by value, since they are primitives)

You mentioned that you are somewhat new to javascript, so I hope that wasn't too much at once. If it was, feel free to ask for clarification, or just to ignore the bottom half entirely for now ;)

Well first, that's not a valid JSON object. You can't have two properties with the same name (slug). Make it an array of all the slugs for that title:

eg:

> { title: "Dune", terms: { post_tag: { slugs: ["sci-fi", "space"] } }

Second, you just need a nested loop. Loop over the slugs in the object and then inside that loop over the selected filters. If any match, it's shown. If none match, it's hidden.

EDIT: Code in reddit sucks http://jsfiddle.net/rg7z42kw/

http://jsfiddle.net/csafo41x/3/

You can clean up the two-way binding between the controller and the directive by defining the scope and what you want them to be bound to.

also, since you were using element.bind to attach the event - need to use scope.$apply to makle angular aware of the changes and update things.

One way of doing it so you don't need to use scope.$apply

http://jsfiddle.net/csafo41x/5/

Hi welcome

&#x200B;

First there's two "broad" versions of "Angular". AngularJS (v1.x) is about to go end of life by the end of the year and Angular (v2+) that is the actively maintained version. This is the angularjs sub, you want /r/Angular2/

I'm not really sure what's going on in this blog post. He says that the difference between a Factory and a Service is that you use "new Service" in your controller when using a service...yet he doesn't actually do that in his example controller?

Second, and I might be mistaken here, but in all other examples I've seen about the difference between Factories and Services is exactly opposite of what he's describing here. Services are supposed to be Singletons, used to store specific State information, such as a User's logged in info. A Factory is used with the "new Factory" pattern because it's supposed to be an implementation of literally the Factory Pattern.

So you would use Factories as models to represent multiple instances of a specific data type. For instance, a table of Users listed on the screen, where each User has specific methods attached to them.

EDIT: From reading the discussion on HN (https://news.ycombinator.com/item?id=7695672 ) it appears my thoughts are backwards here. And it also appears that Angular used really fucking terrible naming for Factories and Services as they mean the opposite things apparently.

We asked ourselves the same question. And eventually went with an entirely different approach: I mean we go through all this trouble just to have a SPA and reinvent everything which is already existing in the browser: URLs, dynamic asset loading etc etc.

So we basically ditched the SPA idea and and used a backend framework to do the routing where different pages load different parts of the application. Sure it is no longer a SPA, but in return I don't have to worry about routing, history, asset loading etc.

This is by no means the be-all / end-all, it is just a different way of utilizing Angular which is working out great for our use case.

Implementing something like this without some kind of throttle mechanism is pretty dangerous.

It is an extremely common situation where your app encounters an error that will result in it throwing an exception or exceptions frequently. Like every frame or every mouse move event etc.

If an app gets deployed where an error of this nature is prevalent, then you can end up DDoS-ing your webserver from customers spamming exception reports to you 60 times a second.

A truly robust solution should batch exceptions together, perhaps scan for duplicates and use something like http://underscorejs.org/#throttle to make sure that clients won't end up overloading your server incase an unexpected, frequently thrown exception loop occurs.

You could look into using a Yeoman generator. Depending on your experience/exposure to other libraries, the official Yeoman Generator-Angular is a good default to start with. That one in particular helped me better understand working with Grunt and good unit test practices.

Probably more than that. Angular 1.x is production ready, react at 0.14.0 is "stable enough to use in production" but it's not 1.0, and angular 2 is still in beta. Benchmarks show that angular 1.x isn't as far behind react as is hyped: https://auth0.com/blog/2016/01/11/updated-and-improved-more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/ and currently edges out Angular 2 in some areas. Any Angular 1 application that's in production now will likely need to be supported for some time.

I have some decent experience with jquery and other javascript tools, but had no other framework experience on the frontend. For me, a pro subscription to https://egghead.io was perfect. Each video is a bite-sized piece, and there's enough detail to each that I could really get my head around almost all of the big picture in angular.

I will admit that I didn't need a whole year's worth of video viewing, but it was absolutely worth the money. I bought a sub, spent a while watching videos and fiddling with code, and then could go back and refer to stuff a second or third time as I hit the bumps in the angular road. I have since lapsed my pro membership, but it was a great value.

You might achieve what you want by using a factory and injecting that into whatever controller you like. Here's a video explanation: https://egghead.io/lessons/angularjs-sharing-data-between-controllers

Don't really see anything wrong! You have a controller which initializes the scope boolean var to display the popup and define the click event interaction function which toggles it. Both need to be on the scope.

You can simplify this ternary statement:

$scope.displayMenu = $scope.displayMenu === false ? true: false;

to just this:

$scope.displayMenu = !$scope.displayMenu;

You could also write this as a directive.

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.

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

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

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.

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.

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:

<div class="container"> <div class="list-container"> <div class="item" ng-repeat="item in list"> <label><input type="checkbox" ng-model="item.selected"> <a href="" ng-click="item.checked = !item.checked">{{item.name}}</a></label> </div> </div> <div class="list-container"> <div class="item" ng-repeat="item in list | filter:{selected: true}"> {{item.name}} </div> </div> </div>

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.

Yes, they are completely different things.

gulp: a streaming build tool

express: a web application framework

You are likely using gulp to serve static content I assume. So you would instead use express, to serve your static content as well as handle your angular application routes. However, tbh, if you are a 'noob' I would try to get comfortable with the technology first before trying to do html5Mode in angular.

Oh, totally. I was thinking of bits like the headers, buttons, and lists in the Ionic framework.

For the most part, if you know the extent of the content beforehand, what you describe makes more sense than trying to mess around with transcludes.

Hmm..

I'm not sure I understand your question. Javascript performance doesn't really change whether you have 1 user or 10 million.

If your site already handles 10M people, that means the backend can handle it. If you move to angular, it should take some weight off from your backend since the view-logic will be rendered on the client, instead of the server.

If you're talking about javascript performance, it really depends on what you're doing. Angular performance will suffer when you have a shitload of models.

Also, take a look at this: http://ionicframework.com/

No solutions, but some comments.

The design you have is closely coupling your Angular code to view templates the Angular code has no knowledge or visibility over. If the feature you’re developing is just incidental functionality (for example, maybe it’s to create a glossary pop-up of some sort) then you can create any type of JavaScript hack to get that running—even using a timer and quertselectorall after rendering your component.

However, if the html you’re loading is integral to the functionality of your app, I urge you to redesign your architecture so that the templates are defined at the same level as your component so that your developers have complete visibility into the template code and so that the coupling is explicit instead of implicit.

Also, you may want to check out component lifecycle hooks for some guidance on where to wire your hack. https://angular.io/guide/lifecycle-hooks

Are you looking for ngUpgrade?

https://angular.io/guide/upgrade

While possible I do recommend taking a really long, hard look at why you'd still need AngularJS especially if it's a brand new project. If it's an older project with a large existing codebase, then ngUpgrade with an eventual goal of getting everything running on modern Angular would be a good idea.

It's much easier to work when everything is in nicely cleaned up Angular 6. Angular 2 and above really make the old AngularJS feel messy.

Probably the easiest thing to do is start with TypeScript. It will almost certainly integrate nicely into your current infrastructure and will give you a chance to really dig in and start modify code to add types.

Look at Style Guides like Todd Motto's AngularJS Style Guide, and start using Components everywhere instead of Controllers/Directives. You're already changing your code to use TypeScript so it's easier to also change it to Components.

Once you're on Components and TypeScript, get started with a bundler (Webpack) and switch over to that for all your build system work instead of Gulp/Grunt.

Now you're pretty much at the same point as the official documentation on upgrading from AngularJS: https://angular.io/guide/upgrade

Now just stick with the guide, get to a hybrid app, and start your conversion. With things being in Components it's easier to understand a direction to start, either the bottom of your tree or the top.

Eventually, once you're entirely switched over to Angular and you remove the hybrid code, you can switch to an Angular CLI app, and make your life even easier by using their generators and build tools.

I hope that helps!

I didn't work with angular 2, but as I see here https://angular.io/docs/ts/latest/tutorial/toh-pt4.html it has similar approach as in Angular 1.x. Basically data flow in Angular looks like this: BackEnd API < - > Some.service.js < - > Your.component.js

So service is the layer between your components and API. You inject service where you need access to data. It makes your components and controllers clean.

If your need to make some data mutation, you can do it right in service. If you specify your case, I'll try to give the concrete answer.

This article does a pretty good job of explaining.

I was also able to find the docs, and there seem to be tutorials for javascript, typescript, and dart in the angular docs. You need to select the one you want from the dropdown.

You can choose to keep using javascript, but for many of us working on very large projects and comfortable with the typing of backend languages, typescript is really exciting.

This exactly.

In general, I recommend buying books on concepts, and using online resources on tools (and/or languages).

So if I'm learning, say, Rust, I'll look online. But if I'm learning purely-functional programming, I'll buy a book.

The reason for this is that concepts change much more slowly than tools do; yes, procedural programming of the type used in APL or Fortran are uncommon now, but that took decades of change. At their core, books on OOP written in the 90s are still applicable today.

Meanwhile, a book on Spring 1.x is basically useless now, any books on ECMAScript 3 have only historical value, and even C is now a different critter in many ways than it was when Kernighan and Richie wrote The C Programming Language.

A great example of this is Elements of Programming Style; most of the axioms it lays out are still useful ("Write clearly, don't be too clever", "Modularize", "Make it right before making it faster"), but some are almost comical now for their antiquity ("Avoid gotos completely", "Use debugging compilers", "Avoid the Fortran arithmetic IF").

I watched the video after reading his styleguide and I found it very rewarding! His video covers a lot more than the styleguide. I noticed most of the focus was applying Bob Martin's Clean Code principles to an AngularJS framework.

Okay, how about something like this?

.directive("editInPlace", function() { return { restrict: 'A', scope: true, template: [ '<div ng-switch="edit.editing">', '<div ng-switch-when="true">', '<input type="text" ng-model="edit.value" />', '<button ng-click="edit.toggleEdit()">Done</button>', '</div>', '<span ng-switch-default ng-click="edit.toggleEdit()">{{ edit.value }}</span>', '</div>' ].join(""), controller: function($scope, $attrs) { var edit = this; edit.editing = false; edit.value = $scope.$eval($attrs.editInPlace); edit.toggleEdit = function() { edit.editing = !edit.editing; $scope.$eval([$attrs.editInPlace , "=", JSON.stringify(edit.value)].join("")); }; }, controllerAs: "edit" }; });

edit - here it is dropped in to your code example: http://jsfiddle.net/ks5et82p/23/

This is an interesting problem that can easily expose you to a number of different Angular-ism's such as directives, ng-options, and directives. I wrote a Fiddle that demonstrates the behavior I think you want but stopped short of making a directive. I hope this is helpful.

http://jsfiddle.net/jnash21/oqezom4y/

vm stands for view model and it's the convention in the community to deal with this kind of issue.

You would need to add vm. as a prefix for all of your 'scoped' methods and variables.

Here's an example: http://jsfiddle.net/cypppmwm/2/

That's what I thought. I'm a server-side guy, having worked with server-side languages, DNS, hosting, url rewrites, etc. but this is my first foray into Angular and thought it might be some trickery I'm unaware of.

I did what I should've done in the first place, which is to fire-up a vm with apache and no rewriting. I was comforted to discover that, as expected, subdir URIs works when the entry point was '/' but 404'd when going straight to '/about/contact'.

Must be some quirk of PHP's built-in server (of which there are many!)

Edit: From http://php.net/manual/en/features.commandline.webserver.php

> If a URI request does not specify a file, then either index.php or index.html in the given directory are returned. If neither file exists, the lookup for index.php and index.html will be continued in the parent directory and so on until one is found or the document root has been reached.

That's what I get for being a back-end guy :)

In some ways I quite like all the Angular bashing; Angular bashing articles generally leave me with a warm feeling thinking "this guy is a total prat[*], they really have no idea what they are talking about"

But mostly I just find it depressing. Sure, Angular has its strengths and weaknesses; there are problem domains where it is a good fit and where it is a bad fit; the are stunningly clever bits and other bits that seem poorly thought out. Well, guys, welcome to the real world.

The first reply to your 'that a framework so fundamentally and ridiculously flawed .... quote' at https://news.ycombinator.com/item?id=8965935 is typical. "I have yet to see an Angular project that doesn't qualify as tiny". No, matey, that doesn't mean that all Angular projects are tiny; it just means that you've not seen any that aren't, and you are too blind to image that what you see is not the whole world.

[*] Replace with your choice of derogatory term, appropriate to your culture and language :)

It can. The value should be inside an object though because of the way inheritance works in javascript. You can read the property of the parent object, but when you write it, you are creating a new property in the child object. When an object is inherited however, what the child gets is a reference to the object, so the properties of that object will change. That's why your view doesn't update. It's javascript really more than Angular. EDIT: The other commenter is also right - if you make a change inside an event listener, you need to apply the change to let angular know. I don't know why Angular doesn't wrap the "on" method the same way they wrap other things like window and timeout... but atm calling apply is needed.

But why are you using a directive for this anyway? There's no DOM trickery to be done. You press a button and modify the number.

The input with the ng-model is a child of your directive. So the ng-model you have on the div has no effect and you can't require child directives. So you need to put your directive on the input with the ng-model for it to work.

here, an updated fiddle where it works: http://jsfiddle.net/M3sZN/2/

Absolutely. I am basically having the same problem as this guy:

https://groups.google.com/forum/#!msg/angular/lK8M5bFwbkQ/FN1t1SYD3QkJ

My entire application uses non-hashbang (html5/pushstate) urls, so pee.com/poop/toilet instead of pee.com/#!/poop/toilet. I think this means that using <meta name="fragment" content="!"> will have google translate translate this url to: pee.com/poop/toilet?_escaped_fragment= but I'm not 100% sure on that. I have used PhantomJS to generate page snapshots, such that they'll appear at pee.com/snapshots/poop/toilet.html. I have no idea 1) if this will work or 2) this is at all an acceptable way of doing this.

1) Try to temporarily forget all the react paradigms and habits you’ve developed this far. A tall order, I know, and you will undoubtedly come across some similarities as you learn angular, but starting with as much of a mental “blank slate” as possible will help you as you get started.

2) Start with the official tutorial/documentation on the Angular website. It is a great way to get a high-level introduction to how the different parts of the framework fit together. You obviously know JS well, so the hard part for you will be just understanding the ins and outs of the Angular paradigm.

3) Angular 1.x (commonly referred to as “AngularJS”) is fundamentally different than Angular 2+ (just plain “Angular”), so make sure you’re not accidentally reading/watching material for Angular 1.x. That being said, https://angular.io is the correct website for getting started.

I know that’s obviously not everything, but it’s a good starting point. Hope that helps!

You're doing a couple of weird things that make no sense whatsoever.

• your band object has a chaotic data structure. The root level seems to be keys representing a role with a value either of a player or an array of players.
• you are feeding this into the select object but you clearly don't understand how ng-option works. You could change the expression to: "player.firstName + ' ' + player.lastName for (role, player) in band" but that won't work for the array of "guitarists"
• you are assigning the result of the select into band, but this will overwrite the input, which makes no sense at all.

It's not really obvious what you're trying to achieve here.

see: http://jsfiddle.net/rfT7f/31/

sorry about that, I was working and distracted. It looks like orderBy doesn't deal with spaces in names really well.

I also noticed the incoming data cannot be trusted. For example, some beer names have leading/trailing spaces. Also some ABV entries have odd values. Sometimes they are floats, but sometimes they have % at the end. This means they are all going to be treated as strings.

I added the beginning of a function to process the data into a usable format.

https://codepen.io/anon/pen/jaaRZX

This seems to sort name, brewer, style correctly.

Adding cleanup code for ABV is left to the reader.

Use http calls from angular to lambdas (serverless) to do CRUD operations to dynamo dB it would be something like this: https://www.freecodecamp.org/news/building-an-api-with-lambdas-and-api-gateway-part-2-7c674a0eb121/

I work with angular, couch express and node. did some stuffs awhile back with backbone and mongodb. I have a fulltime job but won't mind something on the side. https://www.linkedin.com/profile/view?id=186161582&amp;trk=hp-identity-photo

Ghost is written in some other templating/frontend setup and not Angular. If you're set on Ghost but you want the rest of your site to be in Angular you probably just want to use Ghost just for blogging. I've also written simple blog into my Angular app using Prismic.io to handle the content. There are some nice prismic angularjs modules.

lol It's not. (Vim completion sucks because it blocks). But I think it's safe to say people don't use vim for it's completion support ;)

You can get ala inline completion with YCM, https://github.com/Valloric/YouCompleteMe but I don't use it because IMO it slows down vim too much

I re-did it using a better terminal recording service and with YCM https://asciinema.org/a/18061

ps: I injured my index finger on my right hand which makes my vimming a lot slower.

I use Digital Ocean $5 VPS, with Cloud Flare free tier as the front end. Free SSL and world wide CDN. https://www.cloudflare.com/network-map Here is free $10 Digital Ocean coupon https://www.digitalocean.com/?refcode=706abab5a5b9

You'll find this data type more often referred to as a 'directed graph', so if you substitute this term for 'tree', you'll likely find more matches for the techniques you're looking for.

Angular contains nothing that will directly help you build a visualization of a directed graph. And in fact libraries like d3 are best suited for generating these visualizations. [1]

Angular can help you build the framework around it, for example if you wish to update the data source regularly, or provide the user methods to modify the graph's layout or styles.

There also exists d3 'meta-libraries' that provide easy to use interfaces for basic d3 charts[2]. To integrate a chart like this with Angular, create a directive that uses a data service to pass options and data to a d3 chart.

[1] That's not to say some have tried - here's a tutorial on replacing some d3 charts with angular+svg: http://alexandros.resin.io/angular-d3-svg/

[2] This is a particularly nice one: http://gojs.net/latest/index.html

Use yeoman and it's mean generator.

It's got everything you need, mongodb setup with node and express. Also has authentication built in, supports google's and facebook's oAuth.

It's what I use to quickly get started building Angular apps.

I suggest the tutorial of projects generator Yeoman http://yeoman.io/codelab.html . It can seem out of the topic of your question but Yeoman build for you Grunt routines to run tests with Karma and Jasmine and let you focus on tests itself. (unit test are explained at step 8)

Modules can depend on other modules - use dependency injection the same way you would were it a service. If the project has multiple top-level modules, create a single parent module that depends on all of them, then inject that parent module into your new project.

To get the code in one JS file, just put it in one JS file. Copy and paste, or use some automation tool (concat) if you're going to be updating the old project and want to keep it maintainable

You could look at something like Angular Formly. It'll take care of validation and also much more, if/when you need something more powerful.

There's a free series of Egghead videos on it (email signup or Egghead account required though), and also a good intro article here

Here's a common problem: You have a counter in the nav header. You add an item to a basket, wishlist, etc. When the backend responds with the OK, the counter is increased.

Let's put it clearly: there is no straightforward Angular way to do this. Either you have to watch a property of the service, which breaks the principle of encapsulation fundamental to OO programming (or you could assign the entire service to the controller scope, as the egghead.io guy does, which in my opinion is an abomination); or you have to resort to events, which clutters the code and, as the OP says, is sort of at odds with the digest cycle / Javascript inheritance philosophy of Angular.

You could reach a compromise and create a little "appInfo" value service with information that's going to be shared between controllers, and watch that. In the example above, this value service would only contain the basket counter. This way the main services that hold real logic are still encapsulated, so there is less harm.

Truth is controllers are designed to be nested, not to be independent from one another. OP is right that React does independent controllers better than Angular.

I started with the egghead.io lessons which seem to be the most well-known, its a series of 5 minutes videos, most of them free. Then trying to build something not huge but not trivial either like a pageable grid with a dialog to view row details. Lots of googling around and stackoverflow.com.

Took me maybe a month? For me the key point where really the lessons.

egghead.io has some good, short angularjs tutorials meant for the beginner. It will give you some insight about the way angular works and how you should approach it.

You can also try reading a book or two. O'reily AngularJS would be a good start, I suppose.

AngularJS can be a little hard to get into but once it all clicks it isn't that difficult, and you will find applications much easier to design and write (as opposed to doing it "the old way"). Stick through it man! :)

I've heard good things about ember, but it's probably not a great resume selling point. To learn angular I'd go through the angular intro tutorial, and you'll get a pretty good idea. After that, if you can get through the first 10 of these tutorials, you'll be well on your way.

It depends on what kind of game you are making. If it's really UI heavy and speed isn't a huge concern, Angular could be great. However, if you're making something with more action, animation, etc, I would recommend you check out a proper game framework like Phaser.

This is a snippet that I used to build a datepicker.

$http.get('/views/includes/datepicker.html', { cache: $templateCache }) .success(function (template) { element.after($compile(template)(scope)); });

This assumes that you are attaching an element with HTML because it fetches the template and caches it, then uses $compile to add the template to the directive's scope (the $compile(template) (scope) bit) and inserting the HTML after the directive's element.

However, if the element doesn't necessarily need to be dynamic, you can simply use the compile function of the directive which will make things a bit simpler. This Sitepoint blog post explains how to do this and basically is a great overview of directives in general. Using the compile function is how ng-repeat works.

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)

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

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 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.

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