Applet Orchard

Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch

Want to learn Angular 2 from scratch in a fun, step-by-step and pragmatic way? Watch this tutorial and get started.
*** CHECK OUT MY NEW ANGULAR 4 COURSE

I’m excited to let you know that I just published a brand new Angular course. This is the most comprehensive course on Angular in the market, where you’ll learn everything about Angular from the basic to the advanced topics and finally, you’ll build and deploy a real e-commerce application with Angular 4, Firebase 4 and Bootstrap 4.

For a LIMITED TIME, you can get the FULL course with a BIG DISCOUNT here:

Table of content:

00:00 What is Angular and what you can do with it
03:31 Architecture of Angular 2 apps
08:23 Getting the tools
09:40 Your first Angular 2 app
18:54 Angular 2.0 with TypeScript for Beginners (Udemy course)
19:50 Creating components
36:39 Dependency injection
42:25 Exercise
53:46 Discount coupon to get Angular 2 course on Udemy

Seed project:

Stay in touch:

Posted

in

by

appletorchard

Tags:

Comments

46 responses to “Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch”

  1. Prem Ranjan Avatar
    Prem Ranjan

    got the subscription for INR 450

    Reply
  2. An Enemy Avatar
    An Enemy

    next episode: learn how to be a faggot like mosh

    Reply
  3. Gayatri Bisht Avatar
    Gayatri Bisht

    Awesome explanation.. Thanks Mosh

    Reply
  4. Amar Shivers Avatar
    Amar Shivers

    if any chance can we download or clone the code?

    Reply
  5. Nir Zion Pengas Avatar
    Nir Zion Pengas

    Great video Mosh I am going to complete the entire course at udemy so happy I found it! I wanted to ask you if you have a course that deals with building mobile apps with Angular2 as well or otherwise point me in the right direction?

    Reply
  6. Piyush Jain Avatar
    Piyush Jain

    Hey Moash, Amazing Video, Loved it .

    Where I can see tutorial for complete application mention in this video. ?

    Reply
  7. Mika Kaakinen Avatar
    Mika Kaakinen

    Awesome stuff. Clear explanations.

    Reply
  8. Ross Olson Avatar
    Ross Olson

    VIEWERS: To complete this tutorial as of August 2017, you will need to make the following changes to your code:

    1) Before the npm install command at 00:12:00, add the following line to package.json:

    "typings": "^0.8.1"

    It will go on line 26 (the bottom of the devDependencies section), and remember to put the trailing comma at the end of line 25. (This is noted as an on-screen annotation in the video.)

    2) At 00:51:38, line 16 of auto-grow.directive.ts should be:

    this.renderer.setElementStyle(this.el.nativeElement, 'width', '200');

    Thank you to everyone who made comments on this video. This comment is just a compilation of the smart people below.

    Reply
  9. Hugo Hu-man Avatar
    Hugo Hu-man

    this.renderer.setElementStyle(this.el.nativeElement, 'width', '200');

    Reply
  10. Rudra Pratap Singh Avatar
    Rudra Pratap Singh

    Awesom Mosh

    Reply
  11. Goran Ilic Avatar
    Goran Ilic

    big failure of this tutorijal "ypu dont give us adress of seed u used here

    Reply
  12. abdul mobeen Avatar
    abdul mobeen

    is there a quick way to include node_modules folder from already created Angular projects
    which reside in same folder in which I am creating new project. e.g

    app1/
    /node_modules
    /src
    .
    .

    app2/
    /can i include node_modules dir for this project
    /src
    .
    .
    because it takes much time each time I create a new project.

    thanks in advance.

    Reply
  13. Michal R Avatar
    Michal R

    Is the Angular cli mature now? (9:53)

    Reply
  14. Jake K. Avatar
    Jake K.

    Btw many THANKS to Mosh for uploading this 😀

    Reply
  15. Jake K. Avatar
    Jake K.

    also, use let (ngFor="let course of courses") instead of the # (the # is for older versions)

    Reply
  16. विवेक मेका Avatar
    विवेक मेका

    Finally stumbled on the best online tutor ever. Mosh, you are awesome. Keep uploading. Cheers ☺

    Reply
  17. विवेक मेका Avatar
    विवेक मेका

    Finally stumbled on the best tutor. Mosh you are awesome. Keep uploading. Cheers !!

    Reply
  18. Jake K. Avatar
    Jake K.

    directives from @Component got deprecated :/

    Reply
  19. AKSHAY DHANUKA Avatar
    AKSHAY DHANUKA

    Not able to download the angular seed project from the link

    Reply
  20. Albert van der Merwe Avatar
    Albert van der Merwe

    You're awesome. Thanks for the great tutorial.

    Reply
  21. Aruna Warnasooriya Avatar
    Aruna Warnasooriya

    You are a genius..!! Thank you..!

    Reply
  22. Balu Ganesh Avatar
    Balu Ganesh

    You just cleared my doubts in minutes. Awesome!.. Just subscribed your channel. Thanks a lot (Y)

    Reply
  23. Watson Anikwai Avatar
    Watson Anikwai

    Love your tutorials Mosh.

    Reply
  24. Mohammad Manzoor Avatar
    Mohammad Manzoor

    Thanks mosh for wonderful course design, You way of explanation is superb 🙂

    Reply
  25. Priyanka Garg Avatar
    Priyanka Garg

    Hi,

    I am getting below error while doing npm install command.
    Please help how to solve below error

    angular2-quickstart@1.0.0 postinstall C:UsersAkhilDesktopangular2-seedang
    ular2-seed
    > typings install

    'typings' is not recognized as an internal or external command,
    operable program or batch file.
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! angular2-quickstart@1.0.0 postinstall: `typings install`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the angular2-quickstart@1.0.0 postinstall script.
    npm ERR! This is probably not a problem with npm. There is likely additional log
    ging output above.

    Reply
  26. Charisma Nguyen Avatar
    Charisma Nguyen

    Where can I find the tutorial for the final project shown at 2:34?

    Reply
  27. anthony israel Avatar
    anthony israel

    Thanks for the video, but I have a problem when execute this command npm install in folder project.

    This is the log in cmd:

    npm WARN deprecated es6-module-loader@0.17.11: This project has been deprecated for "npm install es-module-loader" based on the newer loader spec.
    npm WARN deprecated node-uuid@1.4.8: Use uuid module instead

    > angular2-quickstart@1.0.0 postinstall C:Usersisrraangular2-seed
    > typings install

    "typings" no se reconoce como un comando interno o externo,
    programa o archivo por lotes ejecutable.

    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_moduleschokidarnode_modulesfsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
    npm WARN angular2-quickstart@1.0.0 No description
    npm WARN angular2-quickstart@1.0.0 No repository field.
    npm ERR! Windows_NT 10.0.15063
    npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install"
    npm ERR! node v6.11.0
    npm ERR! npm v3.10.10
    npm ERR! code ELIFECYCLE
    npm ERR! angular2-quickstart@1.0.0 postinstall: `typings install`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the angular2-quickstart@1.0.0 postinstall script 'typings install'.
    npm ERR! Make sure you have the latest version of node.js and npm installed.
    npm ERR! If you do, this is most likely a problem with the angular2-quickstart package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR! typings install
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR! npm bugs angular2-quickstart
    npm ERR! Or if that isn't available, you can get their info via:
    npm ERR! npm owner ls angular2-quickstart
    npm ERR! There is likely additional logging output above.

    Reply
  28. anil kolliboina Avatar
    anil kolliboina

    sorry, I Solved that problems…

    Reply
  29. anil kolliboina Avatar
    anil kolliboina

    Nice couse, i got some errors at the same time i solve that problems. Thank u sir, nice class…

    Reply
  30. Hosein norouzi Avatar
    Hosein norouzi

    آقا مشفق دمت گرم رو سفیدمون کردی. Thanks man! you are the best

    Reply
  31. vijay thorat Avatar
    vijay thorat

    Getting below error Please help me to resolve it
    sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA= integrity checksum failed when using sha1: wanted sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA= but got sha1-5VkFvOfqDCDp4uLnH3xgG2nA0VA=. (10512 bytes)

    Reply
  32. Batnini Abdelwehed Avatar
    Batnini Abdelwehed

    Great ! The best angular 2 tutorial. Thank you very much.

    Reply
  33. conrad pinnow Avatar
    conrad pinnow

    just a heads up, angular-cli will be depreciated soon, use @angular/cli instead

    Reply
  34. Manasa Chintalapati Avatar
    Manasa Chintalapati

    when I'm trying to do "npm install" I'm getting warnings like no files or directories and no descriptions

    Reply
  35. Ishwar Deoolkar Avatar
    Ishwar Deoolkar

    jquery is not working in angular2

    Reply
  36. Ishwar Deoolkar Avatar
    Ishwar Deoolkar

    i have one question regarding angular2 and jquery

    Reply
  37. Ali Rahimy Avatar
    Ali Rahimy

    Thanks Mosh. Just a kind reminder to people watching this video: After you installed node you should install the following as well:

    npm install -g lite
    npm install -g lite-server
    npm install -g concurrently –save
    npm install -g es6-shim@^0.35.0
    npm install -g reflect-metadata@0.1.2
    npm install -g rxjs@5.0.0-beta.6
    npm install -g zone.js@^0.6.12
    npm install -g angular2

    If you are using Linux, please do not forget sudo the commands above eg:
    sudo npm install -g lite

    You might also need to replace "concurrent" with "concurrently" in" your package.json file prior to running npm start command
    In the meantime please don't forget to decrypt the content of seed folder before doing all of the above

    Reply
  38. Cristian Baciu Avatar
    Cristian Baciu

    Wow, this does not work at all for the current version of angular. I hope that in the future they will settle for a standard and stop changing things from one day to another, because if they remain on the same path, why even do tutorials on angular anymore if everything is going to change all the time?

    Reply
  39. alfredoalfa Avatar
    alfredoalfa

    hi, i'm interesting in to buy the full course but first i wanna know if the videos have subtitles in english

    Reply
  40. Pritichhanda Pattanayak Avatar
    Pritichhanda Pattanayak

    how to apply custom theme to web app by using angular 2 and typescript…..plz share ur idea….its really very important to me now……

    Reply
  41. Ashu Tomar Avatar
    Ashu Tomar

    Hi Mosh,
    This video is very nice and helpful for beginners like me , there is a question If am returning array of object instead of array from CourseService or AuthorService its giving compilation error "data is not assignable to type 'string'". Please tell me How could I return array of objects from service and get its value to my view.

    Reply
  42. satishakumar awati Avatar
    satishakumar awati

    Best video on angular 2 for beginners who want understand architecture how stuff works and how to get started.

    Reply
  43. Naryck Avatar
    Naryck

    can't download seed file 🙁

    Reply
  44. Naveen Tiwari Avatar
    Naveen Tiwari

    From where I can get the required setup file (.zip) or startup code to setup.

    Reply
  45. Sonal Jathan Avatar
    Sonal Jathan

    import {Component} from '@angular/core';
    import {CoursesComponent} from './courses.component'

    @Component({
    selector: 'app',
    template:'<h1>Angular 2 Project</h1><courses></courses>',
    directives: [CoursesComponent]
    })
    export class AppComponent {
    }

    Note: in directive line it is showing me
    Argument of type '{ selector: string; template: string; directives: typeof CoursesComponent[]; }' is not assignable to parameter of type 'Component'.
    Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.
    Can u Help

    Reply
  46. Hemant Randive Avatar
    Hemant Randive

    whats the angula2-seed folder and what's the use of it- Am a very new to angular 2

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *