INTERNET PROGRAMMING Angular intro.pptx

INTERNET PROGRAMMING Angular intro.pptx

• 1.
  Basic Login AppUsing Angular
• 2.
  Prerequisites: • Install Vscode •Install nodejs • Install Angular - npm install -g @angular/cli
• 3.
  Let’s Get Started: •What we are go to build today? • Learn how some basic concepts in angular like routing,data-sharing using service file,components,modules angular material. • How can we use Dev tools. • Pushing our code to github Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.
• 4.
  Setting up anangular project: 1.Open cmd and choose a desired folder and create your angular app using this command ng new Login-app 2.We are going to use bootstrap and angular-material for styling material : ng add @angular/material bootstrap: bootstrap: npm install bootstrap jquery: npm i jquery In angular.json file in the styles object add this line : "node_modules/bootstrap/dist/css/bootstrap.min.css“ In style.css file add this line: @import '~bootstrap/dist/css/bootstrap.min.css';
• 5.
  • Open angularin Vscode using the command : code . • To run the angular app use this command : ng serve –open • Create components login component: command : ng g c login SignUp component: command : ng g c signup Home component: command : ng g c home • import relevant dependencies from angular material : (button,card,reactivrform,icon,snackbar,input,formfield)
• 6.
  Login Component : Imports: •Formbuidler,validator,formcontrol,formgroup form angular-forms • Router from angular router • Matsnackbar from angularsnackbar Html: we are going to create an simple login page with email and password
• 7.
  Signup Component : Imports: •Formbuidler,validator,formcontrol,formgroup form angular-forms • Router from angular router • Matsnackbar from angularsnackbar Html: username,email,password
• 8.
  Home Component : Imports: •activatedRoute from angular router Html: Going to Display the username
• 9.
  Data communication betweencomponents: • Using service file we are going to pass data between components • Command : ng g service login-service • Functions: 1.getuser 2.set user 3.check access
• 10.
  Useful Links tolearn angular: • Angular Documentation : https://angular.io/ • Angular Material: https://material.angular.io/ • Bootstrap: https://getbootstrap.com/ • Google icons : https://fonts.google.com/icons • Npm packages : https://www.npmjs.com/ • nodeJs : https://nodejs.org/en/ • mongoDB : https://docs.mongodb.com/cloud/ • Udemy Course : Angular - The Complete Guide (2021 Edition)
• 11.
  My Linked Inid : https://www.linkedin.com/in/lakshmi-narayanan-a6b602135/ My Whatsapp Number : 7550152330 My GitHub account id : https://github.com/lechu24