Suggested Video Tutorials
Angular CLI
Angular 2
Bootstrap
This is Part 1 of Angular CRUD tutorial. In this video and in our upcoming videos in this series we will discuss performing CRUD operations in Angular i.e Creating, Reading, Updating and Deleting in Angular with simple examples.
Setting up a new angular project from scratch is a tedious and time consuming process. However, Angular CLI makes it super fast and easy. With angular development, we write same boiler plate code to create components, pipes, services, directives etc. Manually creating these consumes lot of time. Angular CLI can generate these with lightning speed while still following Angular's best practices and conventions. So basic knowledge of Angular CLI is very helpful.
The prerequisites for this course are basic knowledge of Bootstrap, Angular CLI and Angular 2. If you are new to these please check out our courses using the links below.
Installing the tools required
Node : Install the latest version of node. Here is the link to download and install the latest version
https://nodejs.org/en/download/
As of this recording the latest version is 8.9.2 which is what I have installed. Run windows command prompt as an administrator and execute the following command to verify the version of node installed on your machine.
node -v
Angular CLI : Install the latest version of Angular CLI by executing the following command from the windows command prompt.
npm install -g @angular/cli
As of this recording, the latest version is 1.6.0 which is what I have installed on my machine. To verify the version of Angular CLI installed on your machine execute the following command.
ng -v
Another question that you might have is, which version of Angular are we using with this course. As of this recording, the latest version is Angular 5, which is what we will be using.
After you have the latest version of Node and Angular CLI installed, launch windows command prompt as an administrator and execute the following command. This creates a new AngularProject with name AngularCrud. We do not want test files to be generated for the root component AppComponent, so we have set "skip-tests" option to true. We will discuss unit testing components in a later video.
ng new AngularCrud --skip-tests true
This command creates a brand new Angular Project with name AngularCrud. In windows command prompt change to the directory that contains your angular project using the following command.
cd AngularCrud
Once you are in the project directory, execute the following command to open the project with Visual Studio Code, by executing the following command from the windows command prompt
code .
Once you have the Angular project opened in Visual Studio Code, open package.json file and notice that we are using Angular 5.
We will be using Bootstrap for styles in our application. So install Bootstrap by executing the following command from the command prompt.
npm install bootstrap@3 --save
Once Bootstrap is installed, open .angular-cli.json file and specify the path to the Bootstrap stylesheet (bootstrap.min.css) in the styles property as shown below.
Angular CLI
Angular 2
Bootstrap
This is Part 1 of Angular CRUD tutorial. In this video and in our upcoming videos in this series we will discuss performing CRUD operations in Angular i.e Creating, Reading, Updating and Deleting in Angular with simple examples.
Setting up a new angular project from scratch is a tedious and time consuming process. However, Angular CLI makes it super fast and easy. With angular development, we write same boiler plate code to create components, pipes, services, directives etc. Manually creating these consumes lot of time. Angular CLI can generate these with lightning speed while still following Angular's best practices and conventions. So basic knowledge of Angular CLI is very helpful.
The prerequisites for this course are basic knowledge of Bootstrap, Angular CLI and Angular 2. If you are new to these please check out our courses using the links below.
Installing the tools required
Node : Install the latest version of node. Here is the link to download and install the latest version
https://nodejs.org/en/download/
As of this recording the latest version is 8.9.2 which is what I have installed. Run windows command prompt as an administrator and execute the following command to verify the version of node installed on your machine.
node -v
Angular CLI : Install the latest version of Angular CLI by executing the following command from the windows command prompt.
npm install -g @angular/cli
As of this recording, the latest version is 1.6.0 which is what I have installed on my machine. To verify the version of Angular CLI installed on your machine execute the following command.
ng -v
Another question that you might have is, which version of Angular are we using with this course. As of this recording, the latest version is Angular 5, which is what we will be using.
After you have the latest version of Node and Angular CLI installed, launch windows command prompt as an administrator and execute the following command. This creates a new AngularProject with name AngularCrud. We do not want test files to be generated for the root component AppComponent, so we have set "skip-tests" option to true. We will discuss unit testing components in a later video.
ng new AngularCrud --skip-tests true
This command creates a brand new Angular Project with name AngularCrud. In windows command prompt change to the directory that contains your angular project using the following command.
cd AngularCrud
Once you are in the project directory, execute the following command to open the project with Visual Studio Code, by executing the following command from the windows command prompt
code .
Once you have the Angular project opened in Visual Studio Code, open package.json file and notice that we are using Angular 5.
We will be using Bootstrap for styles in our application. So install Bootstrap by executing the following command from the command prompt.
npm install bootstrap@3 --save
Once Bootstrap is installed, open .angular-cli.json file and specify the path to the Bootstrap stylesheet (bootstrap.min.css) in the styles property as shown below.
"styles":
[
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]
Hi Venkat sir,
ReplyDeleteI'm very big fan of you. I have setup the project as you describe above. Now I'm trying to run project using f5 in visual studio but no luck. Can you please help. I saw your Angular 2 tutorial, which is fine with visual studio.
Thanks
Sanjay
Hi Sanjay, This tutorial is shown using visual studio code editor. Please use that else you can also use command prompt(cmd) to run the project.
DeleteThis example us vs code editor not full visual studio
ReplyDeletehow to download VS CODE EDITOR. please suggest me.
DeleteERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css
ReplyDeleteModule not found: Error: Can't resolve 'C:\node_modules\bootstrap\dist\css\bootstrap.min.css' in 'C:\AngularCrud'
i ｢wdm｣: Failed to compile.
only use the below url to refrence the bootstrap :-
Deletenode_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css
Hi, only type "node_modules/....."
DeletePaths in angular-cli.json are relative to the project root (node_modules/bootstrap normally).
ReplyDeleteHi,
ReplyDeleteI am getting below error
Refused to apply style from 'http://localhost:4200/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Can you please help on this
hello sir,
ReplyDeleteWhich IDE would be better to develop a erp system in angular 6, Visual Studio 2017 or visual studio Code
/* You can add global styles to this file, and also import other style files */
ReplyDelete@import "~bootstrap/dist/css/bootstrap.css";
body {
padding: 20px;
}
If you stumble on problems executing commands, execute:'ng --help' for the correct syntax specific to your version of NodeJS.
ReplyDeleteAdditionally, if you encounter errors like the aforementioned posters, check that the path is correct; in my version (as of this date), I have to omit the '../' from the beginning of the path.
For future reference, when you type '.' in the command prompt, you reference the current folder.
'..' moves the prompt up one level to the parent folder.
'../' moves the prompt up one level to the parent folder, and down into .
Newbies, your welcome!