Downloaded 11 times
![Data binding Data binding is communication between business logic and views. Typescript Code (Business Logic) Template (HTML) Data binding = Communication Output Data String Interpolation => {{ data }} Property Binding => [property] = “ data “](https://image.slidesharecdn.com/angular4-170629062540-180321181950/75/Angular4-getting-started-22-2048.jpg)
![Property Binding HTML <button [disabled]="!isActive" class="btn">ADD</button> Typescript export class ClientComponent { isActive = false; constructor() { setTimeout(() => { this.isActive = true; }, 2000); } ngOnInit() { } Property binding allow us to bind values to properties of an element to modify their behavior or appearance. This can include properties such as class, disabled, href or textContent.](https://image.slidesharecdn.com/angular4-170629062540-180321181950/75/Angular4-getting-started-24-2048.jpg)
Angular4 getting started
- 1. Angular ( formerly Angular4 ) One framework. Mobile & desktop. Tejinder Singh Software Engineer Softprodigy System Solutions tejindermakkar786@gmail.com (8284045404)
- 2. Introduction ofAngular. Features of Angular. Development environment setup. Project setup Structure of Angular project. How to install packages. What is TypeScript . How Angular application start. Components. How to create component. Styling component. Component selector. Databinding Agenda
- 3. • Angular isan open source JavaScript framework that is used to build single page based web applications. • Developed by Google • Release Date - March 2017 • One framework. Mobile & Desktop. Angular
- 4. Cross Platform Productivity Speed and Performance Features ofAngular Development
- 5. Cross Platform Angularuse modern web platform capabilities to deliver app-like experiences. High performance and zero-step installation. Build native mobile apps with Ionic Framework, NativeScript, and React Native. Create desktop - installed apps across Mac, Windows, and Linux.
- 6. Speed and Performance Angularturns our templates into code that's highly optimized for today's JavaScript machines. Serve the first view of your application on node.js, .NET, PHP, and other servers for rendering in just HTML and CSS. . Angular apps load quickly with the new Component Router.
- 7. Productivity Quickly createUI views with simple and powerful template syntax. Command line tools: Start building fast Add components and tests Then instantly deploy. Get intelligent code completion, instant errors in popular editors and IDEs.
- 8. Full Development Story Karmafor unit tests. Protractor makes our scenario tests run faster and in a stable manner. Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.
- 9. Development Environment Setup https://nodejs.org/en/download/ Node.js •Node.js is an open-source, cross-platform JavaScript run-time environment for executing JavaScript code server-side. • Download latest version i.e. node v6.10.3 Syntax : - node -v Check node.js version • This command is used for checking current installed version of node.
- 10. Syntax : -npm -vCheck npm version • This command is used for checking current installed version of Node Package Manager (npm). Text Editor • Visual Studio Code, WebStrome , Sublime or any other text editor IDE
- 11. Project Setup Angular CLIis command line interface for Angular Open node js command prompt in admin mode. Syntax : - npm install –g <packagename> F:/Angular4> npm install –g @angular/cli Node.js command prompt Current working directory Globally Package Name
- 12. Creating project usingAngular CLI Syntax : - ng new <project_name> F:/Angular4> ng new MyFirstDemoApp Node.js command prompt Current working directory Project Name
- 13. Enter into newlycreated project folder i.e. MyFirstDemoApp Step 4 Run application Syntax : - ng serve F:/Angular4/MyFirstDemoApp> ng serve ng serve command is used for to run application.
- 14. Open web browser- localhost:4200
- 15. Structure of project NPMis the node package manager, which installs packages locally into a project, specifically, into the node_modules folder. All images, stylesheets, JavaScript or third party libraries reside in assets Configuration Files Root project folder, all components reside is app folder. Entry point of application
- 16. Installing Packages npm installcommand is used for installing packages. Syntax npm install <package_name> Example F:/Angular4/MyFirstDemoApp> npm install bootsrap
- 17. How App Start main.ts• Main.ts file is entry point of our application. • Main.ts file bootstrap app.module.ts file app.module.ts • This file bootstrap our first component i.e app.component.ts app.component.ts • This file render app.component.html file. app.component.html • Final HTML template
- 18. TypeScript TypeScript isa free and open source programming language. It is developed and maintained by Microsoft. It is syntactical superset of JavaScript and adds optional static typings and class based object oriented programming to the language.
- 19. Components Components area logical piece of code for Angular application. A Component consists of the following − Template is used to render the view for the application. This contains the HTML that needs to be rendered in the application. This is like a class defined in any language such as C#. This has the code which is used to support the view. It is defined in TypeScript. This has the extra data defined for the Angular class. It is defined with a decorator.
- 20. Decorator Defines the nameof the HTML tag. It holds our HTML template. The styles option is used to style a specific component Defining a class called AppComponent. The export keyword is used so that the component can be used in other modules in the application. title is the name of the property. The property is given a value of ‘app’. We are using the import keyword to import the ‘Component’ decorator from the angular/core module.
- 21. Creating Component nggenerate command is used for create component. Syntax ng generate component <component_name> or ng g c <component_name> Example F:/Angular4/MyFirstDemoApp> ng g c server
- 22. Data binding Databinding is communication between business logic and views. Typescript Code (Business Logic) Template (HTML) Data binding = Communication Output Data String Interpolation => {{ data }} Property Binding => [property] = “ data “
- 23. String Interpolation Interpolationmarkup is used to provide data-binding to text and attribute values. Syntax export class <class_name> { variableName = ‘any string'; } Example export class AppComponent { title = ‘This is my demo app'; } <div {{variableName }} > <div {{ title }} > </div>
- 24. Property Binding HTML <button [disabled]="!isActive" class="btn">ADD</button> Typescript exportclass ClientComponent { isActive = false; constructor() { setTimeout(() => { this.isActive = true; }, 2000); } ngOnInit() { } Property binding allow us to bind values to properties of an element to modify their behavior or appearance. This can include properties such as class, disabled, href or textContent.