Table data is normally repeatable by nature. ng-repeat directive can be used to draw table easily. Following example states the use of ng-repeat directive to draw a table. <table> <tr> <th> Name </th> <th> Marks </th> </tr> <tr ng-repeat = "subject in student.subjects" > <td> {{ subject.name }} </td> <td> {{ subject.marks }} </td> </tr> </table> Table can be styled using CSS Styling. <style> table , th , td { border : 1px solid grey ; border - collapse : collapse ; padding : 5px ; } table tr : nth - child ( odd ) { background - color : #f2f2f2; } table tr : nth - child ( even ) { background - color : #ffffff; } </style> Example Following example will showcase all the above mentioned directive. <html> <head> <
*FILE STRUCTURE
- script.js <!-- stores all our angular code -->
- index.html <!-- main layout -->
- pages <!-- the pages that will be injected into the main layout -->
home.html
about.html
contact.html
*HTML
This is the simple part. We’re using Bootstrap and Font Awesome. Open up your index.html file and we’ll add a simple layout with a navigation bar.
<!-- index.html -->
<!DOCTYPE
html>
<html>
<head>
<!-- SCROLLS
-->
<!-- load
bootstrap and fontawesome via CDN -->
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
/>
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css"
/>
<!-- SPELLS
-->
<!-- load
angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- HEADER
AND NAVBAR -->
<header>
<nav class="navbar
navbar-default">
<div class="container">
<div
class="navbar-header">
<a
class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul
class="nav navbar-nav navbar-right">
<li><a
href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a
href="#about"><i class="fa fa-shield"></i>
About</a></li>
<li><a href="#contact"><i
class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- MAIN
CONTENT AND INJECTED VIEWS -->
<div id="main">
<!--
angular templating -->
<!--
this is where content will be injected -->
</div>
</body>
</html>
For linking to pages, we’ll use the #. We don’t want the browser to think we are actually travelling to about.html or contact.html.
*Angular Application
MODULE AND CONTROLLER
We’re going to setup our application. Let’s create the angular module and controller. Check out the docs for more information on each.
First, we have to create our module and controller in javascript. We will do that now in script.js.
We’re going to setup our application. Let’s create the angular module and controller. Check out the docs for more information on each.
First, we have to create our module and controller in javascript. We will do that now in script.js.
// script.js
// create the
module and name it scotchApp
var scotchApp =
angular.module('scotchApp', []);
// create the controller and inject Angular's
$scope
scotchApp.controller('mainController',
function($scope) {
// create a
message to display in our view
$scope.message
= 'Everyone come and see how good I look!';
});
Let’s add the module and controller to our HTML so that Angular knows how to bootstrap our application. To test that everything is working, we will also show the
$scope.message variable that we created.
<!-- index.html -->
<!DOCTYPE
html>
<!-- define
angular app -->
<html ng-app="scotchApp">
<head>
<!-- SCROLLS
-->
<!-- load
bootstrap and fontawesome via CDN -->
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
/>
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css"
/>
<!-- SPELLS
-->
<!-- load
angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define
angular controller -->
<body ng-controller="mainController">
...
<!-- MAIN
CONTENT AND INJECTED VIEWS -->
<div id="main">
{{ message }}
<!--
angular templating -->
<!-- this
is where content will be injected -->
</div>
Inside of our
main div, we will now see the message that we created. Since we have our module and controller set up and we know that Angular is working properly, we will start working on using this layout to show the different pages.INJECTING PAGES INTO THE MAIN LAYOUT
ng-view is an Angular directive that will include the template of the current route (/home, /about, or /contact) in the main layout file. In plain words, it takes the file we want based on the route and injects it into our main layout (index.html).We will add the ng-view code to our site in the div#main to tell Angular where to place our rendered pages.
<!-- index.html -->
...
<!-- MAIN
CONTENT AND INJECTED VIEWS -->
<div id="main">
<!--
angular templating -->
<!-- this
is where content will be injected -->
<div ng-view></div>
</div>
Configure Routes and Views
Since we are making a single page application and we don’t want any page refreshes, we’ll use Angular’s routing capabilities.
Let’s look in our Angular file and add to our application. We will be using $routeProvider in Angular to handle our routing. This way, Angular will handle all of the magic required to go get a new file and inject it into our layout.
// script.js
// create the
module and name it scotchApp
// also
include ngRoute for all our routing needs
var scotchApp =
angular.module('scotchApp', ['ngRoute']);
// configure our
routes
scotchApp.config(function($routeProvider)
{
$routeProvider
// route
for the home page
.when('/',
{
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route
for the about page
.when('/about',
{
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route
for the contact page
.when('/contact',
{
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the
controller and inject Angular's $scope
scotchApp.controller('mainController',
function($scope) {
// create a message
to display in our view
$scope.message
= 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController',
function($scope) {
$scope.message
= 'Look! I am an about page.';
});
scotchApp.controller('contactController',
function($scope) {
$scope.message
= 'Contact us! JK. This is just a demo.';
});
Now we have defined our routes with $routeProvider. As you can see by the configuration, you can specify the route, the template file to use, and even a controller. This way, each part of our application will use its own view and Angular controller.
Our home page will pull the
home.html file. About and contact will pull their respective files. Now if we view our app, and click through the navigation, our content will change just how we wanted.To finish off this tutorial, we just need to define the pages that will be injected. We will also have them each display a message from its respective controller.
-----------------------------------------------------------------------------------------------------------------------
<!-- home.html -->
<div class="jumbotron
text-center">
<h1>Home
Page</h1>
<p>{{
message }}</p>
</div>
------------------------------------------------------------------------------------------------------------------------
<!-- about.html -->
<div class="jumbotron
text-center">
<h1>About
Page</h1>
<p>{{
message }}</p>
</div>
----------------------------------------------------------------------------------------------------------------------
<!-- contact.html -->
<div class="jumbotron
text-center">
<h1>Contact
Page</h1>
<p>{{
message }}</p>
</div>
---------------------------------------------------------------------------------------------------------------------
Comments
Post a Comment
Comment