image block
429 Views 0 Comments
Hi guys! I missed you!
We had a little pause, but later I promise to explain why was that. And today we are going to start one new chapter, which has a difference from previous ones. Today's theme is Angular.
Angular - its application platform for the creation of front-end web applications. In this post, we will review Angular 2 (or to be clear Angular 5), and I guess you got a reasonable question, why exactly Angular 2? The main point, that on nowadays "Angular 2" is most modern open-source front-end web application platform, which developed by Google company and written in TypeScript programming language.
I know that if you will start the learning of this, it will be a bit hard if you did not have a deal with the similar platform before, but I'll do my best to make this post the most useful and clear for you. Let's move on :)

Installiation

The installation process of Angular is very easy and require a few simple steps.
WARNING : all steps below, were done on Linux Red Hat 7.2 system.
JavaScript, for installation their packages, is using the personal type of package manager, named "NPM". To install it on your system you can use known for us tool "yum".
yum install -y npm
And via this tool, we can install our Angular platform.
np install -g angular-cli
Great! All what we need is installed, and we can start the creation of our project.

First application

Creation of project on Angular is pretty much easy like and installation. Just what we need to do, run command
ng new project where "project" is the name of our application. It can take a few minutes, to download all of dependencies. And after we can run it
cd ./project
ng serve

Besides, we can launch the application on needed for us host and port, because by default it running on localhost and port 4200, and if you will run this application on the destination server, you will not able to get on UI, because it will work only local.
ng serve --host host1.com --port 80
Also, want to make the accent on additional downloading dependencies, if you will receive some issues during the launch. You can do this via this command npm install

Structure and workflow

When you create the project, will appear the folder with three folders and a lot of files. We will not stop on each of them, but review general structure and files, which we will use.
The folder which we will use most, is "src", exactly on this folder stored files of our project. Folder "e2e", is using for end-to-end tests and "node_modules" is stored all angular modules. So, let's detailed about "src".
This folder has also personal structure. The first folder named "app" is storing inside, your written modules and components. Folder "assets", will store your future static data, and last one environments folder, storing information about the environment which you use. By default is using "prod" environment.
And files on root "src" folder, are having a big role in the project because storing main configuration and templates of it. Later, we will review all of them.
- e2e
- - app.e2e-spec.ts
- - app.po.ts
- - tsconfig.json

- node_modules
- - ...

- src
- - app
- - assets
- - environments
- - index.html
- - favicon.ico
- - main.ts
- - prolyfills.ts
- - test.ts
- - tsconfig.json
Due to this information, we can create the workflow of the running process of Angular.
The Angular platform is running "main.ts" file, which one is defining the environment and running main application module, described on "app.component.ts". And from to this information inside components file, bootstrap is loading other file and our components.

Components

If we have a look at our main HTML file, we will see that there no HTML or CSS text. Angular only calling component which describing all your data. There is the main point why people using it and why it builds correct dynamic site.
So, we got that the Angular gives possibility to create single page application which one consists of components.
Components are the most basic building block of an UI in an Angular application. In the default case, it stored on "app.component.ts" file, but late we will discuss how to create new ones. So, let's detailed review the part of the component.
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'hello! ';
}
Let's go review them, one by one.
@Component - its decorator, exactly this field is showing, that this object is a component, but not simply JavaScript class.
selector - field which is defining name of our component (it should be uniqe for all project)
templateUrl - path to HTML file with Hypertext data (also can be template, where can be stored not path, but Hypertext data directly).
styleUrls - path to CSS file where stored style data (the same like with template, can use style and paste style info on .ts file).
And later, we define this class AppComponent and inside we will describe all our variable, which will use on our component.
These data we are showing in the .html file. For example, to show variable "title", we should paste something like this :
<h3>
  {{title}}
</h3>
The best way to create your own component is run :
ng generate component component_name
It will create folder with skeleton data for new component.
If you want to create it by manually you should register it on "app.module.ts" file.
Also, we need to know, that exist few types of using the selector of our component :
  • Simple selector :
    component.ts file
    @Component({
      selector: 'app-root',
    
    html file
    <app-root></app-root>
  • Atribute type of selector :
    component.ts file
    @Component({
      selector: '[app-root]',
    
    html file
    <div app-server></div>
  • Selector of class type :
    component.ts file
    @Component({
      selector: '.app-root',
    
    html file
    <div class="app-server"></div>
Right now you just need to keep in mind this information, because maybe you will found them on some examples, so should understanding what is this. A detailed method of applying them will follow.

Variables

The last thing what I want to review on introduction post regarding Angular is variables.
TypeScript is supporting a lot of types. Maybe you will not use all of them and I will not stop on each but review the main ones.
P.S. Detailed information about types you can find on official site of TypeScript
  • Boolean - basic True/False type data
    online: boolean = false;
  • Number - can be simple number or float number
    amount: number = 0;
  • String - textual data
    name: string = 'name1';
  • Array - array numberic vaues data
    list: number[] = [1, 2, 3];
  • Tuple - array different vaues data (just remind, that first should be string values and after numbers)
    list: = ["hello", 10];

RIght now that's all. In next post, we will start from communication our HTML text with Angular, using functions and will write the simple dynamic site. So, I hope this post was also useful for you and you will back on next one ;)
Thank you for your attention!
- Kostia

0 Comments


    Leave a Comment