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>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">
<!-- 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-->
<link rel="stylesheet" href="Animate.css">
<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;" class="view-animate" 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 class="activator" src="http://www.cronj.com/blog/wp-content/uploads/2014/12/angularjs-ionic-framework.jpg" width="100px">
</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> Submitting a form and preventing the default action Since the role of forms in client-side Angular applications is different than in classical roundtrip apps, it is desirable for the browser not to translate the form submission into a full page
reload that sends the data to the server. Instead some javascript logic should be triggered to handle the form submission in an application-specific way. For this reason, Angular prevents the default action (form submission to the server) unless
the
FORM element has an action attribute specified. You can use one of the following two ways to specify what javascript method should be called when a form is submitted: ngSubmit directive on the form element ngClick directive on the first button or input
field of type submit (input[type=submit])
</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>Image</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><img width="40px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-hkffbnt_gUW5eLB3lhk2jnoqpLuSEwWjAP61Ay4ROyVjyG8t" alt="" class="circle responsive-img"> </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" align="center" style="height:50px;">
© Copyright XYZ </div>
</footer>