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
The Building Blocks:
Simply a database! (Tutorial Coming SOON!)
A Web Application Framework that runs on Node.js that makes connecting to our database really easy!
- Angular 2:
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
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
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!