![Updating with latest
• Updating NodeJS:
– Go to nodejs.org and download the latest version - uninstall (all) installed
versions on your machine first.
• Updating npm:
– Run [sudo] npm install -g npm (sudo is only required on Mac/ Linux)
• Updating the CLI
– [sudo] npm uninstall -g angular-cli @angular/cli
– npm cache clean
– [sudo] npm install -g @angular/cli](https://image.slidesharecdn.com/angular-221208082035-e5ae32b9/85/Angular-ppt-11-320.jpg)
Angular.ppt
- 1. Angular -2
- 2. Agenda • Introduction to Angular. • Angular-2 • Why Angular-2. • Setup.
- 3. Introduction to AnguarJs • AnguarJs is a very powerful JavaScript Framework. • It is a library written in JavaScript. • It help us to create a reactive SPA. • AnguarJs is open source, completely free, and used by thousands of developers around the world.
- 4. Difference between Version’s • AnguarJs is a very powerful JavaScript Framework it helped us to create great user exp web apps. • Angular-2 – it was complete re-write of angular-1 and future of angular. You donot need to worry or learn angularjs. • Angular-4 – it is a version update of angular-2.
- 5. Angular -2 • It was announced in Sep 2016. • Angular 2 is the next version of Google’s massively popular MV* framework for building complex applications in the browser (and beyond). • Angular 2 comes with almost everything you need to build a complicated frontend web or mobile apps, from powerful templates to fast rendering, data management, HTTP services, form handling, and so much more.
- 6. Features of Angular 2 • Components - The earlier version of Angular had a focus of Controllers but now has changed the focus to having components over controllers. Components help to build the applications into many modules. This helps in better maintaining the application over a period of time. • Typescript − The newer version of Angular is based on Typescript. This is a superset of JavaScript and is maintained by Microsoft • Services − Services are a set of code that can be shared by different components of an application. So for example if you had a data component that picked data from a database, you could have it as a shared service that could be used across multiple applications. • Better event-handling capabilities, powerful templates, and better support for mobile devices.
- 7. Components of Angular 2 • Modules − This is used to break up the application into logical pieces of code. Each piece of code or module is designed to perform a single task. • Component − This can be used to bring the modules together. • Templates − This is used to define the views of an Angular JS application. • Metadata − This can be used to add more data to an Angular JS class. • Service − This is used to create components which can be shared across the entire application.
- 8. Angular 2 Environment • Npm − Node package manager that is used to work with the open source repositories. Angular JS as a framework has dependencies on other components. And npm can be used to download these dependencies and attach them to your project. • Git − This is the source code software that can be used to get the sample project from the github angular site. • Editor − There are many editors that can be used for Angular JS development such as Visual Studio code and WebStorm. In our tutorial, we will use Visual Studio code which comes free of cost from Microsoft.
- 9. Getting started with first Angular JS App: • One way is to do everything from scratch which is the most difficult and not the preferred way. Due to the many dependencies, it becomes difficult to get this setup. • Another way is to use the quick start at Angular Github. This contains the necessary code to get started. This is normally what is opted by all developers. – “git clone https://github.com/angular/quickstart Demo “ • Angular CLI. Command Line Interface (CLI) can be used to create our Angular JS application. It also helps in creating a unit and end-to- end tests for the application.
- 10. Angular 2 –CLI • The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications • Command Line Interface (CLI) can be used to create our Angular JS application. It also helps in creating a unit and end-to-end tests for the application. Install NodeJs first. npm install -g @angular/cli ng new my-project cd my-project ng serve
- 11. Updating with latest • Updating NodeJS: – Go to nodejs.org and download the latest version - uninstall (all) installed versions on your machine first. • Updating npm: – Run [sudo] npm install -g npm (sudo is only required on Mac/ Linux) • Updating the CLI – [sudo] npm uninstall -g angular-cli @angular/cli – npm cache clean – [sudo] npm install -g @angular/cli
- 12. Angular 2 Modules • Modules − Modules are used in Angular JS to put logical boundaries in your application. Hence, instead of coding everything into one application, you can instead build everything into separate modules to separate the functionality of your application. Let’s inspect the code which gets added to the demo application. • In Visual Studio code, go to the app.module.ts folder in your app folder. This is known as the root module class.
- 13. A module is made up of the following parts − • Bootstrap array − This is used to tell Angular JS which components need to be loaded so that its functionality can be accessed in the application. Once you include the component in the bootstrap array, you need to declare them so that they can be used across other components in the Angular JS application. • Export array − This is used to export components, directives, and pipes which can then be used in other modules. • Import array − Just like the export array, the import array can be used to import the functionality from other Angular JS modules.
- 14. Angular 2 – Architecture - • Each application consists of Components. A component consists of − – Class − This is like a C++ or Java class which consists of properties and methods. – Metadata − This is used to decorate the class and extend the functionality of the class. – Template − This is used to define the HTML view which is displayed in the application.
- 15. • Each application is made up of modules. • Each Angular 2 application needs to have one Angular Root Module. • Each Angular Root module can then have multiple components to separate the functionality.
- 16. Angular 2 - Components • Components are a logical piece of code for Angular JS application. A Component consists of the following – Template − This is used to render the view for the application. This contains the HTML that needs to be rendered in the application. This part also includes the binding and directives. – Class − This is like a class defined in any language such as C. This contains properties and methods. This has the code which is used to support the view. It is defined in TypeScript. – Metadata − This has the extra data defined for the Angular class. It is defined with a decorator.
- 17. Class • The class decorator. The class is defined in TypeScript. The class normally has the following syntax in TypeScript. class classname { Propertyname: PropertyType = Value } Example: export class AppComponent { appTitle: string = 'Welcome'; } Metadata This is used to decorate Angular JS class with additional information. Template: This is the view which needs to be rendered in the application.
- 18. Q & A