How to allow access outside localhost in AngularJS ?
Last Updated :
08 Nov, 2022
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:
- Node.js 6.9.0
- 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:
Â
Similar Reads
How to Access Localhost on Mobile Browsers?
Accessing localhost on a mobile browser is a useful skill for developers who need to test and debug their web applications on different devices. Whether you're developing a responsive website or a mobile app, being able to view localhost from your smartphone can significantly streamline your testing
3 min read
How to access the value of a Promise in AngularJS ?
AngularJS is one of the JS frameworks that consists of promises that are used to handle asynchronous tasks. In some scenarios, we need to handle the promise values by accessing them in the application. So, this can be done using the .then() method and also by using the callbacks in AngularJS. In thi
4 min read
How to access the Scope from outside JS Function in AngularJS ?
In the AngularJS application, we generally need to access the scope from the outside JS function. This can be done using the global scope object like $rootScope or the AngularJS services. Accessing the scope from the outside of JS functions is to enable the manipulation of data in the scope of the a
4 min read
How to access cookies in AngularJS?
AngularJS is the most useful framework for developing dynamic web applications. While developing the applications, we need to store and access the cookies for many other functionalities like retiring the user details, etc. Cookies are nothing but the data that is usually stored in the client's brows
5 min read
How to Store Data in Local Storage using AngularJS ?
Angular JS is a typescript-based web application framework. It is supported by the Angular team of Google and open-source developers. It is a component-based framework allowing the developers to reuse the components created. It is well-suited for large and complex applications because of its well-de
5 min read
How to call an AngularJS Function inside HTML ?
A Function is a set of statements that takes input, does some specific computation, and produces output. In this article, we will learn How to Call an AngularJS function inside HTML. To achieve this, we can use {{...}} to call the function from HTML. We can also pass arguments and return the result
3 min read
How to Install and Configure WordPress on Localhost?
WordPress is a popular and open-source content management system that allows users to create and manage websites easily. Installing WordPress on a localhost environment is useful for development, testing, testing and learning purposes without affecting a live website. It can be done using various ap
4 min read
How to make a Bootstrap Modal Popup in Angular 9/8 ?
In this article, we will see how to use the modal popup component of bootstrap in the Angular application. The addition of bootstrap in our Angular project is an easy process. The modal dialog box can be used to restrict the user to perform particular actions before they return to their normal use o
3 min read
How to Enable HTTPS for Localhost ?
Enabling HTTPS for localhost in your Node.js development environment involves generating SSL certificates and configuring your Node.js server to use them. HTTPS which stands for Hypertext Transfer Protocol Secure adds a layer of security to communication over the Internet. By running a HTTPS server
3 min read
Angular Cheat Sheet - A Basic Guide to Angular
Angular is a client-side TypeScript-based, front-end web framework developed by the Angular Team at Google, that is mainly used to develop scalable single-page web applications(SPAs) for mobile & desktop. Angular is a great, reusable UI (User Interface) library for developers that helps in build
15+ min read