在AngularJS中，如何允许在localhost之外访问

在这篇文章中，我们将看到如何在AngularJS中允许本地主机以外的访问，同时通过例子了解基本的实现。首先，我们将讨论如何建立一个Angular应用程序，运行它，并在浏览器中预览它。我们可以使用Angular提供的CLI轻松做到这一点。CLI是一个命令行界面工具，使用它，开发人员在初始化应用程序、开发它、建立支架和有效维护它时面临的挑战就会减少。CLI并不总是需要在Angular中开发一个应用程序，但它肯定会给开发人员提供一个高质量的工具集，使代码更令人印象深刻，并节省时间。

CLI的亮点：

创建一个新的Angular应用程序。
运行一个支持LiveReload的开发服务器，在开发过程中预览你的应用程序。
为现有的Angular应用程序添加不同的功能。
运行应用程序的单元测试。
运行应用程序的端到端（E2E）测试。
构建应用程序以部署到生产中。

让我们建立我们的第一个Angular应用程序。一些先决条件如下。

Node.js 6.9.0
npm 3.0.0或更高版本

AngularJS的安装过程：我们将按照以下步骤来安装AngularJS。

要安装Angular CLI，在命令提示符下运行以下内容，这将在你的系统中安装Angular( ng ) __。

$ npm install -g @angular/cli

为了检查版本，我们将写下面的命令–

$ ng version

这将给出你所安装的版本。

@angular/cli: 1.0.0
node: 6.10.0
os: darwin x64

创建一个新的应用程序：要在开发服务器上构建并提供一个新的Angular项目，请进入新工作区的父目录并使用以下命令。

$ ng new my-first-Angular-application

这个ng new命令将在当前工作目录下创建一个新的文件夹，所有的源文件和新的Angular应用程序的目录都根据你指定的名称 “my-first-Angular-application “创建。npm的依赖性被安装。请注意，对于所有你想要创建的文件，你将能够在文件夹内创建它们。如果当前的工作目录不是你项目的正确位置，你可以通过运行cd将其改为其他目录。

要在浏览器中预览你的新应用程序，请导航到其目录。

$ cd my-first-Angular-application

运行下面的命令来渲染应用程序。

$ ng serve

在浏览器中，打开http://localhost:4200/，查看my-first-Angular-application的结果。当你使用ng serve命令来构建一个应用并在本地提供服务时，服务器会自动重建该应用，并在你改变任何源文件时重新加载页面。创建、构建和运行你的Angular应用程序就是这么简单。现在主要的问题出现了，为什么我们需要允许从外部访问localhost？_答案是通常我们作为开发者会根据自己的需要使用不止一台设备或电脑来运行我们的应用程序。这将使我们的工作更有效率，也可以节省大量的时间。要允许从外部访问localhost，只需对我们前面看到的ng serve注释进行简单修改。

$ ng serve --host 0.0.0.0

然后输入192.168.x.x:4200来获得另一台机器的访问权。x.x代表你的IP地址的最后两个点状十进制数字。否则，你可以简单地输入-

$ ng serve --host 192.168.X.X

如果你仍然不能访问192.168.X.X:4200，你可能是在一个防火墙保护开启的网络中。禁用该保护并再次检查。请参考Angular CLI | Angular项目设置文章，了解更多关于安装过程的详细说明。

例子：这个例子描述了在AngularJS中允许访问外部localhost。

<!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>

输出:

在AngularJS中，如何允许在localhost之外访问？