Angular for Beginners I

Caution: knowledge of HTML, CSS and JavaScript are required.

Then AngularJS Now Angular It all started with AngularJS 1.x and then AngularJS 2, and now it's finally Angular, with the latest updates and bug fixes being worked on by the Angular team. Angular is a framework for building client applications in HTML, CSS, and either JavaScript or a language like TypeScript that can be transpiled to JavaScript. This post is all about Angular (Not AngularJS).

TypeScript is a superset of JavaScript. That means any valid JavaScript code is valid TypeScript code. But many prefer TypeScript because it has additional features that we don’t have in the current version of JavaScript that most browsers understand. So, when building Angular applications, we need to have our TypeScript code converted into JavaScript code that browsers can understand. This process is called transpilation which is the combination of translate and compile. And that’s the job of the TypeScript compiler.

Let's get our hands dirty!

Make sure you have latest stable node version installed. Go to you terminal and install Angular CLI using the node package manager (npm).

// -g flag stands for global
// Without -g, Angular CLI will be installed only in the current folder
// and it’s not going to be accessible anywhere else.
 
npm install -g @angular/cli

Install typescript as the new app you are going to create via CLI will have typescript code out of the box.

npm install -g typescript

Create a new Angular app using the CLI.

ng new my-app

Start the application.  

cd my-app
ng serve

Open http://localhost:4200/ in your browser and you should have the default app running.

Note: For permission errors, user sudo.

Structure of Angular Application

1. e2e: includes end-to-end tests.
2. node_modules: all the third-party libraries that our project is dependent upon.
3. src: the actual source code of our Angular application.
4. package.json: It has project meta data and dependencies information.

Apart from these, there are few other files including test runners and configeration files.

Architecture of Angular Apps

Now that we have generate and serve a new Angular project let’s look at the architecture of Angular applications.

Component

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Components are defined using the @component decorator. Unlike directives, components always have a template and only one component can be instantiated per an element in a template. A component has a selector, template, style and other properties, using which it specifies the metadata required to process the component.

The most fundamental building block in an Angular application is a component. A component consists of three pieces:

HTML markup: to render that view
State: the data to display on the view
Behavior: the logic behind that view. For example, what should happen when the user clicks a button.

WE WILL DISCUSS MORE ON THIS IN THE NEXT POST.

Now, at the root of the application, we have a component called AppComponent. This is the root of every Angular application.

In src/app folder you will see following files:

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

These files represent AppComponent, which is the root component for our application. In this particular case, all these files are inside the app folder.

Lets go edit some of these files and see what's happening ;)

Every Angular app has a root module where you define the main component to load. In the default Angular app, the root module is defined inside the app.module.ts. When the AppModule loads, it checks which component is bootstrapped and loads that module. As seen in the app.module.ts, the module which is bootstrapped is AppComponent. The AppComponent component is defined in the file app.component.ts.

A component is defined using the @Component decorator. Inside the @Component decorator, you can define the component selector, the component template, and the related style.

So, in terms of the implementation, each component in an Angular project is physically implemented using four files:

    A CSS file: where we define all the styles for that component. These styles will only be scoped to this component and will not leak to the outside. This is what Shadow DOM does. But not all browsers today support Shadow DOM. So, Angular uses a technique to emulate the Shadow DOM.
    An HTML file: contains the markup to render in the DOM.
    A spec file: includes the unit tests.
    A TypeScript file: where we define the state (the data to display) and behavior (logic) of our component.

You will also see an app.module.ts file.  This file defines the root module of our application and tells angular how to assemble the app.

We will meet in our next POST :)
bye bye