Build a AngularJS Application
You now know enough to put together a basic AngularJS application.
Try it Yourself: A Basic AngularJS Application
We’ll start with a basic HTML page containing a text input field to accept a user’s search string and a <div> element to contain a list of search results containing the entered string.
This code shows the basic HTML of the page, with the AngularJS framework already included.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body>
<p>Search Departments: <input type="text"></p>
<div id="list-container">
<ul>
<li></li>
</ul>
</div>
</body>
</html>
Next, we’ll apply the necessary ng- directives to the page:
- The ng-app directive to the <body> element, defining this as the container for the AngularJS application.
- The ng-model directive to the search field, defining it as a model in our MVC framework.
- The ng-repeat directive to the <li> element in our list of search results. The <li> element will be repeated once for each search result.
We’ll also use the ng-init directive to set up some initial data for the application. In a real-world case, this data is more likely to be brought instead from an external source such as a server-side database, but this will serve for our example.
ng-init = "departments = [
{ name: 'Sales', contact: 'Marsha Brown'},
{ name: 'Support', contact: 'Dave Price'},
{ name: 'Production', contact: 'Grant Wales'},
{ name: 'Service', contact: 'Sherry Dell'},
{ name: 'Administration', contact: 'Sally Bennett'},
{ name: 'Accounting', contact: 'Kim Sutherland'},
{ name: 'Shipping', contact: 'Sandy Connell'}]"
Our initial data comprises an array of fictional departments, each including the department name and the name of the staff contact in charge of it.
This code shows the revised HTML, which also includes a little CSS styling for good measure.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example</title>
<style>
body {
background-color: #ddf;
font: 16px bold helvetica, arial, sans-serif;
}
input {
padding: 10px;
}
#list-container {
background-color: white;
color: #448;
border-radius: 25px;
border: 1px solid black;
padding: 25px;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body ng-app ng-init = "departments = [
{ name: 'Sales', contact: 'Marsha Brown'},
{ name: 'Support', contact: 'Dave Price'},
{ name: 'Production', contact: 'Grant Wales'},
{ name: 'Service', contact: 'Sherry Dell'},
{ name: 'Administration', contact: 'Sally Bennett'},
{ name: 'Accounting', contact: 'Kim Sutherland'},
{ name: 'Shipping', contact: 'Sandy Connell'}]">
<p>Search Departments: <input type="text" placeholder="Enter search
string" ng-model="searchString"></p>
<div id="list-container">
<ul>
<li ng-repeat="dept in departments">{{ dept.name }}</li>
</ul>
</div>
</body>
</html>
Save this code to an .html file and open it in your browser. You should see the departments and contacts listed in a page looking something like the one in this snapshot.
All well and good, but the search field doesn’t currently do anything. We’ll fix that by adding a filter to the ng-repeat directive, based on the data entered in the search field, as shown in below code.
The Finalized AngularJS Application
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example</title>
<style>
body {
background-color: #ddf;
font: 16px bold helvetica, arial, sans-serif;
}
input {
padding: 10px;
}
#list-container {
background-color: white;
color: #448;
border-radius: 25px;
border: 1px solid black;
padding: 25px;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body ng-app>
<p>Search Departments: <input type="text" placeholder="Enter search
string"
ng-model="searchString"></p>
<div ng-init = "departments = [
{ name: 'Sales', contact: 'Marsha Brown'},
{ name: 'Support', contact: 'Dave Price'},
{ name: 'Production', contact: 'Grant Wales'},
{ name: 'Service', contact: 'Sherry Dell'},
{ name: 'Administration', contact: 'Sally Bennett'},
{ name: 'Accounting', contact: 'Kim Sutherland'},
{ name: 'Shipping', contact: 'Sandy Connell'}]"></div>
<div id="list-container">
<ul>
<li ng-repeat="dept in departments | filter: searchString">{{
dept.name + " (" + dept.contact + ")" }}</li>
</ul>
</div>
</body>
</html>
And that’s all we need to do! AngularJS handles the data binding so the filter acts in real time as a user types
