Angularjs – TecAdmin https://tecadmin.net How to guide for System Administrator's and Developers Tue, 26 Oct 2021 06:24:21 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.1 How to Install Angular CLI on macOS https://tecadmin.net/install-angular-on-macos/ https://tecadmin.net/install-angular-on-macos/#comments Sun, 04 Aug 2019 08:56:10 +0000 https://tecadmin.net/?p=18957 This tutorial will help you to install Angular.js on your macOS operating system via command line. You must need to install Homebrew package manager on your macOS. Step 1 – Prerequsities Let’s start the installation of Node.js on your macOS system using Homebrew. So first update the Homebrew package manager index. Then you can install [...]

The post How to Install Angular CLI on macOS appeared first on TecAdmin.

]]>
This tutorial will help you to install Angular.js on your macOS operating system via command line. You must need to install Homebrew package manager on your macOS.

Step 1 – Prerequsities

Let’s start the installation of Node.js on your macOS system using Homebrew. So first update the Homebrew package manager index. Then you can install Node.js package in your MacOS system using the following command:

brew update  
brew install node

You have successfully installed Node.js on your system. Execute below command on the terminal to view the installed Node.js version info.

node -v

v12.4.0

Step 2 – Install Angular/CLI on macOS

After installing the Node.js and npm on your system, use the following commands to install the Angular CLI tool on your system globally.

npm install -g @angular/cli

This command will install the latest available Angular CLI version on your macOS system. If you need any other Angular version on your macOS use one of the following commands as per required version.

npm install -g @angular/cli@6     #Angular 6
npm install -g @angular/cli@7     #Angular 7
npm install -g @angular/cli@8     #Angular 8
npm install -g @angular/cli@9     #Angular 9

Using the -g above command will install the Angular CLI tool globally. So it will be accessible to all users and applications on the system. Angular CLI provides a command ng used for command-line operations. Let’s check the installed version of ng on your system.

ng --version

install angularjs on macos

Step 3 – Create New Angular Application

Now, create a new application named hello-angular4 using the Angular CLI tools. Execute the commands to do this:

ng new hello-angular4

Output:

...
...
added 1011 packages from 1041 contributors and audited 19005 packages in 55.774s
found 0 vulnerabilities

    Successfully initialized git.

This will create a directory named hello-angular4 in your current directory, and create an application.

Step 4 – Serve Angular Application

Your basic Angular application is ready to serve. Change directory to hello-angular4 and run your Angular application using ng serve command.

cd hello-angular4
ng serve

You can access your angular application on localhost port 4200, Which is the default host and port used by Angular application.

  • http://localhost:4200


You can change host and port for running Angular application by providing –host and –port command line arguments.

ng serve --host 0.0.0.0 --port 8080

The IP address 0.0.0.0 listens on all interfaces and publically accessible.

The post How to Install Angular CLI on macOS appeared first on TecAdmin.

]]>
https://tecadmin.net/install-angular-on-macos/feed/ 3
How to Install Angular CLI on Debian 10/9/8 https://tecadmin.net/install-angular-on-debian/ https://tecadmin.net/install-angular-on-debian/#respond Fri, 19 Jul 2019 14:39:38 +0000 https://tecadmin.net/?p=18952 Angular is an frameworks, libraries, assets, and utilities. It keeps track of all the components and checks regularly for their updates. This tutorial will help you to install the Angular CLI tool on Debian 10 Buster, Debian 9 Stretch, and Debian 8 Linux systems. Reference: Serve Node.js Application behind the Apache Server Step 1 – [...]

The post How to Install Angular CLI on Debian 10/9/8 appeared first on TecAdmin.

]]>
Angular is an frameworks, libraries, assets, and utilities. It keeps track of all the components and checks regularly for their updates. This tutorial will help you to install the Angular CLI tool on Debian 10 Buster, Debian 9 Stretch, and Debian 8 Linux systems.

Reference: Serve Node.js Application behind the Apache Server

Step 1 – Install Node.js

First of all, you need to install node.js on your system. Use the following commands to configure node.js PPA in your Debian system and install it.

sudo apt-get install software-properties-common
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install nodejs

Make sure you have successfully installed node.js and NPM on your system

node --version
npm --version

Step 2 – Install Angular/CLI on Debian

After finishing the Node.js installation on your system, use the following commands to install the Angular CLI tool on your system globally.

npm install -g @angular/cli

The above command will install the latest available Angular CLI version on your Debian system. To install specific Angular version run command as following with version number.

npm install -g @angular/cli@6     #Angular 6
npm install -g @angular/cli@7     #Angular 7
npm install -g @angular/cli@8     #Angular 8
npm install -g @angular/cli@9     #Angular 9

Using the -g above command will install the Angular CLI tool globally. So it will be accessible to all users and applications on the system. Angular CLI provides a command ng used for command-line operations. Let’s check the installed version of ng on your system.

ng --version


    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.1.3
Node: 12.7.0
OS: linux x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.801.3
@angular-devkit/core         8.1.3
@angular-devkit/schematics   8.1.3
@schematics/angular          8.1.3
@schematics/update           0.801.3
rxjs                         6.4.0

Step 3 – Create New Angular Application

Now, create a new application named hello-angular4 using the Angular CLI tools. Execute the commands to do this:

ng new hello-angular4

Output:

...
...
added 1011 packages from 1041 contributors and audited 19005 packages in 55.774s
found 0 vulnerabilities

    Successfully initialized git.

This will create a directory named hello-angular4 in your current directory, and create an application.

Step 4 – Serve Angular Application

Your basic Angular application is ready to serve. Change directory to hello-angular4 and run your Angular application using ng serve command.

cd hello-angular4
ng serve

Install Angular on Ubuntu

You can access your angular application on localhost port 4200, Which is the default host and port used by Angular application.

  • http://localhost:4200

You can change host and port for running Angular application by providing –host and –port command line arguments.

ng serve --host 0.0.0.0 --port 8080

The IP address 0.0.0.0 listens on all interfaces and publically accessible.

Conclusion

You have successfully installed Angular CLI and created a sample application. The next tutorial will help you to configure the Angular application behind the Apache server to serve with a domain name.

The post How to Install Angular CLI on Debian 10/9/8 appeared first on TecAdmin.

]]>
https://tecadmin.net/install-angular-on-debian/feed/ 0
How to Install Angular CLI on CentOS/RHEL 8/7/6 https://tecadmin.net/install-angular-cli-on-centos/ https://tecadmin.net/install-angular-cli-on-centos/#comments Sat, 22 Jun 2019 04:58:35 +0000 https://tecadmin.net/?p=18779 Angular is an frameworks, libraries, assets, and utilities. It keeps track of all the components and checks regularly for their updates. This tutorial will help you to install the Angular CLI tool on CentOS 8/7/6 and RHEL 8/7/6 Linux operating systems. Step 1 – Install Node.js First of all, you need to install node.js on [...]

The post How to Install Angular CLI on CentOS/RHEL 8/7/6 appeared first on TecAdmin.

]]>
Angular is an frameworks, libraries, assets, and utilities. It keeps track of all the components and checks regularly for their updates. This tutorial will help you to install the Angular CLI tool on CentOS 8/7/6 and RHEL 8/7/6 Linux operating systems.

Step 1 – Install Node.js

First of all, you need to install node.js on your system. Use the following set of commands to configure node.js yum repository in your CentOS system and install it.

curl -sL https://rpm.nodesource.com/setup_12.x | sudo -E bash -
sudo yum install nodejs

Make sure you have successfully installed node.js and NPM on your system

node --version
npm --version

Step 2 – Install Angular/CLI

After installation of node.js and npm on your system, use the following commands to install the Angular CLI tool on your system.

npm install -g @angular/cli

This will install the latest available Angular CLI version on your system. To install specific Angular version run command as following with version number.

npm install -g @angular/cli@6     #Angular 6
npm install -g @angular/cli@7     #Angular 7
npm install -g @angular/cli@8     #Angular 8
npm install -g @angular/cli@9     #Angular 9

Using the -g above command will install the Angular CLI tool globally. So it will be accessible to all users and applications on the system. Angular CLI provides a command ng used for command-line operations. Let’s check the installed version of ng on your system.

ng --version



    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.0.7
Node: 12.16.1
OS: linux x64

Angular:
...
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.7
@angular-devkit/core         9.0.7
@angular-devkit/schematics   9.0.7
@schematics/angular          9.0.7
@schematics/update           0.900.7
rxjs                         6.5.3

Step 3 – Create New Angular Application

Now, create a new application named hello-angular4 using the Angular CLI tools. Execute the commands to do this:

ng new hello-angular

Output:

...
...
added 1011 packages from 1041 contributors and audited 19005 packages in 55.774s
found 0 vulnerabilities

    Successfully initialized git.

This will create a directory named hello-angular4 in your current directory, and create an application.

Step 4 – Serve Angular Application

Your basic Angular application is ready to serve. Change directory to hello-angular4 and run your Angular application using ng serve command.

cd hello-angular
ng serve

You can access your angular application on localhost port 4200, Which is the default host and port used by Angular application.

  • http://localhost:4200

You can change host and port for running Angular application by providing –host and –port command line arguments.

ng serve --host 0.0.0.0 --port 8080

The IP address 0.0.0.0 listens on all interfaces and publically accessible.

The post How to Install Angular CLI on CentOS/RHEL 8/7/6 appeared first on TecAdmin.

]]>
https://tecadmin.net/install-angular-cli-on-centos/feed/ 3
How to Install Angular CLI on Ubuntu 18.04 & 16.04 https://tecadmin.net/install-angular-on-ubuntu/ https://tecadmin.net/install-angular-on-ubuntu/#comments Fri, 07 Jun 2019 10:43:32 +0000 https://tecadmin.net/?p=15510 Angular is an frameworks, libraries, assets, and utilities. It keeps track of all the components and checks regularly for their updates. This tutorial will help you to install the Angular CLI tool on Ubuntu 19.10, 18.04 & 16.04 Linux operating systems. Reference: Serve Node.js Application behind the Apache Server Step 1 – Install Node.js First [...]

The post How to Install Angular CLI on Ubuntu 18.04 & 16.04 appeared first on TecAdmin.

]]>
Angular is an frameworks, libraries, assets, and utilities. It keeps track of all the components and checks regularly for their updates. This tutorial will help you to install the Angular CLI tool on Ubuntu 19.10, 18.04 & 16.04 Linux operating systems.

Reference: Serve Node.js Application behind the Apache Server

Step 1 – Install Node.js

First of all, you need to install node.js on your system. If you don’t have node.js installed use the following set of commands to add node.js PPA in your Ubuntu system and install it.

sudo apt install python-software-properties
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install nodejs

Make sure you have successfully installed node.js and NPM on your system

node --version
npm --version

Step 2 – Install Angular/CLI

After installation of node.js and npm on your system, use following commands to install Angular cli tool on your system.

npm install -g @angular/cli

The latest version of Angular CLI will be installed on your Ubuntu Linux system. You may require older Angular version on your machine. To install specific Angular version run command as following with version number.

npm install -g @angular/cli@10        #Angular 10
npm install -g @angular/cli@11        #Angular 11
npm install -g @angular/cli@12        #Angular 12

Using the -g above command will install the Angular CLI tool globally. So it will be accessible to all users and applications on the system. Angular CLI provides a command ng used for command-line operations. Let’s check the installed version of ng on your system.

ng --version


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.2.11
Node: 14.15.3
Package Manager: npm 6.14.9
OS: linux x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1202.11 (cli-only)
@angular-devkit/core         12.2.11 (cli-only)
@angular-devkit/schematics   12.2.11 (cli-only)
@schematics/angular          12.2.11 (cli-only)

Step 3 – Create a New Angular Application

Now, create a new application named hello-angular4 using the Angular CLI tools. Execute the commands to do this:

ng new hello-angular

Output:

...
...
✔ Packages installed successfully.
    Successfully initialized git.

This will create a directory named hello-angular in your current directory, and create an application.

Step 4 – Serve Angular Application

Your basic Angular application is ready to serve. Change directory to hello-angular4 and run your Angular application using ng serve command.

cd hello-angular
ng serve

Install Angular on Ubuntu

You can access your angular application on localhost port 4200, Which is the default host and port used by Angular application.

  • http://localhost:4200

You can change the host and port for running the Angular applications by providing --host and --port command line arguments.

ng serve --host 0.0.0.0 --port 8080

The IP address 0.0.0.0 listens on all interfaces and is publically accessible.

Conclusion

You have successfully installed Angular CLI and created a sample application. The next tutorial will help you to configure the Angular application behind the Apache server to serve with a domain name.

The post How to Install Angular CLI on Ubuntu 18.04 & 16.04 appeared first on TecAdmin.

]]>
https://tecadmin.net/install-angular-on-ubuntu/feed/ 9
Useful Examples of AngularJs https://tecadmin.net/useful-examples-angularjs/ https://tecadmin.net/useful-examples-angularjs/#respond Sat, 11 Mar 2017 15:08:39 +0000 https://tecadmin.net/?p=11698 AngularJs is an most popular JavaScript framework developed by Google Inc. Given the immense support that Angular gets from Google and developers all over the world, Angular 2 and Angular 3 could easily be your top choice for developing client-side web apps. This tutorial will provides you number of examples written with AngularJs. Here is [...]

The post Useful Examples of AngularJs appeared first on TecAdmin.

]]>
AngularJs is an most popular JavaScript framework developed by Google Inc. Given the immense support that Angular gets from Google and developers all over the world, Angular 2 and Angular 3 could easily be your top choice for developing client-side web apps. This tutorial will provides you number of examples written with AngularJs.

Here is simple hello example with AngularJs. To use AngularJs in your project, you just need to add reference of single angular JavaScript file. You can simply download script and host on your host or directly use Google cdn like below example.

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Type Your Name : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

View Running Example:

Type Your Name :

Hello {{name}}

The post Useful Examples of AngularJs appeared first on TecAdmin.

]]>
https://tecadmin.net/useful-examples-angularjs/feed/ 0