extends ../../../ts/_cache/guide/architecture.jade

block includes
  include ../_util-fns
  - var _library_module = 'library'
  - var _at_angular = 'angular2'

:marked
  Angular is a framework to help us build client applications in HTML and
  either JavaScript or a language (like Dart or TypeScript) that compiles to JavaScript.

block angular-parts
  :marked
    Angular for Dart is published as the `angular2` package, which
    (like many other Dart packages) is available via the Pub tool.

block modules-in-dart
  .callout.is-helpful
    header Dart difference: Modules are compilation units or packages
    :marked
      In this guide, the term _module_ refers to a Dart compilation unit, such
      as a library, or a package. (If a Dart file has no `library` or `part`
      directive, then that file itself is a library and thus a compilation
      unit.) For more information about compilation units, see
      the chapter on "Libraries and Scripts" in the
      [Dart Language Specification](https://www.dartlang.org/docs/spec/).

block modules-are-optional
  //- N/A

block export-qualifier
  .callout.is-helpful
    header Dart difference: Public names are exported by default
    :marked
      Contrary to TypeScript, a Dart library always exports all names and
      declarations in its **public** namespace, making explicit `export`
      qualifiers unnecessary.
      
      When we say that a module _exports_ a declaration, we mean that the
      declaration is _public_. For more details about name spaces and export
      statements, see the section on "Exports" in the
      [Dart Language Specification](https://www.dartlang.org/docs/spec/).

block ts-import
  //- N/A

block angular-library-modules
  :marked
    Angular ships as a collection of libraries within the
    [**angular2**](https://pub.dartlang.org/packages/angular2) package.

block angular-imports
  +makeExcerpt('app/app.component.ts', 'import')

block ts-decorator
  :marked
    Annotations often have configuration parameters.
    The `@Component` annotation takes parameters to provide the
    information Angular needs to create and present the component and its view.

    Here are a few of the possible `@Component` parameters:

block dart-bool
  .callout.is-helpful
    header Dart difference: Only true is true
    :marked
      In Dart, **the only value that is true is the boolean value `true`**; all
      other values are false. JavaScript and TypeScript, in contrast, treat values
      such as 1 and most non-null objects as true. For this reason, the JavaScript
      and TypeScript versions of this app can use just `selectedHero` as the value
      of the `*ngIf` expression. The Dart version must use a boolean operator such
      as `!=` instead.