What is Angular?
Angular is a development framework and environment used to create single-page web applications. I will write a small introduction to this technology.
The Angular environment can be installed using the Angular CLI tool. This is a simple command line application that helps you set-up and create projects.
How to install Angular
There is one prerequisite to installing angular. You will need to install Node.js on your system.
To install the Angular CLI, you can use the node package manager on your console.
npm install @angular/cli
Afterwards you can create a new project with a simple command:
ng new <app_name>
This command will ask you to then choose some settings for your project. These relate to other technologies you may be using, such as:
- Routing options – for your URLs
- Stylesheet scheme – Either simple CSS or more advanced SCSS, SASS, LESS or Stylus
Afterwards, the Angular CLI will create a folder and file structure for your project, this should look like this:
Inside the “src” folder is your application’s code.
The Angular CLI includes a server to test your application during development and you can start it inside your application’s folder (see picture above) with the command:
ng serve –open This will open your default browser on to the URL localhost:4200
How does Angular work? – Components
The main building block for Angular applications is something called a component. A component consists of:
- An HTML file/template that describes what is rendered on the webpage
- A Typescript class that describes the logic of the component
- A CSS selector that defines how the component is used in a template
In order to create a new component for your project, you should open a command prompt and navigate to the folder your project is in. Then Angular CLI provides a straightforward command:
ng generate component <component_name>
The command will then create a folder with the component’s name and inside it, a component file with the ending “.component.ts”, a template file “.component.html”, a CSS file “.component.css” and a testing file “.component.spec.ts”.
An Angular application always has a main component called “app”. This component is inside a folder in your project directory with the same name and possesses the basic files of a component, and in addition, an “app.modules.ts” file. These file describes all components that are used in your application, so each time you generate a new component, a reference to this component will be added onto the “.modules” file.
As you can see, there is a reference in the “declarations” property inside the “@NgModule()”. In my case I named my component “my-component” and the reference is “MyComponentComponent”. On the imports of the file, you can see from which file the reference is being taken from. “./my-component/my-component.component”.
Anatomy of a component
Let us look at a generated component. It consists of a minimum of 4 files, a CSS file, an HTML file, a Typescript file, and a testing file “.spec.ts” (written in Typescript).
We will start with the Typescript file “my-component.component.ts”. You can call this the core of the component.
The logic of the component is defined in here. I will break down what we are seeing here:
@Component({…}): The properties of the component are defined here, they are:
- selector: the name of the CSS tag you can use to call this component in HTML.
- templateUrl: the file with the HTML code that is rendered.
- styleUrls: the CSS file that defines the styles used for this component.
Afterwards comes the definition of the component itself (in Typescript).
export: This means that we are allowing access from other sources to this component.
class <ComponentName>: Defines the name of the component
implements OnInit: Defines that this class implements the OnInit interface. Used to define logic on initialization. Inside our component class, we can define variables and methods. The constructor can be used to initialize values in our class. The implemented method ngOnInit() is used to perform further initialization logic, whence the component is being initialized. The constructor acts for the initialization of the class and the ngOnInt() acts for the component initialization. You can read more about this in the Angular API reference: https://angular.io/api/core/OnInit
Duarte Ramos 