DDapp Hello World - Create a new Angular 4 Project

In this article, we're going to create a supper simple Angular 4 project application and explore what its structure is and how to quickly manage coding sections. Let's get started.

Create Angular 4 project with Angular CLI

Let open up your command line prompt and type following code (ensure that you have @angular/cli installed):

ng new first-angular-ddapp

Now, let's move to the Project folder:

cd first-angular_ddapp

It's time to open up project in code editor and see what's created inside. Open project in Visual Studio Code with following command (don't forget last "dot" character - It's means we're going to open the whole project in Visual studio code instead of single file):

code .

Let take a look at the folder structure:

-e2e
-node_modules
-src
---app
------app.module.ts
------app.components.html
------app.components.ts
------app.components.css
---assets
---environments
---index.html
---test.ts
---main.ts
-.angular-cli.json
-karma.conf.js
-package-lock.js
-package-json

We're just need to know some main parts of the project, for more information, please find out in the external resources.

src

This is the folder that your codes stores and project compiler will be started here. When some one asked you modify your code, please open up this folder and find them.

package.json

This file will be store library, module, plugin, components definition what you installed and use in this project. Don't remove this folder, it's will be used to restore your library list when deployed in other environments.

node_modules

Where external resources, plugins, libraries, modules was downloaded and installed. You can remove this folder, but when you want to run project, make sure that all required modules/plugins need to be restored by running this command:

npm install --save 

Conclusion

Let's go back to main article and see what we're going to do next

DDapp Hello World - Create Hello World Project + add some features