How to allow access outside localhost in AngularJS ?

Last Updated : 08 Nov, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we will see how to allow access outside the localhost in AngularJS, along with knowing the basic implementation through the example. Firstly, we will discuss how we can build an Angular application, run it, and preview it in the browser. We can easily do this using the CLI, provided by Angular. The CLI is a Command-line interface tool using which, the developers face fewer challenges to initialize an application, develop it, scaffold, and maintain it efficiently. CLI is not always required to develop an application in Angular but definitely it gives the developer a high-quality toolset to make the code more impressive and saves time.

Highlights on CLI:

  • Creating a new Angular application.
  • Running a development server with LiveReload support to preview your application during development.
  • Adding different features to the existing Angular application.
  • Running application’s unit tests.
  • Running application’s end-to-end (E2E) tests.
  • Building application for deployment to production.

Let us build our first Angular application. Some prerequisites are as follows:

  1. Node.js 6.9.0
  2. npm 3.0.0 or higher versions

Installation Process for AngularJS: We will follow the below steps to install the AngularJS.

  •  To install Angular CLI, run the following in the command prompt, this will install Angular(ng) in your system.
$ npm install -g @angular/cli
  • To check the version we will write the following command-
$ ng version
  • This will give the version you have installed.
@angular/cli: 1.0.0
node: 6.10.0
os: darwin x64

Creation of a new application: To build, and serve a new Angular project on a development server, go to the parent directory of your new workspace and use the following commands:

$ ng new my-first-Angular-application

This ng new command will create a new folder under the current working directory, all the source files and the directories for your new Angular application are created based on the name you specified "my-first-Angular-application". The npm dependencies are installed. Note that for all the files that you want to create, you will be able to create them inside the folder. If the current working directory is not the right place for your project, you can change it to another directory by running cd. 

  • To preview your new application in your browser, navigate to its directory:
$ cd my-first-Angular-application
  • Run the below command to render the application:
$ ng serve

In your browser, open http://localhost:4200/ to see the result of my-first-Angular-application. When you use the ng serve command to build an app and serve it locally, the server automatically rebuilds the app and reloads the page when you change any of the source files. Creating, building, and running your Angular application is as simple as that. Now the main question arises, why do we need to allow access to the localhost from outside? The answer is Often we as developers use more than one device or computer to run our application with respect to our needs. It will make our work efficient and also we can save a lot of time. To allow access of localhost from outside there is a simple modification to the ng serve comment which we have seen earlier.

$ ng serve --host 0.0.0.0

Then type 192.168.x.x:4200 to get access from another machine. x.x stands for the last two dotted decimal digits from your IP address. Else you can simply type-

$ ng serve --host 192.168.X.X

If you are still not able to access 192.168.X.X:4200, you may be in a network where firewall protection is ON. Disable the protection and check again. Please refer to the Angular CLI | Angular Project Setup article for further detailed descriptions of the installation process.

Example: This example describes allowing to access the outside localhost in AngularJS.

HTML 
<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: Arial;
            text-align: center;
        }
        h1 {
            color: green;
        }
    </style>
</head>

<body ng-app="app">
    <h1>GeeksforGeeks</h1>
    <h3>
        How to allow access outside 
        localhost in AngularJS ?
    </h3>
    <div ng-controller="geeks">
        Enter Text: <input ng-model="data" />
        <h4>{{data}}</h4>
    </div>

    <script>
        var app = angular.module("app", []);
        app.controller("geeks", function ($scope) {
            $scope.data = "GeeksforGeeks";
        });
    </script>
</body>
</html>

Output:

 

S
sahelibhattacharjee1
Improve
Article Tags :

Similar Reads