<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Types</title>
<script src="../../Scripts/angular.js"></script>
<script src="TypesCtrl.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<h3>Select a type</h3>
<br />
<table>
<tr>
<td ng-repeat="Type in Types">
<a href="#"><img src="Images/type1.png" ng-show="Type.TypeId=='1'" /></a>
<a href="#"><img src="Images/type2.png" ng-show="Type.TypeId=='2'" /></a>
<a href="#"><img src="Images/type3.png" ng-show="Type.TypeId=='3'" /></a>
<a href="#"><img src="Images/type4.png" ng-show="Type.TypeId=='4'" /></a>
</td>
</tr>
</table>
</div>
</body>
</html>
(function () {
angular.module("myApp", []).controller("myController", TypeCtrlFunction);
TypeCtrlFunction.$inject = ["$scope", "$http"];
function TypeCtrlFunction($scope, $http) {
$http.get('http://localhost:49358/api/myAPI/GetTypes').
then(function (result) {
$scope.DeviceTypes = result.data;
});
};
})();
$scope.data = {
pageNo : 1,
screeen1: (),
screeen2: (),
screeen3: (),
screeen4: (),
screeen5: (),
}
app.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'loginScreen.html',
controller: 'mainController'
})
// route for the about page
.when('/screen1', {
templateUrl: 'screen1.html',
controller: 'mainController'
})
// route for the contact page
.when('/screen2', {
templateUrl: 'screen2.html',
controller: 'mainController'
})
// route for the login page
.when('/screen3', {
templateUrl: 'screen3.html',
controller: 'mainController'
});
});
$scope.username ='';
$scope.password = '';
$scope.pageNo = 0;
$scope.loginUser= function () {
// set up an http request for a login, passing $scope.username and $scope.password to the server.
}
$scope.loginUser= function () {
if(($scope.username==='bigrat')&&($scope.password==='cheese')) {
$scope.pageNo = 1;
}
}
This collects username and password and on validation you go to page 1
<label for="usaename">Password</label>
<input type="text" name="username"ng-model="username" />
<label for="password">Password</label>
<input type="password" name="password" ng-model="password" />
<button ng-click="logInUser()">Login</button>
<form method="get" id="frmLogin" action="">
<input ng-model="username" type="text" id="txtUsername" />
<br />
<input type="submit" value="Login" id="btnLogin" ng-click="LoginUser()"/>
<br />
<span id="lblMsg"></span>
</form>
var app = angular.module('MyApp', []);
app.controller('mainController', function ($scope) {
LoginUser()=function(){
//code here to go to another page?
validateUser = function () {
if (data.isValidUser) {
$window.location.href = '/screen1.html';
}
else
alert('Login incorrect');
}
}
});
app.constant("maxPages",10);
app.controller('mainController', ['$scope','maxPages',function ($scope,maxPages) {
$scope.username ='';
$scope.password = '';
$scope.pageNo = 0;
$scope.LoginUser=function() {
if(($scope.username==='bigrat')&&($scope.password==='cheese')) {
$scope.pageNo = 1;
}
}
// can display a page?
$scope.canDisplayPage = function(page) {
return page===$scope.pageNo;
}
// next button handler
$scope.nextPage = function() {
if($scope.pageNo<maxPages) {
$scope.pageNo = $scope.pageNo+1;
}
}
}]);
<!-- Page 0 - the login page -->
<div ng-show="canDisplayPage(0)">
<input ng-model="username" type="text"/>
<br />
<input type="submit" value="Login" ng-click="LoginUser()"/>
<br />
<span></span>
</div>
<!-- Page 1 first set of questions -->
<div ng-show="canDisplayPage(1)">
.......................
<button ng-click="nextPage()">next page</button>
</div>
<!-- and so on and so forth -->
<div ng-show="canDisplayPage(1)">
<table>
<tr>
<td ng-repeat="Type in Types">
<a href="#"><img src="Images/abc.gif" ng-show="Type.TypeId=='1'" /></a>
<a href="#"><img src="Images/def.png" ng-show="Type.TypeId=='2'" /></a>
<a href="#"><img src="Images/ghi.png" ng-show="Type.TypeId=='3'" /></a>
<a href="#"><img src="Images/jkl.ico" ng-show="Type.TypeId=='4'" /></a>
</td>
</tr>
</table>
<button ng-click="nextPage()">next page</button>
</div>
(function () {
var app= angular.module("myApp", []);
app.constant("maxPages", 10);
app.controller('mainController', ['$scope', '$http', 'maxPages', function ($scope, $http, maxPages) {
$scope.username = '';
$scope.pageNo = 0;
$scope.LoginUser = function ($scope, $http) {
alert($scope.username)
if ($scope.username === '222222') {
$scope.pageNo = 1;
//get types
$http.get('http://localhost:49358/api/myApp/GetTypes').
then(function (result) {
$scope.Types = result.data;
});
}
}
// can display a page?
$scope.canDisplayPage = function (page) {
return page === $scope.pageNo;
}
// next button handler
$scope.nextPage = function () {
if ($scope.pageNo < maxPages) {
$scope.pageNo = $scope.pageNo + 1;
}
}
}]);
})();
Passing Data between controllers:
https://thinkster.io/a-better-way-to-learn-angularjs/services
https://egghead.io/lessons/angularjs-sharing-data-between-controllers
Making UI aware of changes in data that are shared between controllers:
http://brandonclapp.com/using-angularjs-services-to-broadcast-messages-between-controllers/
These links should help you understand how to address your comment:
Also, in your code you can eliminate the repeating <img ng-show=""> tags with the following:
Open in new window