In this project, we'll learn how to create and use basic Angular components. We'll create three components in this project and use one of them with a service. The service has already been setup for this project and can be viewed at app/services/cars.service.js. Get familiar with what the service does before beginning the project.
In this step, we'll create a header component. This component will be designed to take in a title value and then display that value in its template file. We can use bindings to accomplish this.
- Open
app/header/header.component.js. - Create the skeleton of an Angular component.
- The Angular application has been created already for you with the name of
fourWheels. - Call the component
header.
- The Angular application has been created already for you with the name of
- Link the
header.template.htmlto component usingtemplateUrl.- Remember to use
absolutepaths.
- Remember to use
- Define the controller name as
headerCtrlusingcontrollerAs. - Create a
@binding for atitleproperty.@denotes a binding of a string that doesn't change.
app/header/header.component.js
angular.module('fourWheels').component('header',{templateUrl: 'app/header/header.template.html',controllerAs: 'headerCtrl',bindings: {title: '@'}});In this step, we'll modify the template for the header component to display the value of title. We'll then add our new component into index.html so we can see what the template will render.
- Open
app/header/header.template.html. - Add the value of
titleinto the<h1>element. - Open
index.html. - Add a new
scripttag for theheadercomponent. - Just below the opening
bodytag, render theheadercomponent with atitleofFour Wheels.
app/header/header.template.html
<divclass="header__parent"><divclass="header__child"><imgclass="header__wheel" src="assets/wheel.png" /><imgclass="header__wheel" src="assets/wheel.png" /><h1class="alfa-slab-one">{{ headerCtrl.title }}</h1><imgclass="header__wheel" src="assets/wheel.png" /><imgclass="header__wheel" src="assets/wheel.png" /></div></div> index.html
<!DOCTYPE html><htmllang="en" ng-app="fourWheels"><head><title>Four Wheels</title><!-- META INFO --><metacharset="UTF-8"><metaname="description" content="Four Wheels Car Store"><metaname="viewport" content="width=device-width, initial-scale=1.0"><!--RESET FILE --><linkrel="stylesheet" href="reset.css"><!--MAIN FILE--><linkrel="stylesheet" href="styles.css"><!-- Component Styles --><linkrel="stylesheet" href="app/header/header.css" /><linkrel="stylesheet" href="app/cars/cars.css" /><linkrel="stylesheet" href="app/footer/footer.css" /></head><body><headertitle="'Four Wheels'"></header><!-- Including angular then our javascript files. ORDER MATTERS --><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script><!--Our Custom Script Files--><scriptsrc="app/app.js"></script><scriptsrc="app/services/cars.service.js"></script><!-- Component Files --><scriptsrc="app/header/header.component.js"></script></body></html>In this step, we'll create a cars component that will use the carsSrvc service to display a list of cars available for sale.
- Open
app/cars/cars.component.js. - Create the skeleton of an Angular component.
- Use
fourWheelsas the application name. - Use
carsas the component name.
- Use
- Link the
cars.template.htmlto the component usingtemplateUrl. - Define the controller name as
carsCtrlusingcontrollerAs. - Create a controller function using
controller:- This controller should have the
carsSrvcservice injected into it.
- This controller should have the
The template will need access to two things in order to function correctly. The first being the list of cars that's stored on carsSrvc service. The second being a custom method that calls the buyCar method on the carsSrvc and then updates the list of cars. Using this we can assign values on the controller that the template will have access to.
- In the controller in
app/cars/cars.component.js:- Assign an array called
carsthat equals thecarsarray on thecarsSrvcservice. - Assign a method called
buyCarthat takes in anid:- This method should call the
buyCarmethod oncasSrvcwith theid. - This method should then update the value of
carsto be the new value of thecarsarray on thecarsSrvcservice.
- This method should call the
- Assign an array called
app/cars/cars.component.js
angular.module('fourWheels').component('cars',{templateUrl: 'app/cars/cars.template.html',controllerAs: 'carsCtrl',controller: function(carsSrvc){this.cars=carsSrvc.cars;this.buyCar=function(id){carsSrvc.buyCar(id);this.cars=carsSrvc.cars;};}});In this step, we'll modify the template for the cars component to display the list of cars available for sale. We'll then add our new component into index.html so we can see what the template will render.
- Open
app/cars/cars.template.html. - Locate the empty
ng-repeat:- Configure the
ng-repeatto loop through thecarsarray on thecarsCtrlcontroller.
- Configure the
- Update the commented sections to display the correct value for each
car.- You can look in the service to see what properties make up a
carobject.
- You can look in the service to see what properties make up a
- Locate the empty
ng-click:- Configure the
ng-clickto call thebuyCarmethod on thecarsCtrlcontroller with thecar'sid.
- Configure the
- Open
index.html. - Add a new script tag for the cars component.
- Just below the header component, render the cars component.
app/cars/cars.template.html
<divclass="cars__parent"><divclass="cars__child"><h1class="alfa-slab-one">Car Listings</h1><divclass="car__container" ng-repeat="car in carsCtrl.cars"><divclass="car__container-left"><divclass="car__attribute"><spanclass="car__attribute-header open-sans">Make:</span><divclass="car__attribute-value merri-sans"><!-- Car Make Here -->
{{ car.make }}
</div></div><br/><divclass="car__attribute"><spanclass="car__attribute-header open-sans">Color:</span><divclass="car__attribute-value merri-sans"><!-- Car Color Here -->
{{ car.color }}
</div></div></div><divclass="car__container-middle"><divclass="car__attribute"><spanclass="car__attribute-header open-sans">Model:</span><divclass="car__attribute-value merri-sans"><!-- Car Model Here -->
{{ car.model }}
</div></div><br/><divclass="car__attribute"><spanclass="car__attribute-header open-sans mr">Year:</span><divclass="car__attribute-value merri-sans"><!-- Car Year Here -->
{{ car.year }}
</div></div></div><divclass="car__container-right"><buttonclass="alfa-slab-one" ng-click="carsCtrl.buyCar( car.id )">BUY</button></div></div></div></div> index.html
<!DOCTYPE html><htmllang="en" ng-app="fourWheels"><head><title>Four Wheels</title><!-- META INFO --><metacharset="UTF-8"><metaname="description" content="Four Wheels Car Store"><metaname="viewport" content="width=device-width, initial-scale=1.0"><!--RESET FILE --><linkrel="stylesheet" href="reset.css"><!--MAIN FILE--><linkrel="stylesheet" href="styles.css"><!-- Component Styles --><linkrel="stylesheet" href="app/header/header.css" /><linkrel="stylesheet" href="app/cars/cars.css" /><linkrel="stylesheet" href="app/footer/footer.css" /></head><body><headertitle="'Four Wheels'"></header><cars></cars><!-- Including angular then our javascript files. ORDER MATTERS --><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script><!--Our Custom Script Files--><scriptsrc="app/app.js"></script><scriptsrc="app/services/cars.service.js"></script><!-- Component Files --><scriptsrc="app/header/header.component.js"></script><scriptsrc="app/cars/cars.component.js"></script></body></html>In this step, we'll create a footer component. This component will be designed to mimic a Contact Us section. This component will take a user's name and email and then when a user submits their information the component will clear out the input fields and display a confirmation message.
- Open
app/footer/footer.component.js. - Create the skeleton of an Angular component.
- Use
fourWheelsas the application name. - Use
footeras the component name.
- Use
- Link the
footer.template.htmlto the component usingtemplateUrl. - Define the controller name as
footerCtrlusingcontrollerAs. - Create a controller function using controller:
- Assign an empty string called
name. - Assign an empty string called
email. - Assign a false boolean called
contacted. - Assign a method called
contact.- This method should set the value of
nameandemailback to an empty string. - This method should set the value of
contactedto true.
- This method should set the value of
- Assign an empty string called
app/footer/footer.component.js
angular.module('fourWheels').component('footer',{templateUrl: 'app/footer/footer.template.html',controllerAs: 'footerCtrl',controller: function(){this.name="";this.email="";this.contacted=false;this.contact=function(){this.contacted=true;this.name="";this.email="";};},});In this step, we'll modify the template for the footer component to use ng-models and to have a ng-click event to call the contact method on the footerCtrl controller. We'll then add our new component into index.html so we can see what the template will render.
- Locate the
Name Inputcomment:- Add a new
inputelement with:- The input should have a class of:
footer__input. - The input should use an
ng-modelequal to thenameon thefooterCtrlcontroller.
- The input should have a class of:
- Add a new
- Locate the
Email Inputcomment:- Add a new
inputelement with:- The input should have a class of:
footer__input. - The input should use an
ng-modelequal to theemailon thefooterCtrlcontroller.
- The input should have a class of:
- Add a new
- Locate the empty
ng-click:- Call the
contactmethod on thefooterCtrlcontroller.
- Call the
- Locate the empty
ng-if:- The condition should be when
contactedon thefooterCtrlcontroller equals true.
- The condition should be when
- Open
index.html. - Add a new script tag for the footer component.
- Just below the cars component, render the footer component.
app/footer/footer.template.html
<divclass="footer__parent"><divclass="footer__child"><h1class="alfa-slab-one"> Contact Us </h1><divclass="footer__inputs"><divclass="footer__input-container"><divclass="footer__input-header open-sans">Name: </div><!-- Name Input Here --><inputclass="footer__input" ng-model="footerCtrl.name" /></div><divclass="footer__input-container"><divclass="footer__input-header open-sans">Email: </div><!-- Email Input Here --><inputclass="footer__input" ng-model="footerCtrl.email" /></div><buttonclass="footer__btn-contact open-sans" ng-click="footerCtrl.contact()">Contact!</button><pclass="footer__confirmation open-sans" ng-if="footerCtrl.contacted">We'll send you an email soon, thanks!</p></div></div></div> index.html
<!DOCTYPE html><htmllang="en" ng-app="fourWheels"><head><title>Four Wheels</title><!-- META INFO --><metacharset="UTF-8"><metaname="description" content="Four Wheels Car Store"><metaname="viewport" content="width=device-width, initial-scale=1.0"><!--RESET FILE --><linkrel="stylesheet" href="reset.css"><!--MAIN FILE--><linkrel="stylesheet" href="styles.css"><!-- Component Styles --><linkrel="stylesheet" href="app/header/header.css" /><linkrel="stylesheet" href="app/cars/cars.css" /><linkrel="stylesheet" href="app/footer/footer.css" /></head><body><headertitle="'Four Wheels'"></header><cars></cars><footer></footer><!-- Including angular then our javascript files. ORDER MATTERS --><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.js"></script><!--Our Custom Script Files--><scriptsrc="app/app.js"></script><scriptsrc="app/services/cars.service.js"></script><!-- Component Files --><scriptsrc="app/header/header.component.js"></script><scriptsrc="app/cars/cars.component.js"></script><scriptsrc="app/footer/footer.component.js"></script></body></html>If you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch.
© DevMountain LLC, 2017. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.