Kingsley Bawuah
Mind Map by , created 9 months ago

Project Structure and some good general information.

Eye 187
Pin 0
Balloon left 0
Kingsley Bawuah
Created by Kingsley Bawuah 9 months ago
Magento 2 Front-end Developer Certification Practice Exam
Érika Giroux
front end developer test
joni jiniani
What is Python?
Daniel Ingram
Geography Restless Earth
sophieelizabeth
Italian: Basics
Selam H
Python Quiz
karljmurphy
computer systems and programming quiz
Molly Batch
Think Python
tsilvo2001
C Programming
Miki Rana
Generations of Programming Languages
Balikkoftesi
Angular
1 System.config.js

Annotations:

  • Configuration for systemJS which handles module loading and compilation of TypeScript into JavaScript.
1.1 TypeScript

Annotations:

  • Files end in .ts Basically a ES6 version of JavaScript plus a few other TypeScript only features needed for angular. Angular is written in TypeScript
1.1.1 Transpilation

Annotations:

  • Browsers do not support TS so this is needed.
1.1.2 ES6
1.1.2.1 Classes
1.1.2.2 Template Strings

Annotations:

  • Multi-line strings that use back ticks (`....`)
1.1.3 @Annotations

Annotations:

  • Links classes to HTML tags. Useful b/c it creates boilerplate for the class automatically. Can be configured by passing an object with various parameters. Components are imported from @Angular/core
2 tsconfig.json

Annotations:

  • Config for TypeScript transpiler. Target : Version of JS we want.
3 Components

Annotations:

  • Building blocks of Angular Applications "Angular apps are architected as a tree of Components stemming from one root Component.   An angular application is a set of custom-made tags that interact with each other.---> These tags are referred to as components.A feature of Angular that allows us to create a new HTML language.      
3.1 app.component/root
4 Modules or NgModules

Annotations:

  • The code is structured in Angular into packages  Every app requires at least one root module. referred to as AppModule. To define an AngularModule we first create a class then annotate it with a decorator called @NgModule. Params:  imports - the other modules that export material we need in this Angular Module. Almost every apps root should import [Browser Module] Declarations - list of components and declarations belonging to this module. bootstrap - identifies the root component angular should bootstrap when it starts the application.
4.1 Boostrapping

Annotations:

  • loads all the code from a module, was done automatically in AngularJS.
4.1.1 Platform

Annotations:

  • Angular does not bootstrap automatically like it did in the first version due to the fact that it is Platform-specific in angular. Angular1 assumed that it would only ever be run in a browser, which is not true.  We must declare how we want to bootstrap, this way uses the browser. ----->platformBrowserDynamic
4.1.2 BootStrapping a component declares it as the root component.
4.2 Import in Angular Vs Default JS module

Annotations:

  • JS modules refer to code which exists in a single file. NgModules combine code from different files together into a single file.
5 Routing
6 Angular CLI
7 CSS
8 enviorments/*

Annotations:

  • contains files for each destination enviorment, each export simple config variables to use in application. 
9 karma

Annotations:

  • Karma test running library.
10 main.ts

Annotations:

  • Main entry point for app.  compiles app with JIT compiler and bootstaps apps root module. to run in browser. AOT compiler is also avalaible 

Media attachments