Join Gary Simon for an in-depth discussion in this video Using the Angular CLI, part of Angular 2+: Creating CRUD Apps.
- [Instructor] This course features two different CRUD based projects, both of which will use Angular. For these projects we're going to use the Angular Command Line Interface, or CLI to start the projects as well as generate components and service files, build our app, and serve the app to our browser, while we work on developing the projects. In a nutshell, this tool make our lives easier as developers. To install the CLI you first need to have Node.js installed in your computer, along with the Node package manager.
To check whether or not you have these two prerequisites open up your consol or command line and type node hyphen v and npm hyphen v. If either of these commands go unrecognized then we need to visit nodejs.org at our browser. We'll visit the download section after visiting nodejs.org and then we'll chose the appropriate installer based on your operating system. Once open we'll hit Next.
We'll accept the license agreement. Notice it says npm package manager. This will be installed by default. Simply hit Next and then install Node js. Now, I'm not going to do this because I already have it installed, but once installed go ahead and reload your command line and type in node hyphen v and npm hyphen v, once more and this time they should provide you with version numbers. Once you have npm, we can now use npm to install the Angular CLI, or Command Line Interface.
The command is npm install @angular/cli@ version 1.2.1, which is the version we're going to use for this course. And then we're going to add the g flag for global, which means we only have to run this command once to install it on our machine. Now we can access the CLI tool by typing ng.
As you can see, there are a lot of different commands that you can issue to it. Let's start a new project with it. To do this we type in ng new and then the project name. I'm going to name it pg, for playground. I also want to add in the routing flag. This will force the CLI to generate a basic routing file for us, which is us useful when you have multiple pages that are a part of your app. We will be using this in a little bit.
We'll hit Enter. Then, we're going to cd, and hop into the new pg folder that it created, cd pg. Then we're going to run npm install. This will install the dependencies based on the package dot JSON file that the ng new command creates. Now we can run the command ng serve, which will package up our project and start a server at local host 4200, which we can access in the browser.
And here we go. As we develop our CRUD apps, we're going to use this CLI tool to start projects just as we've done here, as well as generate components and service files. Now that we have a fresh angular project, there's a few things that I want you to be sure that you understand, before we jump into the CRUD projects. First we're going to cover capturing user events within Angular.
- Angular Firebase CRUD
- Firebase setup
- Starting a project
- Defining the template
- CRUD apps with MongoDB
- MongoDB setup
- Creating a data service
- Home component
- Creating, updating, and deleting articles