Hello World by Angular

Prerequisites for Angular project

• Basics of HTML, CSS & Javascript
• Install Node.js
  • Download and install node as per your system's configration from here https://nodejs.org/en/download/
• Install Angular CLI
  • npm install -g @angular/cli

Creating Workspace and an Initial Application

Open terminal and navigate to the directory where you want to start a project.

Enter command to create a new application named hello-world-app

ng new hello-world-app

After entering command, CLI will ask you a few questions about adding routing and the format of the stylesheet you wish to use in the project.

An overview of Project Structure

The ng new command creates a significant number of files, the files of special importance, these are created in the hello-world-app/src directory.

These files may be classified into three sorts:

1. Workspace configuration

   Files	Purpose
   .editorconfig	Configuration of code editors to ensure that identical coding styles are maintained for different developers working on the same project across several editors and IDEs.
   .gitignore	Specifies untracked files that should be ignored by GIT
   README.md	Introductory documentation for the root app
   angular.json	CLI configuration defaults for all projects in the workspace, including configuration options for build, serve, and test tools that the CLI uses, such as TSLint, Karma and Protractor
   package.json	Configures the npm package requirements for all projects in the workspace.
   package-lock.json	Version information is provided for all packages put into node modules by the npm client.
   src/	The root-level application project's source files.
   node_modules/	Provides all npm packages to the workspace. All projects can see workspace-wide node modules dependencies.
   tsconfig.json	Default TypeScript setting for workspace projects.

2. Application config

   Files	Purpose
   browserslist	Configures sharing of target browsers and Node.js versions among various front-end tools.
   karma.conf.js	Application-specific Karma configuration
   tsconfig.app.json	Application-specific TypeScript configuration, including TypeScript and Angular template compiler options.
   tsconfig.spec.json	TypeScript configuration for the application tests.
   tslint.json	Application-specific TSLint configuration

3. Application source

   Files	Purpose
   app/	Contains the component files that define your application logic and data.
   assets/	Contains picture and other asset files that should be copied as-is when building your app.
   environments/	Contains build configuration options for particular target environments.
   favicon.ico	An icon to use for this application in the bookmark bar
   index.html	The main HTML page that is served when someone visits your site.
   main.ts	The main entry point for your application. Compiles the application and bootstraps the application's root module (AppModule) to run in the browser.
   polyfills.ts	Provides polyfill scripts for browser support.
   styles.css	Global CSS files that supply styles for a project
   test.ts	The main entry point for your unit tests, with some Angular-specific configuration. You don't typically need to edit this file.

Running initial application

To execute the newly built programme, open a terminal window and type the following command within the hello-world-app folder:

ng serve

The default port is set to http://localhost:4200/. When you open this in a browser, you'll see a new Angular application (default provided by angular).

Brief Introduction about Angular Components and Creating Components for Application

An angular application is built on angular components. It's a Directive, but it comes with an HTML template. An application may have many components that may be utilised independently anywhere in the programme.

Run the following command in the project directory terminal to create a new component:

ng g c hello-world

You'll get following files:

1. hello-world.component.ts: It contains typescript class and all metadata related to the component

2. hello-world.component.html: It contains template attached to the component
3. hello-world.component.css: It contains styling related to the component
4. hello-world.component.spec.ts: It contains unit test cases related to component.

Changing Template

Because we want to show Hello World, open hello-world.component.html and add the following to it:

Adding Styles

Open hello-world.component.css and add the following to it to style the component:

Final Code and Loading Components

Add component selector to app.component.html to utilise component in the application.

Remove all other code and add following:

Output

Conclusion

• Creating hello world by angular application is very easy using angular CLI
• The Angular application has a large number of configuration files that will eventually aid us in development
• Component selectors can be applied to templates in order to be included in applications
• Attatched css file will only apply css to the attached component.