Angular – Hello World Application

In our previous tutorial, we have made the environment ready for Angular application development. In this tutorial, we shall create our first Angular Application – Hello Word.

To create a new Angular project, following ng command has to be run in command prompt or terminal.

 ng new <project-name>
  • ng is for Angular.
  • new creates a new project.
  • <project-name> is the name of the Angular project to be created.
    • New project names must start with a letter, and must contain only alphanumeric characters or dashes. When adding a dash the segment after the dash must also start with a letter. hello-world, hello-world1 are valid. hello_world, hello-1world are not valid.

Run following command, to create an angular project with name hello_world.

 ng new hello-world
C:\workspace\angular>ng new hello-world
CREATE hello-world/angular.json (3593 bytes)
CREATE hello-world/package.json (1315 bytes)
CREATE hello-world/README.md (1027 bytes)
CREATE hello-world/tsconfig.json (384 bytes)
CREATE hello-world/tslint.json (2805 bytes)
CREATE hello-world/.editorconfig (245 bytes)
CREATE hello-world/.gitignore (503 bytes)
CREATE hello-world/src/environments/environment.prod.ts (51 bytes)
CREATE hello-world/src/environments/environment.ts (631 bytes)
CREATE hello-world/src/favicon.ico (5430 bytes)
CREATE hello-world/src/index.html (297 bytes)
CREATE hello-world/src/main.ts (370 bytes)
CREATE hello-world/src/polyfills.ts (3194 bytes)
CREATE hello-world/src/test.ts (642 bytes)
CREATE hello-world/src/assets/.gitkeep (0 bytes)
CREATE hello-world/src/styles.css (80 bytes)
CREATE hello-world/src/browserslist (375 bytes)
CREATE hello-world/src/karma.conf.js (964 bytes)
CREATE hello-world/src/tsconfig.app.json (194 bytes)
CREATE hello-world/src/tsconfig.spec.json (282 bytes)
CREATE hello-world/src/tslint.json (314 bytes)
CREATE hello-world/src/app/app.module.ts (314 bytes)
CREATE hello-world/src/app/app.component.html (1141 bytes)
CREATE hello-world/src/app/app.component.spec.ts (994 bytes)
CREATE hello-world/src/app/app.component.ts (207 bytes)
CREATE hello-world/src/app/app.component.css (0 bytes)
CREATE hello-world/e2e/protractor.conf.js (752 bytes)
CREATE hello-world/e2e/src/app.e2e-spec.ts (307 bytes)
CREATE hello-world/e2e/src/app.po.ts (208 bytes)
CREATE hello-world/e2e/tsconfig.e2e.json (213 bytes)
npm WARN deprecated istanbul-lib-hook@1.2.1: 1.2.0 should have been a major version bump

> node-sass@4.9.2 install C:\workspace\angular\hello-world\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\TutorialKart\AppData\Roaming\npm-cache\node-sass\4.9.2\win32-x64-64_binding.node

> node-sass@4.9.2 postinstall C:\workspace\angular\hello-world\node_modules\node-sass
> node scripts/build.js

Binary found at C:\workspace\angular\hello-world\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine

> @angular/cli@6.0.8 postinstall C:\workspace\angular\hello-world\node_modules\@angular\cli
> node ./bin/ng-update-message.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1102 packages from 1279 contributors and audited 21866 packages in 20.585s
found 13 vulnerabilities (9 low, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details
warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in e2e/protractor.conf.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in e2e/src/app.e2e-spec.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in e2e/src/app.po.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in e2e/tsconfig.e2e.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/app/app.module.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/browserslist.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/environments/environment.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/karma.conf.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/polyfills.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/styles.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/test.ts.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/tsconfig.app.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/tsconfig.spec.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in src/tslint.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in tslint.json.
The file will have its original line endings in your working directory.
    Successfully initialized git.

Do not worry about the warnings that are displayed in the console.

Navigate into the project folder and run the following command to start the Angular Live Development Server.

Start Angular Live Development Server

The project is compiled successfully.

As shown in the message displayed on console, the server should be listening on localhost:4200. Open a browser and hit the url localhost:4200.

Angular Hello World

File Structure of Angular Project

Now we shall look into folder structure and different files created by ng new hello-world command.

Angular Project Default Folders and Files

e2e contains end to end testing type script files.

node_modules contains all the dependencies of the project.

src contains all the files that we use for actual application development. We shall discuss about each of them in detail when necessary in subsequent tutorials.

angular.json contains project’s build and configuration options.

Conclusion

In this Angular Tutorial, we have created a simple Angular application and started it on a server. Also, we have learnt about the default folders and files created by ng new command when a new project is created. In our next tutorial