Waypoint Get Started with Angular.js - GJSmith3rd/FreeCodeCamp-BootCamp GitHub Wiki
Gilbert Joseph Smith III
Github | FreeCodeCamp | CodePen | LinkedIn | Blog/Site | E-Mail
To create a module we first create a variable for the app, then we will use the angular library to create a module, we give it a name and an array of dependencies, it can be an empty array if there are no dependencies.
var app = angular.module('store', []);Don't forget to add the library to the html though.
This is very simple, you just have to add it as any other script or library, add a link to the <body>
<body>
<script type="text/javascript" src="app.js"></script>
</body>Then on the <html> tag we include np-app="store"
They allows us to insert dynamic values into our HTML.
<p>
I am {{4 + 6}}
</p>This will be the same as <p>I am 10</p>
It also works for strings too. There are more examples here.
Controllers are where we define out app's behavior by defining functions and values.
(function(){
var app = angular.module('store', []);
app.controller('StoreController', function(){
this.product = gem;
});
})();This will do the magic in this scope only.
<div ng-controller="StoreCOntroller as store">
<h1> {{store.product.name}} </h1> //display the name
<h2> ${{store.product.price}} </h2> //display price
<p> {{store.product.description}} </p> //displays description
</div><!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body class="container" ng-controller="StoreController as store">
<div class="product row" ng-hide="store.product.soldOut">
<h3>
{{store.product.name}}
<em class="pull-right">${{store.product.price}}</em>
</h3>
<button ng-show="store.product.canPurchase">Add to Cart</button>
</div>
</body>
</html>(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.product = gem;
});
var gem = {
name: 'Azurite',
price: 110.50,
canPurchase: false,
soldOut: true
};
})();