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

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 https://codsycorp.com/

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 https://codsycorp.com/

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 https://codsycorp.com/

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: https://angularjs.org/ Angular 2+: https://angular.io/ https://codsycorp.com/

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>”

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 https://codsycorp.com/

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 https://codsycorp.com/

Angular Architecture Module Component Template Directive Dependency Injection Data binding … https://codsycorp.com/

Angular Libraries Angular loads as a collection of JavaScript modules. You can think of them as library modules. Each Angular library name begins with the @angular prefix. Install them with the npm package manager and import parts of them with JavaScript import statements. https://codsycorp.com/

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 https://codsycorp.com/

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 -g @angular/cli 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. https://codsycorp.com/

demonstrate https://codsycorp.com/

References https://angular.io/ https://angularjs.org/ https://en.wikipedia.org/wiki/AngularJS https://en.wikipedia.org/wiki/Angular_(application_platform) https://nodejs.org/en/ https://www.typescriptlang.org/ https://sass-lang.com/ https://cordova.apache.org/ © Copyright Showeet.com – Free PowerPoint Templates https://codsycorp.com/

Questions? © Copyright Showeet.com – Free PowerPoint Templates

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

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 https://codsycorp.com/

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 https://codsycorp.com/

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. https://codsycorp.com/

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. https://codsycorp.com/

Developing Mobile Applications with Cordova https://www.toptal.com/mobile/developing-mobile-applications-with-apache-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. https://codsycorp.com/

Prerequisites Platform’s SDK Node.js and Node Package Manager (npm) Cordova command-line interface (CLI) https://www.ibm.com/support/knowledgecenter/en/SSHS8R_8.0.0/com.ibm.worklight.dev.doc/dev/c_prerequisites_cord.html https://codsycorp.com/

Cordova installation Installing Apache Cordova via npm Creating a new project Testing the Cordova project (via browser) https://codsycorp.com/

Demo - wrapping the Angular app https://codsycorp.com/

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 https://codsycorp.com/

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 https://cordova.apache.org/docs/en/latest/guide/support/ https://codsycorp.com/

THANK YOU HTTPS://CODSYCORP.COM/ VO VAN HAO (+084) 938.241.243 haovv@codsycorp.com LE HOAN THIEU VU (+084) 948.674.537 vulht@codsycorp.com