In this blog post you’ll learn about core concepts you need to know to be an Angular Developer.

Official Angular Resources

Why you should learn Angular?

  • It’s modular – your in control of every piece of code you include in your application
  • It’s built on a static language, Typescript. Typescript is a type super set of JavaScript that lets developers move quickly by keeping them in their Editor and focused on their code. With static typing, you spend less time reading documentation and more time building your application.
  • It’s backed by Google and has a large community of developers. Angular is an open source project with many contributors outside of Google. It is a platform built by and for the community.

How Angular Works

The parts and pieces of an Angular Application.

The angular development experience is much different that any other front-end framework. By taking advantage of modern ECMA Script syntax and Typescript. Typescript helps developers avoid mistakes by helping with code completion, and displaying warnings before developers open their applications.

Angular applications can be made up of a collection of modules. Each application needs to have at least one Root module. Which is where the application starts. When you define your application, you’ll need to decide on the Services, Components and 3rd party modules you’ll need to include in your applications.

Services can be internal or part of 3rd party modules. Services are a way to perform actions that occur behind the scenes.

Components are the heart of your application. These combine templates, styles and some basic logic. NgModule is like a container for your application. Ng is the name space angular adopted, so developers can easily identify parts of the angular platform, versus your application.

Angular have three different options for building applications; Typescript, Javascript and Dart. Typescript is the preferred language by the Angular team. Angular depends on Node.js and NPM for module loading and package management.

A great module loader that works with Angular is Webpack. Webpack has a lot of extensibility through plugins and loaders.

Get started learning about WebPack on Team Treehouse.

Learn Webpack

The Importance of Static Typing in Angular

You can write an Angular application in either JavaScript or TypeScript. TypeScript provides a lot of extra features not found in JavaScript.

You can see a live demonstration of the differences between JavaScript and TypeScript here:

http://www.typescriptlang.org/play/index.html

In this blog post you’ll learn about core concepts you need to know to be an Angular Developer.

The Anatomy of a Component

Components are the backbone of building an angular application. A component is comprised of three things, a template, a class and a decorator. The template is the view or user interface for a component. The class is the code that brings your template to life. The decorator contains metadata that wires up the class to the template, completing the component.

Component = Template + Class + Decorator

Data-binding

Data-binding establishes connection between application UI and code. Ability to pass data between the component class and the template.

Three types of Data Binding in Angular

  1. One-Way – Class to Template
  2. One-Way – Template to Class
  3. Two-Way – Between Class and Template

One-Way Data-Binding examples:  String Interperlation: <h1>{{expression}}</h1>, Attribute Binding:

<input [target]="expression"/>
<button (event)="expression"></button>

Two-Way Data-Binding examples:

<input [(target)]="expression"/>

Nesting Components

A barrel is a single file that re-exports all components and services for a feature, it doesn’t serve any other purpose than that.

Using component styles

For every Angular component you write, you may define not only an HTML template, but also the CSS styles that go with that template, specifying any selectors, rules, and media queries that you need.

One way to do this is to set the styles property in the component metadata. The styles property takes an array of strings that contain CSS code. Usually you give it one string, as in the following example:

https://angular.io/guide/component-styles#!#sts=:host

@Component ({
  selector: 'hero-app',
  template: `<h1>Tour of Heroes</h1>`,
  styles: ['h1 { font-weight: normal; }']
});
export class HeroAppComponent {
     /* . . . */
}

Special selectors

Component styles have a few special selectors from the world of shadow DOM style scoping (described in the CSS Scoping Module Level 1 page on the W3C site). The following sections describe these selectors.

:host

Use the :host pseudo-class selector to target styles in the element that hosts the component (as opposed to targeting elements inside the component’s template).

:host {
  display: block;
  border: 1px solid black;
}

Directives

In this part of the blog post we’ll learn about and use the NgIf and NgFor directives.

Directives let you:

  • Control Visibility
  • Apply Styling
  • Loop Over Items
  • Extend Application with Custom Scripts

There are three kinds of directives in Angular:

  1. Components—directives with a template.
  2. Structural directives—change the DOM layout by adding and removing DOM elements.
  3. Attribute directives—change the appearance or behavior of an element, component, or another directive.

Structural Directives

ngIf and ngFor are examples of Structural Directives. There are two approaches to writing an ngFor loop. When you prefix the ngFor directive with an asterisk you are declaring the current element as the base for the loop’s template.

<ul *ngFor="let comment of comments">
   <li>{{ comment.name }}</li>
</ul>

View Part Two here.