1. Introduce to Angular 6 https://codsycorp.com/ Present by: Võ Văn Hào
Lê Hoàn Thiếu Vũ

2. Objectives Basic understanding about SPA architecture.
Basic understanding Angular - client side framework.
How to develop a simple web application with Angular.
How to wrap an Angular mobile app with Apache Cordova.
© Copyright Showeet.com – Free PowerPoint Templates

3. Agenda Section 1: Angular - Web Development Platform What's Angular?
Why should we use Angular to build web application?
Concepts: SPA, Typescript, Nodejs, scss
Architecture
Fundamentals
Command-Line Interface(CLI) and Compilers
Demonstrate
References
Questions
© Copyright Showeet.com – Free PowerPoint Templates

4. Agenda Section 2: Angular - A mobile development framework What is it?
Architecture
Developing Mobile Applications with Cordova
Angular and Cordova integration to build a hybrid mobile app
Advantages & disadvantages
Demonstrate
References
Questions
© Copyright Showeet.com – Free PowerPoint Templates

5. What's Angular? Angular 1.x: https://angularjs.org/
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile or the desktop.
There is 2 main branches:
AngularJS 1.x
Angular 2+(start version from 2.x – now)
Angular 1.x:
Angular 2+:

6. WHAT’S DIFFERENCE BETWEEN 1.x vs 2+
ctrl
WHAT’S DIFFERENCE BETWEEN 1.x vs 2+
ANGULARJS 1.x
ANGULAR 2+
AngularJS (also written as Angular.js) is a JavaScript- based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
Introduce concepts: $scope, controller
Data binding syntax: ng-model=“$ctrl.<property>”
Angular (commonly referred to as "Angular 2+" or "Angular v2 and above") is a TypeScript-based open- source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.
It uses a hierarchy of components as its primary architectural characteristic.
Focusing on "[ ]" for property binding, and "( )" for event binding. [(ngModel)]=“<property>”

7. CONCEPTS – Single Page Application
A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.
In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.
The page does not reload at any point in the process, nor does control transfer to another page

8. Concepts: Nodejs, typescript, sass
Node.js: is an open-source, cross-platform JavaScript run- time environment that executes JavaScript code outside of a browser. npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. Angular applications and Angular itself depend upon features and functionality provided by libraries that are available as npm packages.
TypeScript: is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language.
Sass: is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself. New syntax is SCSS(Sassy CSS).
TypeScript

9. Angular Architecture Module Component Template Directive
Dependency Injection
Data binding …

10. Angular Libraries
Angular loads as a collection of JavaScript modules. You can think of them as library modules. Each Angular library name begins with prefix. Install them with the npm package manager and import parts of them with JavaScript import statements.

11. Fundamentals Forms RxJS and Observables Bootstrapping
Reactive forms provide a model-driven approach to handling form inputs whose values change over time.
Template-driven forms: using <form> tag and 2-way data binding with syntax: [(ngModel)].
RxJS and Observables
Bootstrapping
Route and Navigation
HttpClient
Animations
Testing

12. Command-Line Interface and Compilers
Command-Line Interface (CLI): The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications.
Install command: npm install
Compilers:
Just-in Time (JIT): which compiles your app in the browser at runtime.
Syntax:
Ahead of Time (AOT): which compiles your app at build time.

13. demonstrate

14. References https://angular.io/ https://angularjs.org/
© Copyright Showeet.com – Free PowerPoint Templates

15. Questions?
© Copyright Showeet.com – Free PowerPoint Templates

16. Apache Cordova: Introduction
A mobile development framework
© Copyright Showeet.com – Free PowerPoint Templates

17. Agenda Section 2: Apache Cordova - A mobile development framework
What is it?
Architecture
Developing Mobile Applications with Cordova
Angular and Cordova integration to build a hybrid mobile app
Advantages & disadvantages
Demonstrate
References
Questions
© Copyright Showeet.com – Free PowerPoint Templates

18. What is it? an open-source mobile development framework
Cross platform development
Uses standard web technologies - HTML5, CSS3, JavaScript
Implement applications as web pages
Access native functionality via JavaScript API’s

19. Architecture https://codsycorp.com/ WebView
The Cordova-enabled WebView may provide the application with its entire user interface. On some platforms, it can also be a component within a larger, hybrid application that mixes the WebView with native application components. (See Embedding WebViews for details.)
Web App
This is the part where your application code resides. The application itself is implemented as a web page, by default a local file named index.html, that references CSS, JavaScript, images, media files, or other resources are necessary for it to run. The app executes in a WebView within the native application wrapper, which you distribute to app stores.
This container has a very crucial file - config.xml file that provides information about the app and specifies parameters affecting how it works, such as whether it responds to orientation shifts.
Plugins
Plugins are an integral part of the cordova ecosystem. They provide an interface for Cordova and native components to communicate with each other and bindings to standard device APIs. This enables you to invoke native code from JavaScript.
Apache Cordova project maintains a set of plugins called the Core Plugins. These core plugins provide your application to access device capabilities such as battery, camera, contacts, etc.

20. Development Workflows
There are two basic paths you can follow when developing with Cordova:
Cross-platform workflow
Platform-centered workflow
It is usually recommended to start with the cross-platform development workflow, since switching to platform-centered development is fairly straightforward. However, if you initially start with the platform-centered workflow, you will not be able to switch to cross-platform development since the CLI will overwrite your customizations once you run the build process.

21. Developing Mobile Applications with Cordova
Finally, Cordova applications install just like native applications. This means that building your code for iOS will produce an IPA file, for Android an APK file, and building for Windows Phone produces an XAP file.

22. Prerequisites Platform’s SDK Node.js and Node Package Manager (npm)
Cordova command-line interface (CLI)

23. Cordova installation Installing Apache Cordova via npm
Creating a new project
Testing the Cordova project (via browser)

24. Demo - wrapping the Angular app

25. Advantages Code one – deploy cross-platform
Faster to develop than native app
No need to learn platform specific programming languages
Open source  many community add-ons

26. Disadvantages
Hybrid apps are slower than native ones  Consider develop a large apps
Cross browser compatibility can create lots of issues
Plugins compatibility on different devices

27. THANK YOU HTTPS://CODSYCORP.COM/ VO VAN HAO (+084) 938.241.243
LE HOAN THIEU VU
(+084)