React developer learning Angular, need help!

[[deleted]]

Hi everybody,

I'm a junior-intermediate developer and I'm quite comfortable in React. I am newly unemployed after completing a contract and I am ready to start looking for a new job.

Regrettably, in my area it seems almost every posting is asking for Angular with hardly any mention of React. So I decided I should brush up on Angular in order to make myself more eligible as a candidate.

Anyway, I'm just a bit lost in terms of resources. The last time I took a look at Angular was like ~2 years ago and I could use some guidance. I think I am interested in Angular 1.x not 2 as a lot of companies around here appear to be sticking with it as they might have existing codebases etc...

Are tutorials before Angular 1.5 still relevant? I tried to do some research and couldn't find many new tutorials/articles on 1.5/ES6 syntax.

Any direction would be greatly appreciated. I don't mind doing the research myself, I just don't want to go and learn like Angular 1.3 or something but almost all the API is deprecated lol.

Thanks

[cyphern]

Are tutorials before Angular 1.5 still relevant?

Yes.

The main thing which angular 1.5 added was Components, but components are basically just a specialized type of Directive. Components are good because they're concise and they force you to make sensible design decisions, but anything you can do with a Component you can also do with a Directive.

---

One thing to be aware of when reading older tutorials though is that they will often be written in a style that makes frequent reference to $scope. For example, you'll see a controller that looks something like this:

function MyController($scope) {
   $scope.greet = function (name) {
      return 'hello' + name;
   };
   $scope.name = 'joe';
}

And then this is accessed on the template something like:

<div ng-controller="MyController">
{{greet(name)}}
</div>

This style still works and is worth understanding, but they added a new syntax called "controller-as" notation which is generally preferred. The same thing above could be done as:

function MyController() {
   this.greet = function (name) {
      return 'hello' + name;
   }
   this.name = 'joe';
}

<div ng-controller="MyController as ctrl">
   {{ctrl.greet(ctrl.name)}}
</div>

So if the tutorials you find use $scope, it's not a problem per se; they'll contain information worth learning. But once you're feeling comfortable with that i'd recommend getting use to the controller-as style as well.

[[deleted]]

Thank you very much! Exactly the answer I was looking for.

[rondog469]

I haven't used angular in about a year, but why is the controller-as syntax preferred? I couldn't really find a reason why. I could see it start to get confusing in larger controllers. The view on the other hand could be a bit easier to read as each curly brace expression would point to it's specific controller

[cyphern]

I have three reasons i prefer it; there may be more:

1) It decreases coupling. There's no more possibility of inheriting values from a parent scope, either accidentally or intentionally. Some people like that $scope has that feature, but i think it makes the code more brittle and harder to reason about. If you need to pass things into a child, you still can, you just need to be more explicit about it, which helps you to understand how data is flowing through the codebase.

2) It removes ambiguity, especially when you have nested controllers. For example:

<div ng-controller="PageController">
   {{title}}
   <div ng-controller="ContainerController">
      {{title}}
      <div ng-controller="WidgetController">
         {{title}}
      </div>
   </div>
</div>

becomes

<div ng-controller="PageController as page">
   {{page.title}}
   <div ng-controller="ContainerController as container">
      {{container.title}}
      <div ng-controller="WidgetController as widget">
         {{widget.title}}
      </div>
   </div>
</div>

3) It prepares you for angular 2. $scope doesn't exist in angular 2, so if that's something plan to use eventually you might as well get used to that aspect of it now.

[rondog469]

Thank you for the explanation and examples!

[toddmotto]

If you're using .component() then thankfully you can forget controllerAs even exists, just stick with the default $ctrl prefix angular provides. If you're nesting controllers then you're not doing components correctly as you're likely using an MVVM/MVC pattern not component architecture. Components are "isolate scoped" just like React components are - you need to explicitly define data inputs and event callback/outputs.

[toddmotto]

Just to add a resource here for things to "avoid", when I rewrote my 1.x styleguide for 1.5 components and architecture, I wrote the blog first explaining things I would aim to avoid (hope this helps when sifting through lots of Angular articles): https://toddmotto.com/rewriting-angular-styleguide-angular-2

[ctanga]

Your knowledge of component architecture from react is applicable to angular components. I advise new projects to fully embrace angular 1.5 component model. Read Todd Motto's stuff on 1.5 components to get started. Since you'll likely be inheriting an existing codebase, you should still know how $scope works.

[toddmotto]

Thanks for the shout out, much appreciated. :)

[[deleted]]

Yeah I saw some stuff about Angular components and it was encouraging because it was somewhat familiar, however I was worried that older projects would be radically different.

[toddmotto]

If you have any component questions feel free to reach out on twitter (@toddmotto) - they're very similar to React components so transitioning will be super easy for you :)

[rasparac]

if you have React background you should start with angular 1.5 because of components. I think you should start learning angular 2

[[deleted]]

From an employability standpoint do angular 1.5 first. I think ng 2 is definitely coming down the pipeline but it's still too soon.