Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch | Mosh

Programming with Mosh · 1.1M views · 2016 · 54:13

Open on YouTube

Web developmenttutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it when they are following along with the tutorial and hit errors, or when pointing newcomers to a walkthrough of Angular 2 setup, components and dependency injection.

Recommended by 3 people across 3 different months, 2016 to 2017.

What it is

A 54-minute beginner tutorial by Mosh Hamedani that introduces Angular 2 from scratch. It covers what Angular is, app architecture, tooling setup, building a first app with TypeScript, creating components, and dependency injection, with a seed project to follow along.

What people said

Recommends Willem van Gerven · 2016-04 · Stack Overflow · on “Dependency injection: What I am taught and why I don't understand that”

I am currently learning myself Angular 2. I found this video which I found particularly helpful in this: [this video] However, with regards to dependency injection, a topic Mosh starts on 36:40, I do not seem to fully understand his arguments. Namely, he states (at 41:50) that by writing the constructor like this export class CoursesComponent { title = "The title of courses page"; courses; constructor (courseService: CourseService) { this.courses = courseService.getCourses(); } } "we wrote a component that is no longer tightly coupled to the service" (quote). Now I tried to convince myself that it is, but I cannot see how it is. Indeed, we could create a mock service CourseService for other usage

Recommends Peter · 2016-05 · Stack Overflow · on “Why do we have install Node.js for Angular 2.0?”

Because Anglar2 is based on Typescript, Web Components and ES6 which need compilation for performance and broader browser support. Typescript is compiled to ES5 [LINK] JavaScript and the other features require shims for backwards compatibility. Since Typescript is a superset of JavaScript, and it's compiled to JavaScript anyway, you can write your code in plain JavaScript but it's not recommended. For a more detailed explanation check out these videos on YouTube Why Typescript [LINK] Instalation steps [this video]

Recommends Andrei Zhytkevich · 2016-06 · Stack Overflow · on “How to inject a directive or component within an attribute directive?”

This is a misuse of Directive Create a Component instead, so you can use it like <my-component></my-component> Basic example: [LINK] Update: Here is the example @Component({ selector: 'parent-component', template: ` <div> I'm a parent component!!! <child-component></child-component> </div> `, directive: [ChildComponent] }) @Component({ selector: 'child-component', template: ` <div> I'm a child component!!! </div> ` }) The member directive of the annotation Component references ChildComponent , i.e. tells the ParentComponent to use things from ChildComponent . Angular sees selector: 'child-component' in ChildComponent and injects it's template where it sees child-component tags in ParentCompo

Cites Vojtech · 2016-10 · Stack Overflow · on “npm install fails with error”

I'm following this tutorial enter link description here [this video] but I'v got stuck at 12:41. I downloaded seed project following link in the video description and issued somman npm install as administrator on Windows 7. But I'm getting following error: C:\development\angular2\angular2-seed>npm install > angular2-quickstart@1.0.0 postinstall C:\development\angular2\angular2-seed > typings install (I translated following lines to English) typings is not name of an command, executable or batch. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch okidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@ 1.0.14: wan

Cites Ben · 2016-10 · Stack Overflow · on “Angular2 Eclipse can not resolve node module”

I was trying to get a angular2 quick start working in eclipse (not an official one I think, it's from [this video] ). So I used the "AngularJS Eclipse 1.2.0" plugin for eclipse. All is working great after I added to my boot.ts because Angular was throwing several errors that it can not find "promise". The only problem I was not able to solve, is that in my index.html several script tags (e.g. ) are marked red with an error message (e.g. "Undefined JavaScript file ("./node_modules/es6-shim/es6-shim.min.js"))." Someone an idea how I can solve this problem?

Cites Hasan K · 2016-11 · Stack Overflow · on “Angular2 Universal, where and how to learn?”

Even thought there are some [this video] really good video tutorials but I prefer this [LINK] book which is the only complete reference that I found for Angular2 apart from the documentation. Its simple with practical projects and also covers all topics in a systematic and simple manner.

Cites noor · 2016-12 · Stack Overflow · on “No Directive annotation found on CoursesComponent”

I am following this tutorial. [this video] But I keep getting this error: EXCEPTION: No Directive annotation found on CoursesComponent my app.components.ts looks like this import {Component} from 'angular2/core'; import {CoursesComponent} from './courses.component'; @Component({ selector: 'my-app', template: '<h1>Hello Angular 2</h1><courses></courses>', directives: [CoursesComponent] }) export class AppComponent { } my courses.components.ts looks like this import {Component} from 'angular2/core'; @Component({ selector:'courses'//css selector template: '<h2>Courses</h2>' }) export class CoursesComponent{ } my package.json { "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start":

Cites iamj · 2017-02 · Stack Overflow · on “service.js detected as register but didn't execute”

I followed this [this video] link for angular 2.0 tutorial. I successfully displayed the list of courses but when I created the AuthorComponent my app will not run anymore because of the following error: Error: [LINK] detected as register but didn't execute. Error loading [LINK] as "./author.service" from [LINK] at SystemJSLoader.<anonymous> (system.src.js:3261) at SystemJSLoader.<anonymous> (system.src.js:3526) at SystemJSLoader.<anonymous> (system.src.js:3774) at SystemJSLoader.<anonymous> (system.src.js:4121) at SystemJSLoader.instantiate (system.src.js:4357) at system.src.js:333 at Zone.run (angular2-polyfills.js:1243) at zoneBoundFn (angular2-polyfills.js:1220) at lib$es6$promise$$internal$$