The AngularJS Tutorial Series: Part III - Starting With Angular.

In this post we’ll see how an Angular project is setup. We’ll discuss the project folder structure, and then continue on with writing some code, to just get a feel of things.

The Folder Structure Generated By Angular CLI

In the first post of this series we saw how to create a new project in Angular using the CLI. The CLI created a folder structure for us, auto-generating our first component, our first module, and setting up some other important stuff.

Let’s get started by discussing the folder structure that the CLI created, along with seeing what some of these newly created files do, discuss the module created by the CLI for our use, and how Angular bootstraps our entire application, using some of the files that it created.

At first glance this how the structure looks, at the time of writing this post.

|-e2e
   |-src
   |---index.html
   |---main.ts
   |---styles.css
   |---favicon.ico
   |---test.ts
   |---ts.config.app.json
   |---ts.spec.app.json
   |---typings.d.ts
   |---polyfill.ts
   |---app
   |----app.component.css
   |----app.component.html
   |----app.component.spec.ts
   |----app.component.ts
   |----app.module.ts
   |---assets
   |-----css
   |------app.css
   |------foundation.min.css
   |-----js
   |------app.js
   |-------vendor
   |--------jquery.js
   |--------what-input.js
   |--------foundation.min.js
   |---environments
   |-.angular-cli.json
   |-karma.conf.js
   |-package.json
   |-tsconfig.json
   |-tslint.json
   |-README.md
   |-.editorconfig
   |-.gitignore

Two-Way-Databinding, Bootstrapping, And Integrating The App With Zurb’s Foundation Framework

Here’s the video tutorial that introduces us to that app that we created during the first post of this series. In the video, we will be going through some files, understanding how Angular loads, looking at our first component, looking at our first module, integrating Zurb’s Foundation Framework, and playing around with the code a little to see it work. We’ll also be seeing Two-Way-Databinding at work in this video.

Again, note that this video is meant to introduce us to the folder structure, some important files, and to just understand some parts of how things are setup in an Angular app. So, it’s really okay to feel lost at first. Going through this video more than once should give you a rough idea of what we’re trying to do in the video above. So, don’t shy away from playing with code. Go on, go all out, try breaking your app, and understanding what’s happening. This will afford us with more clarity at a later stage in the series.