java2practice

TemplateUrl:  Template url is the external file containing a html template for the view. If we have multiple lines of  html content, its better to keep one html file. we can give the html url path in the ‘templateUrl’ field.

templateUrl: ‘./app.component.html’,

Same for styles: css styles we can add two ways by adding styles, styleUrls fields. we should write the styles in the brackets [], it is style guide.

Style:  Inline-defined styles to be applied to this component’s view means whatever we write the styles in the component, that css styles applied to html content in template or template Url. If we have less content of styles, we can add the styles in the styles filed.

styles: [‘h1 { font-weight: normal; }’]

styleUrls: list of urls to stylesheets to be applied to this component’s view. If we have multiple styles ,its better to keep the external css files

styleUrls: [‘./app.component.css ]

Component Structure:

import { Component } from '@angular/core';
@Component({
selector: 'app',
template: 'Hello
<h4>{{title}}</h4>
!',

styles: [‘h4 { font-weight: normal; }’]
})
export class welcome { title: string = 'World'; }

Here component class must add export. then only it will available in the project. we need to add ‘export’ keyword before the component class

Module:

Every Angular app has at least one NgModule class, the root module, conventionally named AppModule. Angular apps are modular and Angular has its own modularity system called NgModules. We will add the components in the ‘declarations’ of this module file.

Import statement  for the module:

import { NgModule } from '@angular/core';

NgModule is a decorator to use the ng module.

most important properties are:

• declarations– the view classes that belong to this module.All component class names  must add in the declarations.  Angular has three kinds of view classes: components, directives, and pipes.
• exports– the subset of declarations that should be visible and usable in the component templates of other modules.
• imports– other modules whose exported classes are needed by component templates declared. We must add the the modules in the ‘imports’ field. whatever we use the modules, that should be place in the imports.
• providers– creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app. These providers are for services. whatever you have services , that services should be add in the provider field. providers will tell to angular how to inject a service.

bootstrap – the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.

Module  Structure:

import { NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]

})
export class AppModule { }

The module declares some objects to be public by marking them with the export key word.

Main.ts:

Launch an application by bootstrapping its root module. During development you’re likely to bootstrap the AppModule in a main.ts file like this one

import { platformBrowserDynamic } from '@angular/platform-browser';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

Source code present in the Github

https://github.com/Sathishchary/angular-app/