Category

Courses

Search

Trending blog posts

Installation of Angular on Ubuntu

Angular is an Open source and TypeScript-based modern framework which is usually used to develop Front end Single Page Applications (SPAs) and PWAs. Angular is the updated version of AngularJS by the same team at Google.  With respect to programming, there is a huge difference in both versions. AngularJS is commonly used with JavaScript whereas Angular is mostly used with TypeScript. This article helps you to summarize on how you can install Angular CLI on your Ubuntu platform and use it to create real-life Angular Applications / Projects. This blog will cover the process steps of Angular installation on the Ubuntu platform. By the end of the blog, you will learn about - Installing Node/npm package on Ubuntu Installation and Usage of Angular CLI globally Commands of Angular CLI Creating an initial workspace for the application Running the Angular application in BrowserPre-requisites You must be aware of the basics of web programming like HTML, CSS, and JavaScript. (otherwise we strongly recommend learning those first before getting into this). Also, this article assumes that you are familiar with terms like Node/NPM. Audience This document can be referred by anyone who wants to install latest Angular version on Ubuntu 16.04. In order to continue, you must have —  System requirementsUbuntu OS Machine Good Internet Connection Admin/Sudo access with installation privileges where you can install any packages freely. PS: While working with Angular, knowledge of TypeScript is good to have, but not mandatoryA brief note on Node.js We are required to install Node.js because it acts as a lightweight server to run Angular applications. (If already installed, skip this part and jump to the next part of this blog.) Node.js is again an open-source and cross-platform JavaScript run-time environment that allows to execute the JavaScript code outside of a browser (on the Server-side). Node.js is responsible for managing and installing all npm dependencies for your Angular application. It provides all the required libraries to run the Angular project. Node.js acts as a run-time environment for any Angular application with servers over localhost. For more information on Node.js refer the official docs. Any Angular application requires the latest/stable version of Node.js in order to continue. Go to the official website in order to learn more about how to install Node.js on your Ubuntu OS machine. There is more than one way to install Node.js on Ubuntu. You can install it via command line, via PPA (personal package archive), or via NVM (which is Node.js Version Manager) You can install any version current or latest stable version as per your need. In this blog, we learn how to install using Command-Line with the below given commands: curl -sL | sudo -E bash - here setup_12.x is the version, and this command will add the node resource repo into your Ubuntu OS. Now, let’s install Node.js using apt command, by running the below command —  $ sudo apt install nodejs Once installed completely, you can verify that the Node.js and npm versions are installed by using the following command in a terminal/console window. — node -v or node — — version  npm -v 1. Need of NPM for Angular development Node.js serves as the Run-time environment for the application. Similarly, NPM(node package manager) is used as a dependency management tool for any JavaScript application. NPM will allow us to install the libraries required for any Angular application; for example, jQuery, angular-router, angular-http, bootstrap, and many more. You can explore a number of packages available in the npm store here. Note: Once you have installed Node.js it will automatically install NPM on your machine. You can check the version installed using the below command. npm -v 2. Angular CLI — What it is and the complete Installation guideIn the initial days of Angular, developers used to create whole architecture, webpack files, build process, etc for any project on their own from scratch, which is quite a time-consuming and lengthy process. To make it easier for the developer, the Angular team come up with an easy-to-use tool Angular CLI. As the name suggests CLI (command line interface), provides a user (developer) friendly interface where you can run commands to make your development life easier and faster. Angular CLI comes with a number of commands from creating a new project, to creating components, creating a routing configuration file, services, and many more.3. How to Install Angular CLI on Ubuntu To install the Angular CLI on your machine, open the terminal window and run the following command: npm install -g @angular/cli where -g denotes that CLI is being installed globally to your machine, which means you can create or run any command of CLI anywhere on your machine. Once you run the above command CLI will be installed on your machine, and you can verify the version installed using the following command: ng -vIn case you want to install some specific version of Angular CLI, you can run the below command —  npm install -g @angular/cli@x where `x` represents the Version number. You can change it to any valid version number. For more commands of Angular CLI, you can refer to this blog which contains a number of commands to use.4. Create Project using Angular CLI – Hello WORLD Moving on, let’s create our first ever Angular project using Angular CLI. Open your terminal window and type the command below on your machine. ng new hello-worldHere ng is our CLI prefix. new denotes the new project we are creating and hello-world is our project name. You can choose any name you want. After running this command, you will find the full architecture of the project in the directory where you run this command. The project folder will be like what is shown below -5. Angular Project architecture The first file to render on running this application will be index.html which is present in the src folder. src folder contains Source files for the root-level application project. assets folder contains all the static assets like images, fonts, etc. node_modules This folder is created while you run npm installed by package manager (npm) and it contains all the project dependencies or any third party modules required for the project. e2e folder contains all the source code related to Test Cases, and you can customize it as per your requirements. README.md file is being used as documentation for the app. Package.json configures npm dependencies that are available to the project in the workspace along with their versions specified. For more details about components/services and source code you can explore this link. Run the application You have completed the installation process of the Angular application via CLI, and now it’s time to run the application locally. As I said, Angular CLI comes with a complete tool-chain/commands for the development of front-end applications on your machine. Run the following command on the terminal (Navigate to the project directory if you are not in that directory) ng serve or ng serve --openThe --open (or just -o) option automatically opens your browser to  ng serve command will serve your application on localhost server which you can check by navigating to your browser with the below URL Once compiled successfully, your terminal window will look like below -You can customize the port as per your requirement by running the below command —  ng serve --host 0.0.0.0 --port 8080 Accessing Angular Web Interface ng serve command may take few seconds to run your application. Once completed, you should see a web page similar to the followingAnd it’s done! Now you can make changes in the default component’s template which is app.component.html  Also, moving forward you can generate a number of components/service/routing files using CLI commands as per your requirements and keep learning. 6. How to Uninstall Angular CLI on Ubuntu There are cases when you would need to uninstall Angular-CLI from your operating system. You can do so by running this below command on your terminal -  npm uninstall -g @angular/cli It's always recommended to run the command npm cache clean after uninstallation of Angular CLI from your system in order to avoid unwanted errors while installing it again. If you have any questions/doubts related to this blog, please let us know in the comment box below, and we would be more than happy to help you out.  If you have read this far, feel free to share this blog on social media or tweet about it.  Conclusion In this blog you have learned about what is Node/NPM and how you can install and use it. You have understood what is Angular CLI, and how you can use it after installing it on your Ubuntu Platform. Then we have created a new angular project from scratch using CLI command, and learnt how to run it. Now you have basic hands-on Angular application knowledge which you can use to start developing more applications. 
Installation of Angular on Ubuntu
Pardeep
Pardeep

Pardeep Jain

Author

Pardeep having 6 Years of experience in the IT Industry, He loves to write Blogs along with Open source contributions on StackOverflow, Github, etc. He majorly works on advanced Frontend frameworks/Libraries like Angular, React, Amazon Alexa skills, etc.

Posts by Pardeep Jain

Installation of Angular on Ubuntu

Angular is an Open source and TypeScript-based modern framework which is usually used to develop Front end Single Page Applications (SPAs) and PWAs. Angular is the updated version of AngularJS by the same team at Google.  With respect to programming, there is a huge difference in both versions. AngularJS is commonly used with JavaScript whereas Angular is mostly used with TypeScript. This article helps you to summarize on how you can install Angular CLI on your Ubuntu platform and use it to create real-life Angular Applications / Projects. This blog will cover the process steps of Angular installation on the Ubuntu platform. By the end of the blog, you will learn about - Installing Node/npm package on Ubuntu Installation and Usage of Angular CLI globally Commands of Angular CLI Creating an initial workspace for the application Running the Angular application in BrowserPre-requisites You must be aware of the basics of web programming like HTML, CSS, and JavaScript. (otherwise we strongly recommend learning those first before getting into this). Also, this article assumes that you are familiar with terms like Node/NPM. Audience This document can be referred by anyone who wants to install latest Angular version on Ubuntu 16.04. In order to continue, you must have —  System requirementsUbuntu OS Machine Good Internet Connection Admin/Sudo access with installation privileges where you can install any packages freely. PS: While working with Angular, knowledge of TypeScript is good to have, but not mandatoryA brief note on Node.js We are required to install Node.js because it acts as a lightweight server to run Angular applications. (If already installed, skip this part and jump to the next part of this blog.) Node.js is again an open-source and cross-platform JavaScript run-time environment that allows to execute the JavaScript code outside of a browser (on the Server-side). Node.js is responsible for managing and installing all npm dependencies for your Angular application. It provides all the required libraries to run the Angular project. Node.js acts as a run-time environment for any Angular application with servers over localhost. For more information on Node.js refer the official docs. Any Angular application requires the latest/stable version of Node.js in order to continue. Go to the official website in order to learn more about how to install Node.js on your Ubuntu OS machine. There is more than one way to install Node.js on Ubuntu. You can install it via command line, via PPA (personal package archive), or via NVM (which is Node.js Version Manager) You can install any version current or latest stable version as per your need. In this blog, we learn how to install using Command-Line with the below given commands: curl -sL | sudo -E bash - here setup_12.x is the version, and this command will add the node resource repo into your Ubuntu OS. Now, let’s install Node.js using apt command, by running the below command —  $ sudo apt install nodejs Once installed completely, you can verify that the Node.js and npm versions are installed by using the following command in a terminal/console window. — node -v or node — — version  npm -v 1. Need of NPM for Angular development Node.js serves as the Run-time environment for the application. Similarly, NPM(node package manager) is used as a dependency management tool for any JavaScript application. NPM will allow us to install the libraries required for any Angular application; for example, jQuery, angular-router, angular-http, bootstrap, and many more. You can explore a number of packages available in the npm store here. Note: Once you have installed Node.js it will automatically install NPM on your machine. You can check the version installed using the below command. npm -v 2. Angular CLI — What it is and the complete Installation guideIn the initial days of Angular, developers used to create whole architecture, webpack files, build process, etc for any project on their own from scratch, which is quite a time-consuming and lengthy process. To make it easier for the developer, the Angular team come up with an easy-to-use tool Angular CLI. As the name suggests CLI (command line interface), provides a user (developer) friendly interface where you can run commands to make your development life easier and faster. Angular CLI comes with a number of commands from creating a new project, to creating components, creating a routing configuration file, services, and many more.3. How to Install Angular CLI on Ubuntu To install the Angular CLI on your machine, open the terminal window and run the following command: npm install -g @angular/cli where -g denotes that CLI is being installed globally to your machine, which means you can create or run any command of CLI anywhere on your machine. Once you run the above command CLI will be installed on your machine, and you can verify the version installed using the following command: ng -vIn case you want to install some specific version of Angular CLI, you can run the below command —  npm install -g @angular/cli@x where `x` represents the Version number. You can change it to any valid version number. For more commands of Angular CLI, you can refer to this blog which contains a number of commands to use.4. Create Project using Angular CLI – Hello WORLD Moving on, let’s create our first ever Angular project using Angular CLI. Open your terminal window and type the command below on your machine. ng new hello-worldHere ng is our CLI prefix. new denotes the new project we are creating and hello-world is our project name. You can choose any name you want. After running this command, you will find the full architecture of the project in the directory where you run this command. The project folder will be like what is shown below -5. Angular Project architecture The first file to render on running this application will be index.html which is present in the src folder. src folder contains Source files for the root-level application project. assets folder contains all the static assets like images, fonts, etc. node_modules This folder is created while you run npm installed by package manager (npm) and it contains all the project dependencies or any third party modules required for the project. e2e folder contains all the source code related to Test Cases, and you can customize it as per your requirements. README.md file is being used as documentation for the app. Package.json configures npm dependencies that are available to the project in the workspace along with their versions specified. For more details about components/services and source code you can explore this link. Run the application You have completed the installation process of the Angular application via CLI, and now it’s time to run the application locally. As I said, Angular CLI comes with a complete tool-chain/commands for the development of front-end applications on your machine. Run the following command on the terminal (Navigate to the project directory if you are not in that directory) ng serve or ng serve --openThe --open (or just -o) option automatically opens your browser to  ng serve command will serve your application on localhost server which you can check by navigating to your browser with the below URL Once compiled successfully, your terminal window will look like below -You can customize the port as per your requirement by running the below command —  ng serve --host 0.0.0.0 --port 8080 Accessing Angular Web Interface ng serve command may take few seconds to run your application. Once completed, you should see a web page similar to the followingAnd it’s done! Now you can make changes in the default component’s template which is app.component.html  Also, moving forward you can generate a number of components/service/routing files using CLI commands as per your requirements and keep learning. 6. How to Uninstall Angular CLI on Ubuntu There are cases when you would need to uninstall Angular-CLI from your operating system. You can do so by running this below command on your terminal -  npm uninstall -g @angular/cli It's always recommended to run the command npm cache clean after uninstallation of Angular CLI from your system in order to avoid unwanted errors while installing it again. If you have any questions/doubts related to this blog, please let us know in the comment box below, and we would be more than happy to help you out.  If you have read this far, feel free to share this blog on social media or tweet about it.  Conclusion In this blog you have learned about what is Node/NPM and how you can install and use it. You have understood what is Angular CLI, and how you can use it after installing it on your Ubuntu Platform. Then we have created a new angular project from scratch using CLI command, and learnt how to run it. Now you have basic hands-on Angular application knowledge which you can use to start developing more applications. 
Installation of Angular on Ubuntu
Blogs
5631
Installation of Angular on Ubuntu

Angular is an Open source and TypeScript-based m... Read More

How to Install Angular on Windows

In this article, you will learn how you can install Angular CLI on your Windows machine and use it to create real-life Angular Applications/Projects.As you know, Angular is popularly used to create SPAs (Single page applications). Angular is an in-demand, open-source, and modern web application development framework by Google, as compared to all other Libraries and Frameworks like ReactJs, VueJs, MithrilJs, etc.The reasons behind this are many. Angular provides you full access to use all its sub-packages like routing, Async calls, Security, etc.Introduction — What  you will learnIn this blog, we will cover the installation of Angular on Windows. By end of the article, you will understand how to -Install Node/npm on your machine.Use and install Angular CLI globally.Run Angular CLI commands.Create an initial workspace for the application.Run the Angular application in Browser.We assume you are already aware of the basics of web development including HTML, CSS, and JavaScript. (if so, please proceed otherwise we strongly recommand to learn those first before jumping into Angular).In order to continue, you must have — Windows MachineGood Internet ConnectivityWindows user account with all/admin installation privileges where you can install any packages freely.PS: While working with Angular, knowledge of TypeScript is good to have, but is not mandatory. A brief note about Node.jsThe very first thing required to install is Node.js. (If already installed, skip this part and jump to the next part of this blog.)Node.js is again an open-source and cross-platform JavaScript run-time environment that allows to execute JavaScript code outside of a browser (on the Server-side). Node.js is responsible to manage and install all npm dependencies for your Angular application. It provides the required libraries to run the Angular project. Node.js acts as a run-time environment for any Angular application which uses servers over localhost. For more information on Node.js refer to official docs.Angular requires the latest/stable version of Node.js in order to continue. Go to the official website in order to install Node.js on your machine locally.You can install any version, the current one or latest stable version, as per your need. Just click on the button and it will start downloading the package on your machine. Once downloaded click on the icons downloaded and follow the steps, till the installation is completed. To check the version installed of Node.js you can use the following command in a terminal/console window. —node -vornode — — versionNeed for NPM for Angular development As Node.js serves as Run time environment for the application, similarly NPM(node package manager) is used as a dependency management tool for any JavaScript application. NPM will allow us to install the libraries required for any Angular application; for example jQuery, angular-router, angular-http, bootstrap, and many more. You can explore a number of packages available in the npm store here.Note: Once you have installed Node.js it will automatically install NPM on your machine, and you can check the version installed using the below command. npm -vAngular CLI — What it is and complete Installation guideEarlier in the initial days of Angular, developers used to create whole architecture, webpack files, build process, etc for any project on their own from scratch which was quite a time-consuming and lengthy process. To make it easier for the developer, Angular team come up with the easy-to-use tool named Angular CLI. As the name suggests CLI (command line interface) provides a user (developer) friendly interface where you can run commands to make your development life easier and faster. Angular CLI comes with a number of commands available to use from creating a new project, to creating components, creating a routing configuration file, services, and many more.Installation Process of Angular CLITo install the Angular CLI on your machine, open the terminal window and run the following command: npm install -g @angular/cli where -g denotes that CLI is being installed globally to your machine, which means you can create or run any command of CLI anywhere on your machine. Once you run the above command CLI will be installed on your machine, and you can verify the version installed using the following command: ng version To know more about Angular CLI commands, you can refer to this blog which contains a number of commands to use. Creating a Project using Angular CLINow, let’s create our first ever Angular project using Angular CLI. Open your terminal window and type the command below on your machine.ng new hello-world Here ng is our CLI prefix, new denotes that we are creating a new project and hello-world is our project name. You can choose any name you want.After running this command you will find the full architecture of the project in the directory where you run this command. The project folder will be something like below in the image -Angular Project architecture The first file to render on running this application will be index.html which present in the src folder. src folder contains Source files for the root-level application project. assets folder contains all the static assets like images, fonts, etc. node_modules This folder is created while you run npm installby package manager (npm) and it contains all the project dependencies or any third party modules required for the project.  e2e folder contains all the source code related to Test Cases.You can customise it as per your requirements. README.md file is being used as documentation for the app. Package.json configures npm dependencies which are available for the project in the workspace along with their versions specified.  For more details about components/Service and source code you can explore this link. Run the application  one with the installation process of Angular application via CLI, it’s time to run the application locally. Angular CLI comes with complete tool-chain/commands for the development of front-end applications on your machine.Run the following command on the terminal (Navigate to the project directory if you are not in that directory).ng serve or ng serve --open The --open (or just -o) option automatically opens your browser to http://localhost:4200/. ng servecommand will serve your application on localhost server which you can check by navigating to your browser with the below URL http://localhost:4200/. You can customise the port as per your requirement. Accessing Angular Web Interfaceng serve command may take a few seconds to run your application, and once completed, you should see a web page similar to the following. And we are done!Now you can make changes in the default component’s template which is app.component.html .Also, moving forward, you can generate a number of components/service/routing files using CLI commands as per your requirements and keep learning.ConclusionIn this blog you have learnt - What is Node/NPM and how you can install and use it,  What is Angular CLI and how you can use it after installing it on your Windows machine, How to create a new Angular project from scratch using CLI commands and run it. Now that you have basic hands-on knowledge of getting started with an Angular application, you can start exploring Angular further. If you have any questions/doubts related to this blog, please let us know in the comment box below...we would be more than happy to help you out! Uninstall angular cliThere are cases when you need to uninstall Angular-CLI from your operating system, you can simply do so by running this below command on terminal -  npm uninstall -g @angular/cli It's always recommended to run the command  npm cache clean After un installation of Angular CLI from your system in order to avoid unwanted errors while installing it again. 
How to Install Angular on Windows
Blogs
9585
How to Install Angular on Windows

In this article, you will learn how you can instal... Read More