ionic-framework 在浏览器中测试

示例

使用ionic serve开始为应用开发和测试的本地开发服务器。这对于桌面浏览器测试以及在连接到同一网络的设备浏览器中进行测试都是很有用的。此外，此命令将启动LiveReload，该LiveReload用于监视文件系统中的更改。保存文件后，浏览器将自动刷新。如果您还希望ionic serve观看项目的Sass文件，请查看Sass文档。

$ ionic serve [options]

对于chrome浏览器，您可以检查设备（AVD或移动设备），在chrome浏览器的地址栏中键入以下命令。

chrome://inspect/#devices

LiveReload

默认情况下，LiveReload将监视www/目录中的更改（不包括）www/lib/。要更改此设置，可以在项目根目录下watchPatterns的ionic.project文件中指定一个属性，以监视（或不监视）特定更改。

{
  "name": "myApp",
  "app_id": "",
  "watchPatterns": [
    "www/js/*",
    "!www/css/**/*"
  ]
}

有关glob模式语法的参考，请在Grunt网站上查看glob模式。

注意：

$ ionic setup sass

除了Sass文档中所述的属性外，还将在watchPatterns您的ionic.project文件中添加一个具有默认值的gulpStartupTasks属性，然后您可以编辑该属性。

离子实验室

离子实验室http://ionicframework.com/img/blog/lab.png

Ionic Lab的一项重要功能是ionic serve，可以轻松在手机框架中并排与iOS和Android平台一起测试您的应用程序。要使用它，只需运行

$ ionic serve --lab

阅读完整的发行公告以获取所有详细信息！

指定要使用的IP地址

假设您要指定浏览器将连接到的地址，例如用于测试或外部用户。用--address参数指定地址。

$ ionic serve --address 68.54.96.105

服务代理

该serve命令可以将一些代理添加到http服务器。如果您正在浏览器中进行开发并且需要调用外部API，则这些代理很有用。使用此功能，您可以通过ionic http服务器将请求代理到外部api，以防止出现No 'Access-Control-Allow-Origin' header is present on the requested resource错误。

在ionic.project文件中，您可以添加带有要添加的代理数组的属性。代理是具有两个属性的对象：

• path：将与传入请求URL的开头匹配的字符串。

• proxyUrl：一个字符串，其中包含代理请求应该到达的URL。

{
  "name": "appname",
  "email": "",
  "app_id": "",
  "proxies": [
    {
      "path": "/v1",
      "proxyUrl": "https://api.instagram.com/v1"
    }
  ]
}

使用上述配置，您现在可以向您的本地服务器发出请求，以使其将请求http://localhost:8100/v1代理到https://api.instagram.com/v1

例如：

angular.module('starter.controllers', [])
.constant('InstagramApiUrl', '')
// .constant('InstagramApiUrl','https://api.instagram.com')
//在生产中，将其设为真实网址

.controller('FeedCtrl', function($scope, $http, InstagramApiUrl) {

  $scope.feed = null;

  $http.get(InstagramApiUrl + '/v1/media/search?client_id=1&lat=48&lng=2.294351').then(function(data) {
    console.log('data ' , data)
    $scope.feed = data;
  })

})

另请参阅本要点以获取更多帮助。

命令行标志/选项

[--consolelogs|-c] ......  Print app console logs to Ionic CLI
[--serverlogs|-s] .......  Print dev server logs to Ionic CLI
[--port|-p] .............  Dev server HTTP port (8100 default)
[--livereload-port|-i] ..  Live Reload port (35729 default)
[--nobrowser|-b] ........  Disable launching a browser
[--nolivereload|-r] .....  Do not start live reload
[--noproxy|-x] ..........  Do not add proxies