AngularNativescript Angular Apptodo angular apptodo mobile app
NativeScript is an open-source cross-platform and hybrid mobile framework for building native iOS and Android mobile apps with Angular, Vue.js, TypeScript, or JavaScript. [Click to Tweet]
Teclogiq provides top-class nativescript app development services to build native mobile apps that meet your budget and requirements.
The goal of this post is to build and run a simple NativeScript Angular application in TypeScript, using the Angular CLI. You can download the source code for the NativeScript Angular Todo mobile app from the GitHub repository.
You need to set up your development environment before you can do anything.
Install Node.js® and npm if they are not already on your machine.
If you don’t have NativeScript installed you can install it by installing Node.js.
To install NativeScript, run:
$ npm install -g nativescript
The final step is to install the development tool for each platform that you want to deploy to. For Android, this is the Android SDK. For iOS, it’s XCode. You can follow the installation guide on the NativeScript website for more detailed instructions on how to set up the necessary software for your development environment.Once you’ve set up your environment, execute:
$ tns doctor
Before we can start coding we need to create a new project. This can be done by executing the following from the Command Prompt (Windows) or Terminal (Linux and Mac):
$ tns create TodoApp $ cd TodoApp $ tns platform add android $ tns platform add ios (If you're not using a Mac, you cannot add and build for the iOS platform.)
$ tns create TodoApp
$ cd TodoApp
$ tns platform add android
$ tns platform add ios (If you're not using a Mac, you cannot add and build for the iOS platform.)
RadSideDrawer is a component can show a hidden view that contains navigation UI or common settings. A popular application that uses the drawer UI is the Android Play store app.
RadListView for NativeScript is a virtualizing list component that provides the most popular features associated with scenarios where a list of items is used. All these features are embedded in one control with the idea to save developer time and provide a better experience. The control’s main features include:
RadDataForm plugin provides an easy and versatile approach for building mobile forms based on a provided data object’s public members. Use DataForm to:
The application we are creating will be making use of persisted storage, that will save our data even after our application has been closed. After all, we don’t want to lose our todo list data after we restart our application.
In this application, we are using the NativeScript SQLite. This can be done by executing the following from the Command Prompt (Windows) or Terminal (Linux and Mac):
$ tns plugin add nativescript-ui-sidedrawer $ tns plugin add nativescript-ui-listview $ tns plugin add nativescript-ui-dataform $ tns plugin add nativescript-sqlite
$ tns plugin add nativescript-ui-sidedrawer
$ tns plugin add nativescript-ui-listview
$ tns plugin add nativescript-ui-dataform
$ tns plugin add nativescript-sqlite
src/app/app-routing.module.ts
import { NgModule } from '@angular/core'; import { Routes } from '@angular/router'; import { NativeScriptRouterModule } from 'nativescript-angular/router'; const routes: Routes = [ { path: '', redirectTo: 'todo-list', pathMatch: 'full' }, { path: 'todo-list', loadChildren: './todo-list/todo-list.module#TodoListModule' }, { path: 'todo-detail', loadChildren: './todo-detail/todo-detail.module#TodoDetailModule' } ]; @NgModule({ imports: [NativeScriptRouterModule.forRoot(routes)], exports: [NativeScriptRouterModule], }) export class AppRoutingModule { }
src/app/todo-list/todo-list.module.ts
import { NgModule, NO_ERRORS_SCHEMA} from '@angular/core'; import { NativeScriptCommonModule } from 'nativescript-angular/common'; import { NativeScriptUIListViewModule } from 'nativescript-ui-listview/angular'; import { TodoListRoutingModule } from './todo-list-routing.module'; import { TodoListComponent } from './todo-list.component'; import { TodoService } from '../services/todo.service'; @NgModule({ imports: [ NativeScriptCommonModule, TodoListRoutingModule], NativeScriptUIListViewModule ], declarations: [TodoListComponent], schemas: [NO_ERRORS_SCHEMA], providers: [TodoService] }) export class TodoListModule { }
src/app/todo-list/todo-list-routing.module.ts
import { NgModule } from '@angular/core'; import { Routes } from '@angular/router'; import { NativeScriptRouterModule } from 'nativescript-angular/router'; import { TodoListComponent } from './todo-list.component'; const routes: Routes = [ { path: '', component: 'TodoListComponent' } ]; @NgModule({ imports: [NativeScriptRouterModule.forRoot(routes)], exports: [NativeScriptRouterModule] }) export class TodoListRoutingModule { }
src/app/todo-list/todo-list.component.ts
import { Component, OnInit, ViewChild } from '@angular/core'; import { RouterExtensions } from 'nativescript-angular/router'; import { ObservableArray } from 'tns-core-modules/data/observable-array'; import { DataItem } from './dataItem'; import * as app from 'application'; import { RadSideDrawer } from 'nativescript-ui-sidedrawer'; import { TodoService } from '../services/todo.service'; import { ListViewEventData, RadListView } from 'nativescript-ui-listview'; import { RadListViewComponent } from 'nativescript-ui-listview/angular'; import { View } from 'tns-core-modules/ui/core/view'; import * as dialogs from 'ui/dialogs'; @Component({ selector: 'todo-list', moduleId: module.id, templateUrl: './todo-list.component.html', styleUrls: ['todo-list.component.css'] }) export class TodoListComponent implements OnInit { private _dataItems: ObservableArray<DataItem>; public data: DataItem[] = []; @ViewChild('myListView') listViewComponent: RadListViewComponent; constructor( private _routerExtensions: RouterExtensions , private todoService: TodoService ) { } get dataItems(): ObservableArray<DataItem> { return this._dataItems; } ngOnInit(): void { this.loadTodoList(); } loadTodoList() { this.todoService.fetch().then((res) => { this._dataItems = new ObservableArray(res); }); } onDrawerButtonTap(): void { const sideDrawer = <RadSideDrawer>app.getRootView(); sideDrawer.showDrawer(); } create(): void { this._routerExtensions.navigate(['/todo-detail'], { animated: true, transition: { name:'slide', duration: 200, curve:'ease' } }); } public onCellSwiping(args :ListViewEventData) { var swipeLimits = args.data.swipeLimits; var currentItemView = args.object; var currentView; if (args.data.x > 200) { console.log('Notify perform left action'); } else if (args.data.x < -200) { console.log('Notify perform right action'); } } public onSwipeCellStarted(args :ListViewEventData) { var swipeLimits = args.data.swipeLimits; var swipeView = args['object']; var leftItem = swipeView.getViewById<View>('edit-view'); var rightItem = swipeView.getViewById<View>('delete-view'); swipeLimits.left = leftItem.getMeasuredWidth(); swipeLimits.right = rightItem.getMeasuredWidth(); swipeLimits.threshold = leftItem.getMeasuredWidth() / 2; } public onLeftSwipeClick(args :ListViewEventData) { var id = args.object.bindingContext.id; this.listViewComponent.listView.notifySwipeToExecuteFinished(); this._routerExtensions.navigate(['/todo-detail'], { queryParams:{id: id }, animated: true, transition: { name:'slide', duration: 200, curve:'ease' } }); } public onRightSwipeClick(args) { var id = args.object.bindingContext.id; dialogs.confirm({ title: 'Confirm Delete', message: 'Are you sure you want to delete this item?', okButtonText: 'Ok', cancelButtonText: 'Cancel' }).then(result => { if (result) { this.todoService.deleteRecord(id).then((res) => { if (res.success) { this._dataItems.splice(this._dataItems.indexOf(args.object.bindingContext), 1); } }); } }); } }
You can run the app on your device by executing:
$ tns run
and then the platform where you want to deploy. Here’s an example for android:
$ tns run android
This automatically installs the Android platform for you if it hasn’t already been installed and then runs the app on your android device once it’s installed.
Once the app is running, you can execute tns livesync android –watch to automatically refresh the app every time you make changes to the source files.
NativeScript allows developers to debug their app. This is done with the Chrome dev tools. There are two ways of doing this:
$ tns debug android --start
$ tns debug android --debug-brk
You can download the source code for the NativeScript Angular Todo app from the GitHub repository. So these are the 8 easy steps to build a NativeScript Angular Todo mobile app.
Definitely a great article. Gave a lot of perspective. Very charming post and it quite helpful to me thanks for sharing such a wonderful information.
Thanks for your kind words!! Stay connected.
Your email address will not be published. Required fields are marked *
Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
Comment