Building Web Applications
with Angular 2

Thoughts: These notes are essentially all you need to start your journey of building amazing Web Applications! With that said, this is only a guide and there is so much information that I can provide all of you. If you are interested more than just learning a cool hobby, and want to take programming serious, please ask me questions! In addition, programming can be a self-learning activity a majority of the time if you are not working with a team, so I encourage all of you to explore what Angular 2 has to offer!


MEAN Stack | Our Alternative

MySQL, Loopback, Angular 2, and NodeJS

MongoDB, Express, AngularJS, and Node.js have clearly become a popular development stack. We have our own alternative, which is MySQL, Loopback, Angular 2, and NodeJS. Before continuing, please note LoopBack is an IBM and StrongLoop framework built off Express. We are not introducing too many new concepts, rather solutions that do the job even better. The MEAN stack has arguably been seen as a preferred solution than using a stack with an alternate programming language for server-side development, even PayPal, LinkedIn, Netflix, and the New York Times think so! And more importantly, NORA and other S37 applications use this powerful stack to build enterprise level solutions. It’s straightforward, MEAN is the full stack solution, only using JavaScript (and now TypeScript), offering Prototypal Object Orientation, Event-Driven architecture, and closures. JavaScript has become easily tagged as the programming language of the Web and that is not going to change anytime soon. Across the board, the MEAN stack solution is faster in terms of development as well as web application speeds. Must I say more? If any of that was over your head, it’s okay! We will break them down overtime until they are simple concepts we can explain to anyone.


The Building Blocks:

  • MySQL:

    Simply a database! (Tutorial Coming SOON!)

  • Loopback:

    A Web Application Framework that runs on Node.js that makes connecting to our database really easy!

  • Angular 2:

    Angular 2 is a framework to help us build client applications in HTML and JavaScript. Angular 2 handles the heaving lifting, presenting our application content in a browser and responding to user interactions according to the instructions we provided.

  • Node.js:

    An Execution environment for event-drive server-side and networking applications. In short, it allows everything to talk to the DB!


Your Local Environment Setup

Terminal Commands

DO NOT BE SCARED: It very common to be scared of the terminal! You really are directly communicating to the computer, so it’s important to pay extra attention when using your terminal. However, this shouldn’t stop you from getting comfortable with it! Programmers always will have to use the terminal, and since you are all programmers, you have to as well! Here are some basics that we went over! There are so many commands, even enough to write a class on, but I will spare all of you!

  • Changing directory | cd
  • List directory contents | ls
  • Create a new directory | mkdir directory_name

Creating your FIRST Angular 2 Application

Node.js/Angular 2 Specific Commands

We have an awesome tool called the Angular CLI (Command Line Interface), which makes the creation of projects a seamless process. Give it a shot!

  • First install angular-cli, by typing the following in your terminal | npm install -g angular-cli (Note: You may need to use sudo)
  • Create new project with new folder | ng new PROJECT_NAME
  • Alternatively: Create new project in existing folder | ng init
  • Build your project | ng build
  • Serve project (will auto-reload upon changes in code) | ng serve

Project Directories

We will go more in-depth on the purpose of each directory, however, I encourage all of you to give each a look and see if you can figure it out!

  • config
  • dist
  • e2e
  • src
  • tmp
  • public
  • node_modules

Components

Components are bits of JavaScript code telling Angular, the framework that our application is using, what to do. More specifically, it tells Angular how to render or show different parts of the web application. The app component is the root component, which holds all the components that we will be building. These components work with other components, making up our application.