Angular4 Introduction
Angular4 Introduction
Angular4 Introduction
- A JavaScript framework.
Services
Class
Properties
Component
Template Metadata
Methods
Component
Component
Component
• Every Angular app has a root module, conventionally named AppModule, which
provides the bootstrap mechanism that launches the application.
• An app typically contains many functional modules.
• Like JavaScript modules, NgModules can import functionality from other
NgModules, and allow their own functionality to be exported and used by other
NgModules.
• For example, to use the router service in your app, you import the Router
NgModule.
• Components define views, which are sets of screen elements that Angular can
choose among and modify according to your program logic and data.
• Every app has at least a root component.
• Components use services, which provide specific functionality not directly
related to views.
• Service providers can be injected into components as dependencies, making
your code modular, reusable, and efficient.
• Every Angular application has at least one component, the root component that
connects a component hierarchy with the page DOM.
• Each component defines a class that contains application data and logic, and is
associated with an HTML template that defines a view to be displayed in a
target environment.
• The @Component decorator identifies the class immediately below it as a
component, and provides the template and related component-specific
metadata.
As you can see, this component-based architecture makes our applications more
organized and maintainable. Plus, we can potentially reuse these components in
various parts of an application or in an entirely different application
• Node Package Manager is an command line utility that interacts with repository
of open source projects.
• Using npm installs libraries, packages and applications along with
dependencies
• Inside the generated folder, the following top-level folders are present:
• e2e: includes end-to-end tests.
• node_modules: all the third-party libraries that our project is dependent upon.
• src: the actual source code of our Angular application. 9.9% of the time you’ll
be working with the files inside the src folder.
• angular-cli.json: a configuration file for Angular CLI. This file is used to import
third-party stylesheets or define additional environments (eg testing
environment) for our application.
Open product.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
constructor() { }
ngOnInit() {
}
www.hexaware.com | © Hexaware Technologies. All rights reserved. 27
Creating a Component