Angular introduction students

Introduction Getting started with Angular

Introduction 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

Introduction Angular ArchitectureOverview

Introduction Angular Building Blocks

Introduction Modules Components Directives Routing Services

Introduction Module contains routes, components, services and more…. Search Component Profile Component Dashboard Component Directives Services Directives Services DirectivesServices Navigation Component Routing

contains a template, logic, data and forming part of a DOM tree. Components Module App Component Search Component Navigation Component Dashboard Component Introduction

Introduction <main-component> <> <> <> <> <> <> <> <> <> DOM TREE

Introduction Directives Directives allow you to attach behavior to elements in the DOM.

Routing Angular Router enables navigation from one view to another. Navigation Home Profile Shop Products Order Details Check Out Introduction

Services Service may serve as your Business Logic Layer, Data Layer etc. It encapsulates your data and logic implementation. Introduction

https://nodejs.org/en/ Node JS: https://code.visualstudio.com/ Visual Studio Code : “Or any code editor” Things you need before you start Introduction

Introduction To check the version of npm and node installed in your machine, open a command prompt or terminal type npm - - version hit enter and node - - version

Introduction Creating Angular Project

Introduction Open a command prompt or terminal make sure you’re on the right folder then type code . then VS Code will open Create a folder “ex: DemoApp Folder” inside your chosen directory. In my case in Documents directory.

Introduction Open the vs code terminal ctrl + ` (tilde)

Introduction To check the version of angular installed in your machine type ng -v

Introduction To create Angular project type ng new <project name> In my case the project name is ng-intro then hit enter.

Introduction To run the application type ng serve -o

Introduction Webpack is a popular module bundler, a tool for bundling application source code in convenient chunks and for loading that code from a server into a browser. https://webpack.js.org/guides/getting-started/

Introduction This directory is used to create and configure end-to- end (e2e) testing. e2e/src directory

Introduction A file to configure a test framework, This time it is for protractor, the tool used for end-to- end (e2e) testing. e2e/protractor.conf.js

Introduction When your package manager installs all the dependencies (of Angular or third party ones) on your machine, it does so in the node_modules directory. node_modules

Introduction As you would expect, all the source-code of the actual application is located inside the src- directory. src-directory

Introduction Inside of the app directory, you place all files that alter the look or functionality of your application. This includes components, modules, services, guards and pipes. src/app-directory

Introduction src/assets-directory You can place assets, that are required for your application, inside of this folder. Assets include images, icons, fonts & more. The CLI will serve these files together with you application.

Introduction Contains files, that define the environment variables of your application. src/environments-directory

Introduction The base version of your index.html. This is the root file of your application, as it is the only html file, that is delivered to the browser. src/index.html

Introduction The main.ts file is the entry point of your angular application. All that is in here, is the function call to actually bootstrap the application itself. You can specify here which angular module should be bootstrapped. Normally, this is the AppModule src/main.ts

Introduction This is the main configuration file for the angular-cli . Inside of here, you can change almost every default behavior of the CLI. angular.json Formerly .angular-cli.json

Introduction package.json Contains information about all the dependencies of your application, this file also manage npm or yarn use to install all the required dependencies and downloaded to node_modules.

Introduction https://angular.io/tutorial https://github.com/angular/angular-cli/wiki https://blog.angular.io/ https://github.com/angular/angular-cli

Angular introduction students

More Related Content

What's hot

Similar to Angular introduction students

Recently uploaded

Angular introduction students