var MyApp = angular.module("MyApp", ['ngRoute']);
// configure our routes
MyApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/Home', {
templateUrl: 'Home.html'
//, controller: 'mainController'
})
// route for the contact page
.when('/Contact', {
templateUrl: 'Contact.html'
//, controller: 'contactController'
})
// route for the diary list page
.when('/DiaryList', {
templateUrl: 'DiaryList.html'
// controller: 'ctrlDiary'
})
// route for the home page
.when('/', {
templateUrl: 'Home.html'
//, controller: 'mainController'
})
// Otherwise route to Home page
.otherwise({
redirectTo: '/Home'
});
});
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="MyApp">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<!--jquery added for materialized.css to work-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<!--App.js-->
<script src="app.js"></script>
<!--Controller.js.js-->
<script src="Controller.js"></script>
<body>
<!-- header section -->
<div class="" id="Navigation" ng-include="'Header.html'"></div>
<div></div>
<!--content section-->
<!-- <pre>$location.path() = {{$location.path()}}</pre>-->
<div style="min-width:500px;" ng-view></div>
<div class="teal" id="Footer" ng-include="'Footer.html'"></div>
</body>
</html>
/* Put your css in here */
<nav>
<div class=" teal nav-wrapper">
<a href="#" class="teal brand-logo right">
<img ng-src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/AngularJS_logo.svg/695px-AngularJS_logo.svg.png"
width="150px"
</a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li><a href="#Home" class="home">Home</a></li>
<li><a href="#DiaryList">Diary List</a></li>
<li><a href="#Contact">Contact Us</a></li>
</ul>
</div>
</nav>
<div id="home" class="container">
<h3 align="left">Home Page</h3>
<hr>
<div class="card teal hoverable">
<div class="card-image waves-effect waves-block waves-light">
<img width="100px" height="50%" class="activator" title ="Click to open"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/AngularJS_logo.svg/695px-AngularJS_logo.svg.png"
>
</div>
<div class="card-content">
<span class="card-title activator ">Card Title<i class="material-icons right">Click to view more details</i></span>
<p><a href="#">This is a link</a></p>
</div>
<div class="card-reveal white-text">
<span class="card-title grey-text">Card Title<i class="material-icons right">close</i></span>
<p class="grey-text">Here is some more information about this product that is only revealed once clicked on.
<br>
AngularJS (commonly referred to as "Angular" or "Angular.js") is an open-source web application framework mainly maintained by Google and by a community of individuals most notably, Rangle.io as well as group developers and corporations to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures,
along with components commonly used in rich Internet applications.
<br>
The AngularJS library works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.
</p>
</div>
</div>
</div>
<div id="contact" class="container">
<h3>Contact Us</h3>
<article>
<fieldset><legend class="flow-text"> Global Locations</legend>
<section class="sectionBlock">
<p class="introbody">Whether you're around the corner or across the world, chances are you're near one of our locations:</p>
<table>
<tbody>
<tr class="row_spacing">
<td class="two_columns"><span class="heading1" data-mce-mark="1"><strong>The Americas</strong></span><br> 3170 Fairview Park Drive<br> Falls Church, VA 22042<br> USA <br> +1.703.876.1000</td>
<td class="two_columns">
<p><span class="heading1" data-mce-mark="1"><strong>Asia, Middle East, Africa</strong></span><br> Level 9, UE Biz Hub East<br>6 Changi Business Park Avenue 1<br>Singapore 468017<br>Republic of Singapore<br>+65 68099 000</p>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr class="row_spacing">
<td class="two_columns">
<p><span class="heading1" data-mce-mark="1"><strong>Australia</strong></span><br> 26 Talavera Road<br>Macquarie Park, NSW 2113<br>Australia<br>+61(2)9034.3000</p>
</td>
<td class="two_columns">
<p><span class="heading1" data-mce-mark="1"><strong>Central and Eastern Europe</strong></span><br> Abraham-Lincoln-Park 1<br>65189 Wiesbaden<br>Germany<br>+49.611.1420</p>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr class="row_spacing">
<td class="two_columns">
<p><span class="heading1" data-mce-mark="1"><strong>Nordic and Baltic Region</strong></span><br class="style1"> Retortvej 8<br> DK-2500 Valby<br>Denmark<br>+45.36.14.4000</p>
</td>
<td class="two_columns">
<p><span class="heading1" data-mce-mark="1"><strong>South and West Europe</strong></span><br> Immeuble Balzac<br>10 place des Vosges<br>92072 Paris la Défense Cedex<br>France<br>+33.1.55.707070</p>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr class="row_spacing">
<td class="two_columns">
<p><span class="heading1"><strong>UK, Ireland & Netherlands</strong></span><br> Floor 4<br>One Pancras Square<br>London<br>N1C 4AG<br>+44 020 3696 3000</p>
</td>
<td class="two_columns"><span class="heading1" data-mce-mark="1"> </span></td>
</tr>
</tbody>
</table>
</section>
</fieldset>
</article>
</div>
<div id="DiaryList" class="container" ng-controller="ctrlDiary">
<h3>Diary List Page</h3>
<hr/>
<fieldset>
<legend class="flow-text">Add User</legend>
<table class="table table-striped">
<tr class="row">
<td>
<input type="text" placeholder="Enter User Name" ng-model="AddName" class="textBox" />
</td>
<td>
<input type="text" placeholder="Enter Gender" ng-model="AddGender" class="textBox" required="required" />
<select>
<option>hjdhsdhsjh</option>
</select>
</td>
<td>
<input type="text" placeholder="Enter Occupation" ng-model="AddOccupation" class="textBox" required="required" />
</td>
<td>
<input type="text" placeholder="Enter Address" ng-model="AddAddress" class="textBox" required="required" />
</td>
<td>
<input type="button" ng-click="AddUser()" value="Add User" class="btn btn-primary " />
</td>
</tr>
</table>
</fieldset>
<table class="row">
<tr>
<td colspan="3" style="width: auto;">
<input type="text" ng-model="searchText" class="textBox" placeholder="Enter text to search" />
</td>
</tr>
<tr>
<th>Sr No#</th>
<th>Name
<br />
<input type="text" placeholder="search" width="10px;" ng-model="name" />
</th>
<th>Gender
<br />
<input type="text" placeholder="search" ng-model="Gender" />
</th>
<th>Occupation
<br />
<input type="text" placeholder="search" ng-model="Occupation" />
</th>
<th>Address
<br />
<input type="text" placeholder="search" ng-model="Address" />
</th>
<th>Remove</th>
<!-- <th>Update</th>-->
</tr>
<tr ng-repeat="user in UserDetails | filter:searchText | filter:name | filter:Gender | filter:Occupation | filter:Address">
<td>{{$index+1}}</td>
<td>{{user.Name}}</td>
<td>{{user.Gender}}</td>
<td>{{user.Occupation}}</td>
<td>{{user.Address}}</td>
<td>
<input type="button" value="X" class="btn btn-floating btn-primary waves-effect waves-light red" ng-click="RemoveUser(user)" />
</td>
<td>
</tr>
</table>
</div>
// Display User details in grid
// diarty list controller
MyApp.controller("ctrlDiary", ["$scope",
function($scope) {
var UserDetails = [];
$scope.UserDetails = [{
'Name': 'Ankur',
'Gender': 'Male',
'Occupation': 'System engineer',
'Address': 'Delhi'
}, {
'Name': 'Nitin',
'Gender': 'Male',
'Occupation': 'SE',
'Address': 'Gurgaon'
}, {
'Name': 'Prachi',
'Gender': 'Female',
'Occupation': 'SE',
'Address': 'Gurgaon'
}, {
'Name': 'Ramanpreet',
'Gender': 'Female',
'Occupation': 'SE',
'Address': 'Delhi'
}, {
'Name': 'Icchit',
'Gender': 'Male',
'Occupation': 'SE',
'Address': 'Noida'
}, {
'Name': 'Priyanka',
'Gender': 'Female',
'Occupation': 'SE',
'Address': 'Delhi'
}];
// Add user details in grid
$scope.AddUser = function() {
$scope.UserDetails.push({
'Name': $scope.AddName,
'Gender': $scope.AddGender,
'Occupation': $scope.AddOccupation,
'Address': $scope.AddAddress
});
$scope.Name = '';
$scope.Gender = '';
$scope.Occupation = '';
$scope.Address = '';
alert("User Added!!!");
};
// remove user
$scope.RemoveUser = function(user) {
var index = $scope.UserDetails.indexOf(user);
$scope.UserDetails.splice(index, 1);
}
}
]);
<footer>
<div class="white-text" style="height:50px;">
© Copyright XYZ </div>
</footer>