{"id":2486,"date":"2017-01-06T15:00:00","date_gmt":"2017-01-06T15:00:00","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=2486"},"modified":"2025-06-13T20:52:48","modified_gmt":"2025-06-14T03:52:48","slug":"key-value-operations-in-couchbase-mobile-via-nativescript-and-angular","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/","title":{"rendered":"Key-Value Operations in Couchbase Mobile via NativeScript and Angular"},"content":{"rendered":"<p>I&#8217;m a huge fan of mobile Android and iOS application development and an even bigger fan of using Angular to develop those applications. A while back I wrote about <a href=\"https:\/\/www.couchbase.com\/blog\/couchbase-mobile-in-a-cross-platform-telerik-nativescript-app\/\">using Couchbase in a NativeScript application<\/a> as well as <a href=\"https:\/\/www.thepolyglotdeveloper.com\/2016\/05\/using-couchbase-nosql-nativescript-angular-2-mobile-app\/\">using Couchbase in a NativeScript Angular application<\/a>. Both were very simple todo-list scenarios.<\/p>\n<p>We&#8217;re going to take a step back and break down what <a href=\"https:\/\/www.couchbase.com\">Couchbase<\/a> can do in your mobile application piece by piece. For example, Couchbase is a document database that can be managed as key-value or by the document properties. In this example we&#8217;re going to work with keys and values to save and load imaginary profile data.<\/p>\n<div class=\"figure\">\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10313\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2017\/01\/nativescript-couchbase-profile.gif\" alt=\"\" width=\"1024\" height=\"709\" \/><\/p>\n<p>In the above example we can add a first an last name and choose from a list of available profile avatars. When saving, the data is stored in Couchbase, and the screen is reset. When loading, the data is loaded via the previously saved key.<\/p>\n<\/div>\n<h2 id=\"the-requirements\">The Requirements<\/h2>\n<p>This project has a few basic requirements in order to function:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.nativescript.org\">NativeScript<\/a> CLI 2.0+<\/li>\n<li>Android SDK and \/ or Xcode<\/li>\n<\/ul>\n<p>The NativeScript CLI, obtainable through the Node Package Manager (NPM) is required for creating and building projects. To complete the building process, either the Android SDK or Xcode is required, depending on which platform you wish to build for.<\/p>\n<h2 id=\"starting-a-new-nativescript-with-angular-project\">Starting a New NativeScript with Angular Project<\/h2>\n<p>To keep things easy to understand, we&#8217;re going to create a fresh NativeScript with Angular project for Android and iOS. From the command line, execute the following:<\/p>\n<pre><code>tns create ProfileProject --ng\r\ncd ProfileProject\r\ntns platform add ios\r\ntns platform add android<\/code><\/pre>\n<p>If you&#8217;re not using a Mac with Xcode installed, you can only build for the Android platform. iOS is a Mac only thing.<\/p>\n<p>This project will be using Couchbase, so we must install the <a href=\"https:\/\/github.com\/couchbaselabs\/nativescript-couchbase\">nativescript-couchbase<\/a> plugin. From the CLI, execute:<\/p>\n<pre><code>tns plugin add nativescript-couchbase<\/code><\/pre>\n<p>The above command will install the Couchbase plugin for whatever platforms are available in the project. At this point we are ready for the development of our application.<\/p>\n<h2 id=\"defining-the-core-application-logic\">Defining the Core Application Logic<\/h2>\n<p>The project, while single page, will have two core pieces of application logic. There will be the logic that appears on the default page and the logic that appears in the modal dialog. We&#8217;re going to start with the logic that appears in the default page.<\/p>\n<p>Open the project&#8217;s <strong>app\/app.component.ts<\/strong> file and include the following:<\/p>\n<pre><code>import { Component, ViewContainerRef } from \"@angular\/core\";\r\nimport { ModalDialogService } from \"nativescript-angular\/directives\/dialogs\";\r\nimport { Couchbase } from \"nativescript-couchbase\";\r\nimport { ModalComponent } from \".\/app.modal\";\r\n\r\n@Component({\r\n    selector: \"my-app\",\r\n    templateUrl: \"app.component.html\",\r\n})\r\nexport class AppComponent {\r\n\r\n    public profile: any;\r\n    private database: any;\r\n\r\n    public constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef) { }\r\n\r\n    public showModal(fullscreen: boolean) { }\r\n\r\n    public save() { }\r\n\r\n    public load() { }\r\n\r\n}<\/code><\/pre>\n<p>In the above code we are importing various Angular components, the NativeScript modal service, Couchbase, and the soon to be created modal dialog.<\/p>\n<p>Within the <code>AppComponent<\/code> class there is a public and private variable. The private <code>database<\/code> variable will hold the open Couchbase instance and the public <code>profile<\/code> variable will hold information such as person name and profile picture.<\/p>\n<p>The <code>constructor<\/code> method will inject both the <code>ModalDialogService<\/code> and <code>ViewContainerRef<\/code> services to be used throughout the page.<\/p>\n<pre><code>public constructor(private modal: ModalDialogService, private vcRef: ViewContainerRef) {\r\n    this.profile = {\r\n        photo: \"~\/kitten1.jpg\",\r\n        firstname: \"\",\r\n        lastname: \"\"\r\n    }\r\n    this.database = new Couchbase(\"data\");\r\n}<\/code><\/pre>\n<p>In addition we&#8217;ll be initializing the <code>profile<\/code> variable and opening a database called <code>data<\/code>. You might notice <strong>~\/kitten1.jpg<\/strong> and be wondering what it is.<\/p>\n<p>In this application we have a few avatars available to us called <strong>kitten1.jpg<\/strong>, <strong>kitten2.jpg<\/strong>, and <strong>kitten3.jpg<\/strong> all found within the project&#8217;s <strong>app<\/strong> directory.<\/p>\n<div class=\"figure\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2613 size-full\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2017\/01\/cb-nativescript-kitten-pictures-1.jpg\" alt=\"NativeScript Couchbase Kittens\" width=\"768\" height=\"256\" srcset=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2017\/01\/cb-nativescript-kitten-pictures-1.jpg 768w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2017\/01\/cb-nativescript-kitten-pictures-1-300x100.jpg 300w, https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2017\/01\/cb-nativescript-kitten-pictures-1-20x7.jpg 20w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/div>\n<p>I didn&#8217;t take these pictures, but instead found them on the internet. Feel free to use whatever images you&#8217;d like for this example.<\/p>\n<p>The <code>profile.photo<\/code> property will hold the path to the photo we wish to use.<\/p>\n<pre><code>public save() {\r\n    let document = this.database.getDocument(\"mydockey\");\r\n    if(document) {\r\n        this.database.updateDocument(\"mydockey\", this.profile);\r\n    } else {\r\n        this.database.createDocument(this.profile, 'mydockey');\r\n    }\r\n    this.profile = {\r\n        photo: \"~\/kitten1.jpg\",\r\n        firstname: \"\",\r\n        lastname: \"\"\r\n    }\r\n}<\/code><\/pre>\n<p>When we wish to save to Couchbase, we first want to see if the document already exists in Couchbase. Remember this is a single page single profile application. If the document exists we need to update the document with whatever is in the <code>profile<\/code> variable, otherwise create it. Once saved we can reset the form.<\/p>\n<pre><code>public load() {\r\n    this.profile = this.database.getDocument(\"mydockey\");\r\n}<\/code><\/pre>\n<p>Since we know the name of the document key, we can retrieve the document when we wish to reload the form. The data stored and the data retrieved are both in JSON format, which is great for NativeScript applications.<\/p>\n<p>Finally we have the <code>showModal<\/code> method:<\/p>\n<pre class=\"lang:default decode:true \">public showModal(fullscreen: boolean) {\r\n    let options = {\r\n        context: { promptMsg: \"Pick your avatar!\" },\r\n        fullscreen: fullscreen,\r\n        viewContainerRef: this.vcRef\r\n    };\r\n    this.modal.showModal(ModalComponent, options).then((res: string) =&gt; {\r\n        this.profile.photo = res || \"~\/kitten1.jpg\";\r\n    });\r\n}<\/pre>\n<p>The above is a variation of something I found in the <a href=\"https:\/\/github.com\/NativeScript\/nativescript-angular\/blob\/master\/ng-sample\/app\/examples\/modal\/modal-test.ts\">NativeScript documentation<\/a>. When called, it will launch the soon to be created <code>ModalComponent<\/code> with various options. When the modal is closed, the value returned will be loaded into the <code>profile.photo<\/code> because the value returned should be an image path.<\/p>\n<p>Now how do we create that modal dialog?<\/p>\n<h2 id=\"creating-a-modal-dialog-for-image-selection\">Creating a Modal Dialog for Image Selection<\/h2>\n<p>Creating a modal is pretty much the same as creating a NativeScript page. However, other bootstrapping must be done to prove that it is a modal and not a page.<\/p>\n<p>Create a file <strong>app\/app.modal.ts<\/strong> and include the following code:<\/p>\n<pre class=\"lang:default decode:true \">import { Component, Input } from \"@angular\/core\";\r\nimport { ModalDialogParams } from \"nativescript-angular\/directives\/dialogs\";\r\n\r\n@Component({\r\n    selector: \"my-modal\",\r\n    template: `\r\n        &lt;StackLayout margin=\"24\" horizontalAlignment=\"center\" verticalAlignment=\"center\"&gt;\r\n            &lt;Label [text]=\"prompt\"&gt;&lt;\/Label&gt;\r\n            &lt;StackLayout orientation=\"horizontal\" marginTop=\"12\"&gt;\r\n                &lt;Image src=\"~\/kitten1.jpg\" width=\"75\" height=\"75\" (tap)=\"close('~\/kitten1.jpg')\"&gt;&lt;\/Image&gt;\r\n                &lt;Image src=\"~\/kitten2.jpg\" width=\"75\" height=\"75\" (tap)=\"close('~\/kitten2.jpg')\"&gt;&lt;\/Image&gt;\r\n                &lt;Image src=\"~\/kitten3.jpg\" width=\"75\" height=\"75\" (tap)=\"close('~\/kitten3.jpg')\"&gt;&lt;\/Image&gt;\r\n            &lt;\/StackLayout&gt;\r\n        &lt;\/StackLayout&gt;\r\n    `,\r\n})\r\nexport class ModalComponent {\r\n\r\n    @Input() public prompt: string;\r\n    constructor(private params: ModalDialogParams) {\r\n        this.prompt = params.context.promptMsg;\r\n    }\r\n\r\n    public close(res: string) {\r\n        this.params.closeCallback(res);\r\n    }\r\n\r\n}<\/pre>\n<p class=\"\">You&#8217;ll notice that I&#8217;m using <code>template<\/code> instead of <code>templateUrl<\/code> here. It is because I got lazy and didn&#8217;t want to create another HTML file. The template has three images and a tap event for each image. When tapped, the <code>close<\/code> method will be called passing the value to the previous page.<\/p>\n<p>Before the modal can be used, it must be bootstrapped in the project&#8217;s <strong>app\/app.module.ts<\/strong> file:<\/p>\n<pre><code>import { NgModule, NO_ERRORS_SCHEMA } from \"@angular\/core\";\r\nimport { NativeScriptModule } from \"nativescript-angular\/platform\";\r\nimport { NativeScriptFormsModule } from \"nativescript-angular\/forms\";\r\nimport { ModalDialogService } from \"nativescript-angular\/modal-dialog\";\r\n\r\nimport { AppComponent } from \".\/app.component\";\r\nimport { ModalComponent } from \".\/app.modal\";\r\n\r\n@NgModule({\r\n    declarations: [AppComponent, ModalComponent],\r\n    entryComponents: [ModalComponent],\r\n    bootstrap: [AppComponent],\r\n    imports: [NativeScriptModule, NativeScriptFormsModule],\r\n    providers: [ModalDialogService],\r\n    schemas: [NO_ERRORS_SCHEMA]\r\n})\r\nexport class AppModule { }<\/code><\/pre>\n<p>Notice in the above we are importing the <code>ModalDialogService<\/code> as well as the <code>ModalComponent<\/code>? We are injecting both into the <code>@NgModule<\/code> block.<\/p>\n<p>Now the modal can be launched within the application.<\/p>\n<h2 id=\"developing-the-core-application-ui\">Developing the Core Application UI<\/h2>\n<p>So how about the UI for the default NativeScript application page? Open the project&#8217;s <strong>app\/app.component.html<\/strong> file and include the following XML markup:<\/p>\n<pre class=\"lang:default decode:true \">&lt;ActionBar title=\"{N} Profile\"&gt;\r\n    &lt;ActionItem text=\"Load\" ios.position=\"right\" (tap)=\"load()\"&gt;&lt;\/ActionItem&gt;\r\n&lt;\/ActionBar&gt;\r\n&lt;GridLayout rows=\"*, *\" cols=\"*\"&gt;\r\n    &lt;Image [src]=\"profile.photo\" (tap)=\"showModal(true)\" width=\"150\" height=\"150\" class=\"img-rounded\" row=\"0\" col=\"0\"&gt;&lt;\/Image&gt;\r\n    &lt;StackLayout class=\"form\" row=\"1\" col=\"0\"&gt;\r\n        &lt;StackLayout class=\"input-field\"&gt;\r\n            &lt;Label text=\"First Name\" class=\"label\"&gt;&lt;\/Label&gt;\r\n            &lt;TextField [(ngModel)]=\"profile.firstname\" class=\"input input-border\"&gt;&lt;\/TextField&gt;\r\n        &lt;\/StackLayout&gt;\r\n        &lt;StackLayout class=\"input-field\"&gt;\r\n            &lt;Label text=\"Last Name\" class=\"label\"&gt;&lt;\/Label&gt;\r\n            &lt;TextField [(ngModel)]=\"profile.lastname\" class=\"input input-border\"&gt;&lt;\/TextField&gt;\r\n        &lt;\/StackLayout&gt;\r\n        &lt;StackLayout class=\"input-field\"&gt;\r\n            &lt;Button text=\"Save\" (tap)=\"save()\" class=\"btn btn-primary w-full\"&gt;&lt;\/Button&gt;\r\n        &lt;\/StackLayout&gt;\r\n    &lt;\/StackLayout&gt;\r\n&lt;\/GridLayout&gt;<\/pre>\n<p>In the above layout we have an action bar and content split into two rows. The action bar has a button, that when pressed, will call the <code>load<\/code> method in our TypeScript code.<\/p>\n<p>The <code>Image<\/code> tag will load the photo stored in the path of the <code>profile.photo<\/code> variable. When tapped the modal will launch to allow us to choose a new avatar.<\/p>\n<p>The second row of the UI has two input fields and a button. The input fields are bound using the Angular <code>[(ngModel)]<\/code> tags which allow data to be shared between the XML and the TypeScript. When the button is pressed, the <code>save<\/code> method will be triggered, saving the data into Couchbase.<\/p>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>You just saw how to use <a href=\"https:\/\/www.couchbase.com\">Couchbase<\/a> as key-value storage within a <a href=\"https:\/\/www.nativescript.org\">NativeScript<\/a> Android and iOS application built with Angular. Next time we&#8217;ll see how to save more than one document in Couchbase and query for those documents making it much more powerful than just key-value storage.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m a huge fan of mobile Android and iOS application development and an even bigger fan of using Angular to develop those applications. A while back I wrote about using Couchbase in a NativeScript application as well as using Couchbase [&hellip;]<\/p>\n","protected":false},"author":63,"featured_media":13873,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[2370,1815,1810,9327],"tags":[1704,1536,1543,1589],"ppma_author":[9032],"class_list":["post-2486","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-best-practices-and-tutorials","category-couchbase-mobile","category-javascript","tag-angular","tag-ios","tag-javascript","tag-nativescript"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.7.1 (Yoast SEO v25.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Use Couchbase within a NativeScript Angular application<\/title>\n<meta name=\"description\" content=\"Learn how to perform key-value operations in Couchbase Mobile within a NativeScript Android and iOS application built with Angular.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Key-Value Operations in Couchbase Mobile via NativeScript and Angular\" \/>\n<meta property=\"og:description\" content=\"Learn how to perform key-value operations in Couchbase Mobile within a NativeScript Android and iOS application built with Angular.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/thepolyglotdeveloper\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-06T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-14T03:52:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2017\/01\/nativescript-couchbase-profile.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"709\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Nic Raboy, Developer Advocate, Couchbase\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nraboy\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nic Raboy, Developer Advocate, Couchbase\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/\"},\"author\":{\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1\"},\"headline\":\"Key-Value Operations in Couchbase Mobile via NativeScript and Angular\",\"datePublished\":\"2017-01-06T15:00:00+00:00\",\"dateModified\":\"2025-06-14T03:52:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/\"},\"wordCount\":1041,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"keywords\":[\"Angular\",\"ios\",\"javascript\",\"nativescript\"],\"articleSection\":[\"Android\",\"Best Practices and Tutorials\",\"Couchbase Mobile\",\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/\",\"name\":\"Use Couchbase within a NativeScript Angular application\",\"isPartOf\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"datePublished\":\"2017-01-06T15:00:00+00:00\",\"dateModified\":\"2025-06-14T03:52:48+00:00\",\"description\":\"Learn how to perform key-value operations in Couchbase Mobile within a NativeScript Android and iOS application built with Angular.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#primaryimage\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png\",\"width\":1800,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.couchbase.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Key-Value Operations in Couchbase Mobile via NativeScript and Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#website\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"contentUrl\":\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png\",\"width\":218,\"height\":34,\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1\",\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/8863514d8bed0cf6080f23db40e00354\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g\",\"caption\":\"Nic Raboy, Developer Advocate, Couchbase\"},\"description\":\"Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.\",\"sameAs\":[\"https:\/\/www.thepolyglotdeveloper.com\",\"https:\/\/www.facebook.com\/thepolyglotdeveloper\",\"https:\/\/x.com\/nraboy\"],\"url\":\"https:\/\/www.couchbase.com\/blog\/author\/nic-raboy-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Use Couchbase within a NativeScript Angular application","description":"Learn how to perform key-value operations in Couchbase Mobile within a NativeScript Android and iOS application built with Angular.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/","og_locale":"en_US","og_type":"article","og_title":"Key-Value Operations in Couchbase Mobile via NativeScript and Angular","og_description":"Learn how to perform key-value operations in Couchbase Mobile within a NativeScript Android and iOS application built with Angular.","og_url":"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/","og_site_name":"The Couchbase Blog","article_author":"https:\/\/www.facebook.com\/thepolyglotdeveloper","article_published_time":"2017-01-06T15:00:00+00:00","article_modified_time":"2025-06-14T03:52:48+00:00","og_image":[{"width":1024,"height":709,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2017\/01\/nativescript-couchbase-profile.gif","type":"image\/gif"}],"author":"Nic Raboy, Developer Advocate, Couchbase","twitter_card":"summary_large_image","twitter_creator":"@nraboy","twitter_misc":{"Written by":"Nic Raboy, Developer Advocate, Couchbase","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/"},"author":{"name":"Nic Raboy, Developer Advocate, Couchbase","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1"},"headline":"Key-Value Operations in Couchbase Mobile via NativeScript and Angular","datePublished":"2017-01-06T15:00:00+00:00","dateModified":"2025-06-14T03:52:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/"},"wordCount":1041,"commentCount":1,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","keywords":["Angular","ios","javascript","nativescript"],"articleSection":["Android","Best Practices and Tutorials","Couchbase Mobile","JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/","url":"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/","name":"Use Couchbase within a NativeScript Angular application","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","datePublished":"2017-01-06T15:00:00+00:00","dateModified":"2025-06-14T03:52:48+00:00","description":"Learn how to perform key-value operations in Couchbase Mobile within a NativeScript Android and iOS application built with Angular.","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","width":1800,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Key-Value Operations in Couchbase Mobile via NativeScript and Angular"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"The Couchbase Blog","description":"Couchbase, the NoSQL Database","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"The Couchbase Blog","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","width":218,"height":34,"caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1","name":"Nic Raboy, Developer Advocate, Couchbase","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/8863514d8bed0cf6080f23db40e00354","url":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","caption":"Nic Raboy, Developer Advocate, Couchbase"},"description":"Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.","sameAs":["https:\/\/www.thepolyglotdeveloper.com","https:\/\/www.facebook.com\/thepolyglotdeveloper","https:\/\/x.com\/nraboy"],"url":"https:\/\/www.couchbase.com\/blog\/author\/nic-raboy-2\/"}]}},"authors":[{"term_id":9032,"user_id":63,"is_guest":0,"slug":"nic-raboy-2","display_name":"Nic Raboy, Developer Advocate, Couchbase","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","author_category":"","last_name":"Raboy","first_name":"Nic","job_title":"","user_url":"https:\/\/www.thepolyglotdeveloper.com","description":"Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand."}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts\/2486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/comments?post=2486"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts\/2486\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/media\/13873"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/media?parent=2486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/categories?post=2486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/tags?post=2486"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/ppma_author?post=2486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}