Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

The Parts and Pieces of an Angular Application

2:43 with Andrew Chalkley and Ken Howard

Angular is one of the most advanced and complex front end frameworks available. In this video we'll look at what makes an Angular application, the dependencies required, and how it all comes together.

Development Tools installation guides
Getting Started with Webpack

  • 0:00

    The angular development experience,

  • 0:02

    is much different than any other front end framework.

  • 0:05

    By taking advantage of modern syntax and Typescript.

  • 0:10

    Angular has a solid platform for you to build your next application.

  • 0:15

    Typescript helps developers avoid mistakes by helping with code completion, and

  • 0:20

    displaying warnings before developers open their application.

  • 0:24

    You'll see Typescript's powerful features throughout this course.

  • 0:27

    But first, let's see how Angular works.

  • 0:31

    Angular applications can be made up of a collection of modules.

  • 0:34

    Each application needs to have at least one Root module.

  • 0:38

    Which is where the application starts.

  • 0:41

    When you define your application, you'll need to decide on the Services,

  • 0:44

    Components and 3rd Party Modules you need to include in your application.

  • 0:49

    Services can be internal or part of 3rd Party Modules.

  • 0:53

    Services are a way to perform actions that occur behind the scenes.

  • 0:57

    Maybe it's a long running calculation,

  • 0:59

    or it's a web request of the data from the server.

  • 1:03

    Components at the heart of your application.

  • 1:05

    These combine templates, styles, and some basic logic.

  • 1:10

    They can be large enough to incorporate the entire user interface, or

  • 1:14

    be as small as a single button.

  • 1:16

    NgModule is like a container for your application.

  • 1:19

    Ng is the name space angular adopted, so developers can easily identify

  • 1:24

    parts of the angular platform, that is your application.

  • 1:28

    If you've already looked at the Angular documentation before beginning this

  • 1:33

    course, you might have noticed a few different options for languages for

  • 1:37

    build in Angular replication.

  • 1:39

    TypeScript, JavaScript and Dart.

  • 1:43

    In this course, we'll focus on TypeScripts the prefered language by the Angular team.

  • 1:49

    Angular depends on Node.js and NPM for module loading and package management.

  • 1:54

    If you aren't familiar with these tools,

  • 1:56

    I've included installation instructions in the teacher's notes.

  • 2:00

    Much of Angular's documentation, including the quickstart,

  • 2:03

    uses system dynamically loaded node packages into the browser.

  • 2:08

    We won't be using system js in this course.

  • 2:11

    Instead, we'll be using webpack.

  • 2:14

    Webpack has become the standard way for packaging Angular applications.

  • 2:19

    And the industry is moving towards adopting it.

  • 2:22

    Angular js can work with either module loader.

  • 2:25

    Webpack is an open source module loader,

  • 2:28

    that has a lot of extensibility through plugins and loaders.

  • 2:31

    I've included material about webpack in the teacher's notes.

  • 2:35

    Now that you know what makes an Angular application, let's take a closer look at

  • 2:39

    Typescripts, and how it will help you be a better developer.

You need to sign up for Treehouse in order to download course files.

Sign up