**The goal of this article is to provide you the necessary knowledge to build simple applications with a chaotic code structure that nobody will want to work with. Nope, I'm not drunk.** https://res.cloudinary.com/hpiynhbhq/image/upload/v1513455833/xc7vulgdkon9qgcni06a.png # Wait, what? Well, maybe it wasn't the best description of purposes of this article. Yes, this tutorial won't make you a master of Angular who writes beautiful code and structures project using a wide range of tools, but the goal of this part of the course is to give you just enough knowledge to **start playing with Angular and Firestore** (btw. if you haven't read the [previous part](https://utopian.io/utopian-io/@jakipatryk/community-based-angular-course-from-scratch-setting-up-our-project), I highly recommend doing that). The deeper explanation of the stuff you find here will be covered in next **CBAC** parts (Community-Based Angular Course; why community-based?; again, check the [first part](https://utopian.io/utopian-io/@jakipatryk/community-based-angular-course-from-scratch-setting-up-our-project)). But before we move to our ToDo list app code, we have to take a look at a programming language that we will be using. ## TypeScript ### What is TypeScript? Think of it as more powerful JavaScript that you will be using in Angular. At the end, it compiles to JS, because it is just its **superset**. Why would we even use it? The most important difference is that TypeScript is **strongly typed**, so we can set fixed a type (for example number or string) to a variable or to result of a function. However, this is optional but recommended to do, thought strong typing helps us avoid bugs at the time of writing code. ### What you need to know about TypeScript To be honest - not much. TypeScript is a powerful tool, but in this course we will use only a few its solutions. If you want to learn more - check the references section. So, what exactly do you have to know? - **types** as I mentioned before, we can define variable with fixed type, for example if we want *numberOfTasks* to be number we can define it like that: https://res.cloudinary.com/hpiynhbhq/image/upload/v1513623750/xp3nuaur7kfkk4jmjpts.png - **classes** they are the building blocks of our Angular apps. Classes in TypeScript look simillarly to classes in any other object-oriented programming language, like C#: https://res.cloudinary.com/hpiynhbhq/image/upload/v1513623935/xzvtfielclzhlsrzeq0d.png there are some **tricks** we will use, for example, instead of writing constructor like in the above example, we can simply shorten it and it will work exactly the same, but you won't have to write a body of the constructor and a public property *name* on your own: https://res.cloudinary.com/hpiynhbhq/image/upload/v1514044077/wtfvodua3kpfaeinbs1e.png - **interfaces** strong typing is a powerfull feature, but what if we wanted a variable to accept only a custom types of objects? We can declare an interface of that custom object: https://res.cloudinary.com/hpiynhbhq/image/upload/v1513624103/q1b2moypjgwghm9gch9b.png interfaces are limited compared to classes - they **can't be instantiated**, they **can't implement** any logic. They only define how an object/class has to look like. # Angular fundamentals Let's take a look at the project structure (the code is available on [Github](https://github.com/jakipatryk/angular-todo-list-tutorial/tree/tutorial-part-2)): https://res.cloudinary.com/hpiynhbhq/image/upload/v1513599250/zbbq3qigv3gh1hterdmc.png A lot of stuff, huh? Fortunately, you **don't** have to care about most of them, at least now. The files you have to get to know are in the *src* folder: https://res.cloudinary.com/hpiynhbhq/image/upload/v1513599506/ro8ys5lat1puowmsqnjv.png - what is the first page that is served when someone visits your website? Yes, *index.html*: https://res.cloudinary.com/hpiynhbhq/image/upload/v1513602615/mywgls5jtw0zwmyvwkhw.png however, as Angular CLI users, we can just sit under a palm tree and enjoy writing logic and views for our app - CLI will add all JS and CSS at the time of building our app. Not much to be changed here then. - again, you probably won't be surprised that *styles.scss* is used to define the style of our app. You just have to remember that any styles added there are **global**: https://res.cloudinary.com/hpiynhbhq/image/upload/v1513604447/r2s9sxletywd0abfsyij.png if you don't know the difference between global and local styles, you will understand it later, when I introduce components. - another important file for the CLI and useless for a novice is *main.ts*: https://res.cloudinary.com/hpiynhbhq/image/upload/v1513605201/tz3zk0enxcwvhtqcspek.png this is the entry point for every Angular-based app. It **bootstraps the root module** (AppModule). Again, at the moment you don't have to change anything there. - *assets* is a folder where you should store images etc. - *environments* is a folder that stores files with configuration variables like *firebaseConfig* that we have added in the previous part of the course - ***app*** is a folder we will be working on. It contains all **modules**, **components**, **services**, **directives**, **pipes**, etc. There's where we will have a lot of fun. ## Components https://res.cloudinary.com/hpiynhbhq/image/upload/v1513613845/yvkmrg8igaibcrrhz6rv.png A component is an Angular element that you will be probably using the most frequently. It controls a **view**, so basicly the part of an app responsible for **interaction** with the user. Each component consists of a few elements: - **@Component()** decorator - you use it to tell Angular that class defined after that is a component. In addition, this decorator as an argument takes some configuration options: - selector - this option tells Angular when to insert our component. Our AppComponent selector is *app-root* , so whenever Angular finds in the parent HTML, it inserts AppComponent there. Btw. we have already seen this selector in *index.html*. Indeed, AppComponent is the **root component** and later in this course we will add other components to it. - templateUrl - path to component's HTML template. - styleUrls - an array of paths to comopnent's *.scss* styles (**local** styles) - **export class ComponentNameComponent {}** - here you put component's logic. You can define properties and methods that can be used, for example, by template. However, using component without a template doesn't make much sense - we are building a view. And that's where magic happens: https://res.cloudinary.com/hpiynhbhq/image/upload/v1513619234/zzly6eyqpmsn7cqr2exo.png ### Data flow User-application interaction is the fundamental aspect of any modern web app. How do we achieve this in Angular? There are a plenty of methods: - **displaying data (from class to template):** let's say we have a property name in component class. To display its value via template, you simply have to type {{ name }} (this is called **string interpolation**) and Angular will find the property name and fill the space in template where you typed this with its value. - **property binding (from class to template):** what if we wanted to, for example, display an HTML element only if variable display in our class has a value *true*? Property *hidden* seems to be the right choice, but how do we bind a value from a variable to HTML property? Angular makes it simple, all you have to do is in your template add the following element: If display value is equail false, I'm hidden! We can bind not only to native HTML properties, but also to, for example, **directives**. - **event binding (from template to class):** both above methods were used to one-way data flow, from TypeScript class to HTML template. To pass data in the opposite direction, we can use event binding: