ionic-framework
एक ब्राउज़र में Ionic ऐप का परीक्षण

टिप्पणियों

cd src
mkdir mocks 
cd mocks 
touch camera-mock.ts 

export class CameraMock {
    getPicture(params) {
        return new Promise((resolve, reject) => {
            resolve("BASE_64_IMAGE_DATA");
        });
    }
}

import { CameraMock } from "../mocks/camera-mock";

@NgModule({
declarations: [
    MyApp,
    HomePage
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    CameraMock,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

एक ब्राउज़र में परीक्षण

ऐप देव और परीक्षण के लिए एक स्थानीय विकास सर्वर शुरू ionic serve लिए ionic serve का उपयोग करें। यह दोनों डेस्कटॉप ब्राउज़र परीक्षण के लिए उपयोगी है, और एक डिवाइस ब्राउज़र के भीतर परीक्षण करने के लिए जो एक ही नेटवर्क से जुड़ा हुआ है। इसके अतिरिक्त, यह कमांड LiveReload को शुरू करता है जिसका उपयोग फाइल सिस्टम में परिवर्तन की निगरानी के लिए किया जाता है। जैसे ही आप किसी फाइल को सेव करते हैं ब्राउजर अपने आप रिफ्रेश हो जाता है। सास डॉक्स पर एक नज़र डालें यदि आप भी प्रोजेक्ट की सैस फ़ाइलों को देखने के लिए ionic serve करना चाहते हैं।

$ ionic serve [options]

क्रोम ब्राउजर के लिए आप डिवाइस (एवीडी या मोबाइल्स) का निरीक्षण कर सकते हैं, क्रोम ब्राउजर के एड्रेस बार में निम्न कमांड टाइप कर सकते हैं।

chrome://inspect/#devices  

LiveReload

डिफ़ॉल्ट रूप से, LiveReload www/lib/ को छोड़कर आपके www/ निर्देशिका में परिवर्तन के लिए देखेगा। इसे बदलने के लिए, आप अपने प्रोजेक्ट रूट में स्थित ionic.project फ़ाइल में एक watchPatterns प्रॉपर्टी को विशिष्ट परिवर्तनों के लिए देखने (या न देखने) के लिए निर्दिष्ट कर सकते हैं।

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

ग्लोब पैटर्न सिंटैक्स पर एक संदर्भ के लिए, ग्रंट वेबसाइट पर ग्लोबिंग पैटर्न देखें ।

ध्यान दें:

$ ionic setup sass

Sass डॉक्यूमेंटेशन में बताए गए gulpStartupTasks प्रॉपर्टी के अलावा आप अपने ionic.project फ़ाइल के डिफ़ॉल्ट मानों के साथ एक watchPatterns को जोड़ सकते हैं।

आयोनिक लैब

आयनिक लैब http://ionicframework.com/img/blog/lab.png

आयनिक लैब ionic serve शीर्ष पर एक विशेषता है जो आपके ऐप को फोन फ्रेम में और आईओएस और एंड्रॉइड प्लेटफार्मों के साथ-साथ परीक्षण करना आसान बनाता है। इसका उपयोग करने के लिए, बस चलाएं

$ ionic serve --lab

सभी विवरणों के लिए पूर्ण रिलीज की घोषणा पढ़ें!

उपयोग करने के लिए एक आईपी पता निर्दिष्ट करना

कहो कि आप निर्दिष्ट करना चाहते हैं कि आपका ब्राउज़र किस पते से कनेक्ट होगा, परीक्षण या बाहरी उपयोगकर्ताओं के लिए कहेंगे। पते को --address तर्क के साथ निर्दिष्ट करें।

$ ionic serve --address 68.54.96.105

सेवा प्रॉक्सी

serve कमांड http सर्वर पर कुछ परदे के पीछे जोड़ सकता है। यदि आप ब्राउज़र में विकास कर रहे हैं और आपको बाहरी API पर कॉल करने की आवश्यकता है, तो ये प्रॉक्सी उपयोगी हैं। इस सुविधा के साथ आप आयनिक http सर्वर के माध्यम से बाहरी एपीआई के लिए प्रॉक्सी अनुरोध कर सकते हैं, जो No 'Access-Control-Allow-Origin' header is present on the requested resource रोकने के No 'Access-Control-Allow-Origin' header is present on the requested resource त्रुटि No 'Access-Control-Allow-Origin' header is present on the requested resource ।

ionic.project फ़ाइल में आप एक ऐसी संपत्ति जोड़ सकते हैं जिसमें आप जिस परदे के पीछे जोड़ना चाहते हैं। समीपता दो गुणों वाली वस्तु है:

• path : स्ट्रिंग जो आने वाले अनुरोध URL की शुरुआत के साथ मिलान किया जाएगा।
• proxyUrl : प्रॉक्सी के अनुरोध पर जहां जाना चाहिए, उसके यूआरएल के साथ एक स्ट्रिंग।

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

उपरोक्त कॉन्फ़िगरेशन का उपयोग करके, आप अब http://localhost:8100/v1 पर अपने स्थानीय सर्वर से अनुरोध कर सकते हैं कि वह https://api.instagram.com/v1 प्रॉक्सी का अनुरोध https://api.instagram.com/v1

उदाहरण के लिए:

angular.module('starter.controllers', [])
.constant('InstagramApiUrl', '')
// .constant('InstagramApiUrl','https://api.instagram.com')
//In production, make this the real URL

.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