{"id":15308,"date":"2022-02-16T08:41:04","date_gmt":"2022-02-16T08:41:04","guid":{"rendered":"https:\/\/linuxways.net\/?p=15308"},"modified":"2022-02-16T08:41:04","modified_gmt":"2022-02-16T08:41:04","slug":"how-to-install-angularjs-in-ubuntu-20-04-22-04","status":"publish","type":"post","link":"https:\/\/linuxways.net\/de\/ubuntu\/how-to-install-angularjs-in-ubuntu-20-04-22-04\/","title":{"rendered":"How to Install AngularJS in Ubuntu 20.04\/22.04"},"content":{"rendered":"<p>Javascript is a popular scripting language used to develop both frontend and backend applications. To make work of developing applications easier, Javascript frameworks were developed. The frameworks are collections of Javascript libraries that provide programmers with pre-written code for routine programming tasks. Frameworks are particularly beneficial for less experienced developers who are still learning the ropes in development. It allows them to develop clean and efficient code. Simply put, it helps save time and effort in developing applications.<\/p>\n<p>One of most popular Javascript frameworks is Angular JS. This a modern Javascript framework initially developed by Misko Hevery and Adam Abrons, and later acquired and maintained by Google. It is a stable and superb framework for developing high-quality and dynamic applications. In this guide, we explore the installation of Angular JS on Ubuntu Focal Fossa ( Ubuntu 20.04 )<\/p>\n<h2><strong>Step 1: Update Ubuntu<\/strong><\/h2>\n<p>Straight off the bat, log in to your instance and update the package index as follows.<\/p>\n<pre><strong>$ sudo apt update<\/strong><\/pre>\n<p>With the package index updated, proceed to the next step.<\/p>\n<h2><strong>Step 2: Install NodeJS on Ubuntu<\/strong><\/h2>\n<p>Angular is a JavaScript framework. We therefore need to install the Javascript runtime environment on Ubuntu 20.04. Be sure that curl utility is installed as follows. If you already have curl installed, you can ignore this step.<\/p>\n<pre><strong>$ sudo apt install -y curl<\/strong><\/pre>\n<p>After that, download node setup from source using the following script. Execute the command:<\/p>\n<pre><strong>$ curl -fsSL https:\/\/deb.nodesource.com\/setup_16.x | sudo -E bash -<\/strong><\/pre>\n<p>After this, install nodeJS as shown:<\/p>\n<pre><strong>$ sudo apt install -y nodejs<\/strong><\/pre>\n<p>Thereafter, execute the command shown to install the latest version of npm.<\/p>\n<pre><strong>$ sudo npm install npm@latest -g<\/strong><\/pre>\n<p>Confirm the npm and node are installed with the command:<\/p>\n<pre><strong> $ npm -v<\/strong><\/pre>\n<pre><strong> $ node -v<\/strong><\/pre>\n<p><strong><img loading=\"lazy\" decoding=\"async\" width=\"686\" height=\"154\" class=\"wp-image-15309\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-477.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-477.png 686w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-477-300x67.png 300w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/strong><\/p>\n<h2><strong>Step 3: Install AngularJS <\/strong><\/h2>\n<p>With npm is installed, we can proceed to install AngularJS on Ubuntu using then npm command:<\/p>\n<pre><strong>$ sudo npm install -g @angular\/cli<\/strong><\/pre>\n<p>The installation will take a few minutes to complete. Once done , check the version of AngularJS as follows:<\/p>\n<pre><strong>$ ng version<\/strong><\/pre>\n<p><strong><img loading=\"lazy\" decoding=\"async\" width=\"862\" height=\"471\" class=\"wp-image-15310\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-478.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-478.png 862w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-478-300x164.png 300w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-478-768x420.png 768w\" sizes=\"auto, (max-width: 862px) 100vw, 862px\" \/><\/strong><\/p>\n<p>The above Angular CLI will be displayed.<\/p>\n<h2><strong>Step 4: Create Angular Application<\/strong><\/h2>\n<p>Now that Angular is successfully installed on the system, we can go ahead and create our first angular application. First, create an application with the command:<\/p>\n<pre><strong>$ ng new hello-world<\/strong><\/pre>\n<p>The above command creates a directory with the name hello-world that contains necessary files for an angular application.<\/p>\n<p>Next, navigate into the app you just created above:<\/p>\n<pre><strong>$ cd hello-world<\/strong><\/pre>\n<p>Next, run the following command to compile your application.<\/p>\n<pre><strong>$ ng serve<\/strong><\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1048\" height=\"361\" class=\"wp-image-15311\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-479.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-479.png 1048w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-479-300x103.png 300w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-479-1024x353.png 1024w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-479-768x265.png 768w\" sizes=\"auto, (max-width: 1048px) 100vw, 1048px\" \/><\/p>\n<p>By default, the ng serve command runs the application on port <strong> 4200<\/strong>. To access your application visit the url <a href=\"http:\/\/localhost:4200\"> http:\/\/localhost:4200<\/a>.<\/p>\n<p>You have successfully compiled and run an angular application.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1142\" height=\"764\" class=\"wp-image-15312\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-480.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-480.png 1142w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-480-300x201.png 300w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-480-1024x685.png 1024w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/02\/word-image-480-768x514.png 768w\" sizes=\"auto, (max-width: 1142px) 100vw, 1142px\" \/><\/p>\n<p>There is an option to specify the host and port on which to run your application. In this case, I want to run my application on host 0.0.0 and port 8000. Use the command below:<\/p>\n<pre><strong>$ ng serve --host 0.0.0.0 --port 8000<\/strong><\/pre>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>You can now develop web Applications using Angular on Ubuntu 22.04.<\/p>","protected":false},"excerpt":{"rendered":"<p>Javascript is a popular scripting language used to develop both frontend and backend applications. To make work of developing applications easier, Javascript frameworks were developed. The frameworks are&hellip;<\/p>","protected":false},"author":1,"featured_media":15318,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[907,892],"class_list":["post-15308","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ubuntu","tag-angular","tag-ubuntu-22-04"],"_links":{"self":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts\/15308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/comments?post=15308"}],"version-history":[{"count":0,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts\/15308\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/media\/15318"}],"wp:attachment":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/media?parent=15308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/categories?post=15308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/tags?post=15308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}