Angular 4 School

How to create an Angular 4 app from Scratch - 2

learn about setting up configuration , project structure , files etc to bootstrap an angular 4 app

getting started with angular


Before we start!
This tutorial assumes that you're already aware of what angular 4 is and have already done some beginner stuff with angular 4. If not then please consider going through our Angular 4 Tutorial Series first where we've presented a complete beginner friendly series of angular 4 tutorials.
  1. Angular 4 Tutorial Series for Beginners
Introduction!
In part 1 of this 2-part tutorial , we installed dependencies for our project and setup all the configuration related files , in this part we'll be doing the actual coding for our angular 4 app and setting up the src directory of our project.
Contents
  1. Initialize a package.json [ npm package ] file for our angular 4 app
  2. Installing all the dependencies for our angular 4 app
  3. Add tsconfig.json [ typescript compiler configuration ]
  4. Add webpack.config.js file [ configuration for webpack ]
  5. Create a src directory to hold our angular app specific files and folders
  6. Populate the src directory with app source code files
  7. Build the app using webpack
  8. Serve the app using NGINX

Note that we've completed the first 4 parts of our tutorial in part-1 , so let's get started with step-5
Step-5 Create src Directory
Make sure you're on the same location where your created your package.json file and create a new directory by the name src

mkdir src 
Now inside this src directory , add following 4 files along with the content as given below.
5.1 index.html
index.html is the first file which the browser loads and this is where the angular magic begins. Note the my-app directive , this is where angular starts taking control. Just add the index.html file in your src directory with following content.

<!DOCTYPE html>
<html>
  <head>
    <base href="/">
    <title>Angular With Webpack</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

5.2 polyfills.ts
Think of polyfills as codes which allow apps written using modern technologies to run on browsers which doesn't support those technologies natively. Pollyfills fill that gap. For our project we need to create a file polyfills.ts and add following content to it.

            import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');


5.3 vendor.ts
Vendor.ts is where we load project files which are relatively stable e.g. the angular code itself.

import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
5.4 main.ts
As the name suggests , this is the main file for our app. Note that we're importing an app from another file viz app.module and we're bootstraing our module. Copy the following code and paste it to a file main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';

import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);
Step-6 App Directory
Now is the time to declare app module and app components Start by creating a new directory inside the src directory.

mkdir app 
Now add module and component files as follows. Note that you've to add all the following files into the app directory using just created.
6.1 app.module.ts
This file defines our angular module. Add a file with name app.module.ts with following content. Note that the AppModule we've exported here is actually used by main.ts as we saw above.

import { NgModule } from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
 
import { AppComponent } from './app.component';
 
@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
6.2 app.component.ts
As we know , an angular app is just a collection of component , so here we define our component and the upcoming 2 files are just template and style of our component. Create a file app.component.ts and add following content to it.

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


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { }
Note that , we did nothing much here except telling the following 3 things to the component ::
  1. selector is my-app , we saw this in use in our html
  2. template is app.component.html [ we define this next ]
  3. styles are defined in app.component.css [ we skip this file in this tutorial , but you can use this file to add styles to your component ]
6.3 app.component.html
app.component.html is where we define the html for our component. Following is the content of the file.

<h1> Minimal Angular Application is Ready </h1> 


<p class="header"> This is how it is supposed to look </p> 
Step-7 Build using webpack
Great !! so after a lot of hard work , we're finally ready to build the app. If you've followed along then congratulations , there's just a single command you need to execute to build the project and it is webpack

webpack 
If things work fine , you should see a dist directory being created with some files inside it. That's all you need.
Serve your angular 4 app using Nginx
Copy the code from your dist directory to your nginx default directory usually /usr/share/nginx/html and access your app by point your browser to localhost [ assuming you're running nginx locally on port 80 ]. Note however that nginx directory and port may be different so double check for your machine. Once you point your browser to your nginx location , you should see the html content of your template file. Now you can do more experimentation by making changes to different files.
Get Code
The code which took us a lot of time to write is available on github ::
Summary
Wow !! we've done it , creating an angular app from very scratch. We hope you learned a lot of things in this tutorial by setting up this angular project manually. To learn more about angular , don't forget to go through our angular series for beginners.
Angular 4 Tutorial Series for Beginners



More from RISHABH.IO




















developed & nourished with by rishabh.io