push

Today lets learn basics of navigation / routing in Ionic 2. Ionic 2 and Angular 2 makes use of navigation stack for its navigation system. i.e., we can push and pop views to and from navigation stack.

Forward Navigation: We push page reference of the page we want to navigate to.
Backward Navigation: We execute pop operation on navigation stack to remove the current view or top view.

Once we push a page reference of the page we want to navigate to, a back button or back arrow symbol is automatically added to the navigation bar and whenever user clicks on it, the pop operation is executed for us automatically.

Basic Navigation or Routing: Ionic 2

[youtube https://www.youtube.com/watch?v=VC-drnHG8Gg]

YouTube Link: https://www.youtube.com/watch?v=VC-drnHG8Gg [Watch the Video In Full Screen.]

Generating Page using Ionic 2 CLI(Command Line Interface)

ionic g page Second

ionic generate page Second

This command creates Second page for us – which will have a TypeScript page(class file or component), a template file and a sass file.

src/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SecondPage } from '../second/second';
 
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {}
  nextPage(){
    this.navCtrl.push(SecondPage);
  }
}

Here we import the SecondPage page. Next define nextPage method. When nextPage method is invoked, we push reference to the page we want to navigate to, to the NavController reference.

Important: Also make sure to import Second page inside src/app/app.module.ts file and specify the page reference inside declarations and entryComponents section.

src/pages/home/home.html

 < button ion-button (click)="nextPage();">
   Next Page
 < /button>

Here we invoke nextPage method when user clicks on ‘Next Page’ button. This should take the user to the second page. And the user will be presented with a back button in the second page, so that he or she can navigate back to the home page or the first page again – which calls pop method on NavController reference automatically.

Set Root Page

this.navCtrl.setRoot(SecondPage);

using setRoot method, and passing the page reference of the page you want to set as root page, you can set the root page dynamically.

src/pages/second/second.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
 
@Component({
  selector: 'page-second',
  templateUrl: 'second.html'
})
export class SecondPage {
  constructor(public navCtrl: NavController) {
    this.navCtrl.setRoot(SecondPage);
  }
}

Next Video Tutorial
In the next video tutorial we shall learn to pass data between pages while navigating.

Lets learn some of the methods and operators to work with arrays in MongoDB.

In this video tutorial, we’ll be looking at:
update()
$set
$push
$pop
$pushAll
$pull
$pullAll
$addToSet

update set push pop pushAll pull pullAll addToSet operators mongodb

test database, names collection

MongoDB shell version: 2.6.1
connecting to: test
> db.names.find()
 
> db.names.insert({"_id": 1, "a": [1, 2, 3, 4]});
WriteResult({ "nInserted" : 1 })
 
> db.names.find()
{ "_id" : 1, "a" : [ 1, 2, 3, 4 ] }

We insert a document into “names” collection. We’ll be working on the array field present in the document.

Working With Arrays: MongoDB

[youtube https://www.youtube.com/watch?v=xc5TiSqvnPQ]

YouTube Link: https://www.youtube.com/watch?v=xc5TiSqvnPQ [Watch the Video In Full Screen.]

update() method

> db.names.update({"_id": 1}, {"a": [1, 2, 3, 4, 5]});
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })
 
> db.names.find()
{ "_id" : 1, "a" : [ 1, 2, 3, 4, 5 ] }

We can update the array by simply using update() method. But here, we need to remember all the elements of the array as well as the new element to be inserted into the array. Thus, this method is somewhat tedious.

$set operator

> db.names.update({"_id": 1}, {$set: {"a.5": 6}});
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })
 
> db.names.find()
{ "_id" : 1, "a" : [ 1, 2, 3, 4, 5, 6 ] }

We could insert an element into the array by making use of $set operator. Here we need to know the position where the new element needs to be inserted. In mongoDB, array index starts from zero.

$push operator

> db.names.update({"_id": 1}, {$push: {"a": 7}});
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })
 
> db.names.find()
{ "_id" : 1, "a" : [ 1, 2, 3, 4, 5, 6, 7 ] }

using $push operator we can insert an element to the right hand side of the array. Here we simply specify the key and the value/element to be inserted.

$pop: {a: 1}

> db.names.update({"_id": 1}, {$pop: {"a": 1}});
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })
 
> db.names.find()
{ "_id" : 1, "a" : [ 1, 2, 3, 4, 5, 6 ] }

$pop operator which has 1 as value to the key, removes the right most element from the array.

$pop: {a: -1}

> db.names.update({"_id": 1}, {$pop: {"a": -1}});
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })
 
> db.names.find()
{ "_id" : 1, "a" : [ 2, 3, 4, 5, 6 ] }

$pop operator which has -1 as value to the key, removes the left most element from the array.

$pushAll operator

> db.names.update({"_id": 1}, {$pushAll: {"a": [7, 8]}});
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })
 
> db.names.find()
{ "_id" : 1, "a" : [ 2, 3, 4, 5, 6, 7, 8 ] }

$pushAll operator inserts all the elements(array of elements) specified, to the right hand side of the existing array.

$pull operator

> db.names.update({"_id": 1}, {$pull: {"a": 3}});
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })
 
> db.names.find()
{ "_id" : 1, "a" : [ 2, 4, 5, 6, 7, 8 ] }

$pull operator pulls or removes the specified element from the array, irrespective of its position.

$pullAll operator

> db.names.update({"_id": 1}, {$pullAll: {"a": [2, 7, 8]}});
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })
 
> db.names.find()
{ "_id" : 1, "a" : [ 4, 5, 6 ] }

$pullAll operator pulls/removes all the elements(array of elements) specified from the array, irrespective of its position.

$addToSet operator

> db.names.update({"_id": 1}, {$addToSet: {"a": 3}});
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 })
 
> db.names.find()
{ "_id" : 1, "a" : [ 4, 5, 6, 3 ] }

$addToSet operator adds specified element to the array, if its not already present in the array. If the element is already present in the array, then it doesn’t add it once again.

> db.names.update({"_id": 1}, {$addToSet: {"a": 3}});
WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 0 })
> db.names.find()
{ "_id" : 1, "a" : [ 4, 5, 6, 3 ] }

If the element is already present in the array, then $addToSet doesn’t add it once again.

Tag: push

Basic Navigation: Ionic 2

Working With Arrays: MongoDB