mobile development using node js and java

DECAP918-
MULTIPLATFORM MOBILE APP DEVELOPMENT
WITH WEB TECHNOLOGIES
The Kick Start Session

Give command –ionic start myTabsApp tabs --
type=angular

Navigate to Your Project Directory
• cd myTabsApp

In src folder there is app where tabs

Browse tab1 and write the code

You can style tab1 in tab1.page.scss

You explore different compnents
• https://ionicframework.com/docs/api/button

What is Angular?
Angular is an open source, TypeScript based front end web application
framework. It has been released by Google's Angular community.
• Angular provides a large collection of tools, APIs, and libraries to
build dynamic and interactive single-page applications (SPAs) with
ease. It helps maintain an organized and scalable codebase, thanks to
its component model and flexible dependency injection system.

we will write a Hello World! program in Angular. For this, create an Angular application and
navigate to src folder. Inside this folder, you will find
the app.component.html and app.component.ts files. Copy and paste the following code inside
those files:

Component
The core of the Angular framework architecture is Angular Component. Angular Component is the building
block of every Angular application. Every angular application is made up of one more Angular Component.
It is basically a plain JavaScript/Typescript class along with a HTML template and an associated name.
The HTML template can access the data from its corresponding JavaScript/Typescript class. Component's
HTML template may include other component using its selectors value (name). The Angular Component
may have an optional CSS Styles associated it and the HTML template may access the CSS Styles as well.

the AppComponent component in our ExpenseManager application.
The AppComponent code is as follows − 1. @Component: A decorator used to convert a normal
Typescript class to Angular Component.
2. app-root: It is the selector/name of the component and
it is specified using selector meta data of the
component's decorator.
3. app.component.html: It is the HTML template
document associated with the component. The
component template is specified
using templateUrl meta data of
the @Component decorator.
4. AppComponent: Its property (title) is used in the
HTML template to set the title of the application.
5. app.component.css: This is the CSS style document
associated with the component. The component style is
specified using styleUrls meta data of
the @Component decorator.

To show the view of this component, the app-root selector is used by
root document, i.e. src/index.html of the Angular application as shown
below −

Modules
Angular Module is basically a collection of related features/functionality. It
groups multiple components and services under a single context.
For example, animations related functionality can be grouped into single
module and Angular already provides a module for the animation related
functionality, BrowserAnimationModule module.
An Angular application can have any number of modules but only one
module can be set as root module, which will bootstrap the application and
then call other modules as and when necessary. A module can be configured
to access functionality from other module as well. In short, components
from any modules can access component and services from any other
modules.

Following diagram depicts the interaction between modules and its
components

the root module of our Expense Manager application.
1. NgModule decorator is used to convert a plain
Typescript/JavaScript class into Angular module.
2. declarations option is used to include components
into the AppModulemodule.
3. bootstrap option is used to set the root component of
the AppModulemodule.
4. providers option is used to include the services for
5. imports option is used to import other modules into

Services
Services are plain Typescript/JavaScript class providing a very specific functionality. They
will do a single task and do it best. The main purpose of the service is to make a certain
feature reusable. Instead of writing a functionality inside a component, separating it into a
service will make it usable in other component as well.
Also, Services enables the developer to organize the business logic of the application.
Basically, component uses services to do its own job. Dependency Injection is used to
properly initialize the service in the component so that the component can access the
services as and when necessary without any setup.

Metadata
In Angular, metadata is used to provide additional information about a
class, component, or service. This information helps Angular understand
how to process and use these elements within the application. Metadata
is defined using decorators, which are special functions that associate
metadata to a class.

Workflow of Angular Application

When we run an Angular application, index.html is the first file that is loaded on
the browser. Then, browser looks for the main TypeScript file,
i.e. src/main.ts which is the entry point of Angular application.
Now, this file bootstraps the AppComponent (src/app.component.ts), the root
component of every Angular application.

The AppComponent renders its template (src/app.component.html) and uses the
corresponding styles (src/app.component.css). AppComponent name, i.e., app-
root is used inside the src/index.html so that view of the angular application can be
rendered.

A component can use another component through directive in its template using
target component's selector name.

mobile development using node js and java

More Related Content

Similar to mobile development using node js and java (20)

More from vishal choudhary (20)

Recently uploaded (20)

mobile development using node js and java