-
Notifications
You must be signed in to change notification settings - Fork 341
Lesson Get Started with Angular.js
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
};
})();Thanks for visiting, if you like this please feel free to star my repo, follow me or even contact me about contributing as it will be a lot of work and having help would be cool.
- HTML5 and CSS
- Responsive Design with Bootstrap
- Gear up for Success
- jQuery
- Basic JavaScript
- Object Oriented and Functional Programming
- Basic Algorithm Scripting
- Basic Front End Development Projects
- Intermediate Algorithm Scripting
- JSON APIs and Ajax
- Intermediate Front End Development Projects
- Claim Your Front End Development Certificate
- Upper Intermediate Algorithm Scripting
- Automated Testing and Debugging
- Advanced Algorithm Scripting
- AngularJS (Legacy Material)
- Git
- Node.js and Express.js
- MongoDB
- API Projects
- Dynamic Web Applications
- Claim Your Back End Development Certificate
- Greefield Nonprofit Project 1
- Greefield Nonprofit Project 2
- Legacy Nonprofit Project 1
- Legacy Nonprofit Project 2
- Claim your Full Stack Development Certification
- Whiteboard Coding Interview Training
- Critical Thinking Interview Training
- Mock Interview 1
- Mock Interview 2
- Mock Interview 3