Suggested Videos
Part 1 - Introduction to Angular 2 | Text | Slides
Part 2 - Setting up Angular 2 in Visual Studio | Text | Slides
Part 3 - Run angular 2 app using f5 from visual studio | Text | Slides
In this video tutorial we will discuss - What is a component in Angular 2
In Part 1 of Angular 2 tutorial, we discussed that everything in Angular 2 is a component i.e components are the basic building blocks of an Angular application.
What is a component in Angular 2
A component in Angular is a class with a template and a decorator. So in simple terms a component in Angular is composed of these 3 things
- Template - Defines the user interface. Contains the HTML, directives and bindings.
- Class - Contains the code required for template. Just like a class in any object oriented programming language like C# or Java, a class in angular can contain methods and properties. Properties contain the data that we want to display in the view template and methods contain the logic for the view. We use TypeScript to create the class.
- Decorator - We use the Component decorator provided by Angular to add metadata to the class. A class becomes an Angular component, when it is decorated with the Component decorator.
Component Example : In Part 2 of Angular 2 tutorial, we have downloaded quick start files from the Angular Website. One of the files in these quick start files, is the app.component.ts file. You can find this file in the "app" folder. This file contain a component. The name of the component is AppComponent. The AppComponent is the root component of the application. I have commented the code in the following example and it should be self-explanatory. If it's not, please watch the video by clicking here.
//
Component decorator is provided by the Angular core library, so we
// have
to import it before using it. The import keyword is similar to
// using
keyword in C#. Any exported member can be imported using import
//
keyowrd.
import { Component } from '@angular/core';
// The
class is decorated with Component decorator which adds metadata
// to the
class. We use the @ symbol to apply a decorator to the class
//
Applying a decorator on a class is similar to applying an attribute
// to a
class in C# or other programming languages. Component is just
// one of
the deveral built-in decorators provided by angular. We will
//
discuss the other decorators provided by angular in upcoming videos
@Component({
// component
has several properties. Here we are using just 2. For
// the full
list of properties refer to the following URL
//
https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html
// To use this
component on any HTML page we specify the selector
// This
selector becomes the directive <my-app> on the HTML page
// At run time,
the directive <my-app> is replaced by the template
// HTML
specified below
selector: 'my-app',
// The template
contains the HTML to render. Notice in the HTML
// we have a
data-binding expression specified by double curly
// braces. We
have a defualt value "Angular" assigned to "name"
// property in
the AppComponent class. This will be used at runtime
// inplace of
the data-binding expression
template: `<h1>Hello
{{name}}</h1>`,
})
// export
keyword allows this class to be exported, so other components
// in the
application can import and use it if required
export class
AppComponent {
// name is a
property and the data type is string and
// has a
default value "angular"
name: string = 'Angular';
}
Notice in the index.html page, we have used the AppComponent using the directive <my-app>. At runtime <my-app> directive is replaced with the HTML we specified using the selector property in the component decorator.
<!DOCTYPE html>
<html>
<head>
<title>Angular
QuickStart</title>
<base href="/src/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!--
Polyfill(s) for older browsers -->
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function (err) { console.error(err); });
</script>
</head>
<body>
<my-app>Loading
AppComponent content here ...</my-app>
</body>
</html>
When we build the project in Visual Studio TypeScript is compiled to JavaScript which the browser understands and renders. Our TypeScript code for this component is present in app.component.ts file. Notice a corresponding app.component.js is file is generated on build. To see the generated .js file click on show-all-files icon in solution explorer. Besides .js files, there are several other files. We will discuss what these files are, their purpose and how angular application bootstraps itself using these files in our upcoming videos.
hi Venkat,
ReplyDeleteDo we need to study everything about java scripting to know angular js
No.You should know basic of javascript.like how to create object etc.
ReplyDelete