In this project, we'll implement routing and $http requests into an Angular application. You'll notice that the js/ folder has another level of folders inside of it. The Angular community has found that the best way to organize your files, so your project can scale, is to break out your code into "features". Therefore, you'll find all the HTML and JS for each feature in its matching folder. Take a minute to get familiar with the file structure.
- Fork and clone this repository.
cdinto the project directory.- Run
npm install. - After
npm install, runnpm run dev. - Take a minute to familiarize yourself with the file structure.
In this step, we'll create a container where the routing HTML will live. We'll also add some static HTML for navigating between routes.
- Open
index.html. - Above your
scripttags in thebody, create a newdivwith a class ofmenu.- Inside of
menuadd aulelement with threelielements: - Each
lielement should contain anaelement with aui-srefattribute that equals the name of the feature. - The
lifor the "products" feature should have a nestedulelement with anliforShoesandSocks.- The
ui-srefattribute on theselielements should use an object with anidproperty that equalsShoesorSocks.
- The
- Inside of
- Under the
divwith a class ofmenuadd a newdivwith a class ofview-container.- Inside of
view-containeradd adivelement with an attributeui-viewthat doesn't equal anything
- Inside of
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Routing App</title>
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="menu">
<ul>
<li><a ui-sref="home">Home</a></li>
<li>
Products
<ul>
<li><a ui-sref="products({id: 'shoes'})">Shoes</a></li>
<li><a ui-sref="products({id: 'socks'})">Socks</a></li>
</ul>
</li>
<li><a ui-sref="settings"> Settings </a></li>
</ul>
</div>
<div class="view-container">
<div ui-view></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>In this step, we'll inject ui.router into our Angular application and define the available routes. We'll also have to add ui.router's CDN into our index.html.
- Open
index.html. - Add a new script tag for the
ui.routerCDN just below the Angular CDN:https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js
- Open
js/app.js. - Inject
ui.routerintomyApp. - Chain a
.configtomyAppthat uses an anonymous function.- Just like you would for a
controllerorservice.
- Just like you would for a
- Inject
$stateProviderand$urlRouterProviderinto the anonymous function. - Call
$stateProviderand chain a.statefor each feature route ( hint: there should only be three )..stateshould be invoked and have two parameters:- The first parameter is the
stringof the route. This must match the strings used in the previous step.- Hint:
ui-sref.
- Hint:
- The second parameter is an object that has three properties:
- url: A string that specifies the route
- templateUrl: A string that is a file path to the HTML.
- controller: A string that specifies what controller the HTML should use.
- Only use
controllerfor the features that have acontroller.
- Only use
- The first parameter is the
- Call
$urlRouterProviderand chain a.otherwiseand pass in'/'.
js/app.js
angular.module('myApp', ['ui.router']).config( function( $stateProvider, $urlRouterProvider ) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'js/home/homeTmpl.html'
})
.state('products', {
url: '/products/:id',
templateUrl: 'js/products/productsTmpl.html',
controller: 'productsCtrl'
})
.state('settings', {
url: '/settings',
templateUrl: 'js/settings/settingsTmpl.html'
});
$urlRouterProvider
.otherwise('/');
});In this step, we'll update the productsSrvc.js to hit an API to get an array of products.
- Open
js/products/productsSrvc.js. - Inject
$httpinto the service. - Create a method on the service called
getShoeData:- This method should return a promise of a
$httpGET request:- The base url of this request should be:
https://practiceapi.devmountain.com/products. - A
categoryquery should be added to the URL with a value ofshoes.
- The base url of this request should be:
- This method should return a promise of a
- Create a method on the service called
getSockData:- This method should return a promise of a
$httpGET request:- The base url of this request should be:
https://practiceapi.devmountain.com/products. - A
categoryquery should be added to the URL with a value ofsocks.
- The base url of this request should be:
- This method should return a promise of a
js/products/productsSrvc.js
angular.module('myApp').service('productsSrvc', function( $http ) {
this.getShoeData = function() {
return $http({
method: 'GET',
url: 'https://practiceapi.devmountain.com/products?category=shoes'
});
};
this.getSockData = function() {
return $http({
method: 'GET',
url: 'https://practiceapi.devmountain.com/products?category=socks'
});
};
});In this step, we'll modify the "products" feature to display data based on what page the user is on.
- Open
js/products/productsCtrl.js. - Create a new Angular controller called
productsCtrl:- Inject
$scope,$stateParams, andproductsSrvc.
- Inject
- Add a new conditional to see if
idon$stateParamsis either'shoes'or'socks'.- If it is
'shoes', call thegetShoeDatamethod on theproductsSrvc:- Catch the response's data of this request and assign it to a
$scopevariable calledproductData.
- Catch the response's data of this request and assign it to a
- If it is
'socks', call thegetSockDatamethod on theproductsSrvc:- Catch the response's data of this request and assign it to a
$scopevariable calledproductData.
- Catch the response's data of this request and assign it to a
- If it is
- Open
js/products/productsTmpl.html. - Add a new
divelement that usesng-repeaton$scope.productData.- Add three
pelements inside the div to show the value oftype,color, andsize.
- Add three
- Open
index.html.- Include new
scripttags for theproductsCtrlandproductsSrvcjavascript files.
- Include new
js/products/productsCtrl.js
angular.module('myApp').controller('productsCtrl', function( $scope, $stateParams, productsSrvc ) {
if ( $stateParams.id === 'shoes' ) {
productsSrvc.getShoeData().then( function( response ) {
$scope.productData = response.data;
});
} else if ( $stateParams.id === 'socks' ) {
productsSrvc.getSockData().then( function( response ) {
$scope.productData = response.data;
});
}
}); js/products/productsTmpl.html
<h1> Product Page </h1>
<div ng-repeat="product in productData">
<p>Type: {{ product.type }}</p>
<p>Color: {{ product.color }}</p>
<p>Size: {{ product.size }}</p>
</div> index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Routing App</title>
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="menu">
<ul>
<li><a ui-sref="home">Home</a></li>
<li>
Products
<ul>
<li><a ui-sref="products({id: 'shoes'})">Shoes</a></li>
<li><a ui-sref="products({id: 'socks'})">Socks</a></li>
</ul>
</li>
<li><a ui-sref="settings"> Settings </a></li>
</ul>
</div>
<div class="view-container">
<div ui-view></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/products/productsCtrl.js"></script>
<script type="text/javascript" src="js/products/productsSrvc.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.
