working with routes
60 views
Skip to first unread message
Walker Kinne
Mar 26, 2014, 2:28:51 PM3/26/14
to ang...@googlegroups.com
I am new to Angular JS and I am working with routes. I have a very simple application, but I am unable to get the route's to work properly. I will post my code below. Any help would be greatly appreciated. I am getting an error as soon as the page loads.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Week 2</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="main.js"></script>
<script src="dataService.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body ng-app="MyApp">
<div>
<div data-ng-view=""></div>
</div>
</body>
</html>
main.js:
/**
* Created by Walker on 3/4/14.
*/
var MyApp = angular.module("MyApp", []);
MyApp.config(function($routeProvider){
$routeProvider
.when('/',
{
controller: 'AddEmployee',
templateUrl: '/Partials/View2.html'
})
.when('/view2',
{
controller: 'AddEmployee',
templateUrl: '/Partials/View1.html'
})
.otherwise({ redirectTo: '/'});
});
MyApp.controller("AddEmployee", function ($scope, dataService){
$scope.userName;
$scope.nameArray = dataService.getNames();
$scope.addName = function(){
dataService.addNames($scope.userName, $scope.address, $scope.number);
$scope.userName = '';
$scope.address = '';
$scope.number = '';
};
$scope.deleteName = function(deletedName){
dataService.removeName(deletedName);
};
});
dataservice.js
MyApp.service("dataService", function(){
var namesArray = [];
function Employee(name, addr, phoneNumber){
this.name = name;
this.addr = addr;
this.phoneNumber = phoneNumber;
};
this.getNames = function(){
var str = localStorage.getItem("NameLS");
namesArray = JSON.parse(str) || namesArray;
return namesArray;
console.log(namesArray);
};
this.addNames = function(pName, pAddress, pNumber){
var test = new Employee(pName, pAddress, pNumber);
console.log(test)
namesArray.push(test);
console.log(namesArray);
var str = JSON.stringify(namesArray);
localStorage.setItem("NameLS", str);
};
this.removeName = function(pName){
namesArray.splice(namesArray.indexOf(pName), 1);
var str = JSON.stringify(namesArray);
localStorage.setItem("NameLS", str);
}
});
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Week 2</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="main.js"></script>
<script src="dataService.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body ng-app="MyApp">
<div>
<div data-ng-view=""></div>
</div>
</body>
</html>
main.js:
/**
* Created by Walker on 3/4/14.
*/
var MyApp = angular.module("MyApp", []);
MyApp.config(function($routeProvider){
$routeProvider
.when('/',
{
controller: 'AddEmployee',
templateUrl: '/Partials/View2.html'
})
.when('/view2',
{
controller: 'AddEmployee',
templateUrl: '/Partials/View1.html'
})
.otherwise({ redirectTo: '/'});
});
MyApp.controller("AddEmployee", function ($scope, dataService){
$scope.userName;
$scope.nameArray = dataService.getNames();
$scope.addName = function(){
dataService.addNames($scope.userName, $scope.address, $scope.number);
$scope.userName = '';
$scope.address = '';
$scope.number = '';
};
$scope.deleteName = function(deletedName){
dataService.removeName(deletedName);
};
});
dataservice.js
MyApp.service("dataService", function(){
var namesArray = [];
function Employee(name, addr, phoneNumber){
this.name = name;
this.addr = addr;
this.phoneNumber = phoneNumber;
};
this.getNames = function(){
var str = localStorage.getItem("NameLS");
namesArray = JSON.parse(str) || namesArray;
return namesArray;
console.log(namesArray);
};
this.addNames = function(pName, pAddress, pNumber){
var test = new Employee(pName, pAddress, pNumber);
console.log(test)
namesArray.push(test);
console.log(namesArray);
var str = JSON.stringify(namesArray);
localStorage.setItem("NameLS", str);
};
this.removeName = function(pName){
namesArray.splice(namesArray.indexOf(pName), 1);
var str = JSON.stringify(namesArray);
localStorage.setItem("NameLS", str);
}
});
Peter Bengtsson
Mar 26, 2014, 3:12:51 PM3/26/14
to ang...@googlegroups.com
What does the full error say in the console?
Walker Kinne
Mar 26, 2014, 3:35:43 PM3/26/14
to ang...@googlegroups.com
Peter Bengtsson
Mar 26, 2014, 4:34:38 PM3/26/14
to ang...@googlegroups.com
Actually, the best way to solve your problem is if you make a Plunker script. See the description for this mailing list.
On Wednesday, March 26, 2014 11:28:51 AM UTC-7, Walker Kinne wrote:
Walker Kinne
Mar 26, 2014, 5:19:15 PM3/26/14
to ang...@googlegroups.com
Ok so I created a Plunk. The link is here: http://plnkr.co/edit/B8P92j3MRi3ngg8Opoig?p=preview
Gordon Bockus
Mar 26, 2014, 6:45:24 PM3/26/14
to ang...@googlegroups.com
I found a few issues with your pluck. Find my updated version here: http://plnkr.co/edit/ld51vlEVm6HzOEPsuS6h?p=preview
Basically I think you are getting the error you posted b/c your app wasn't requiring ngRoute.
var MyApp = angular.module("MyApp", ['ngRoute']);
I also had to update a few other things to get it working...for one I didn't know how to make a directory in plunker land so I simplified the partials down to just view1.html and view2.html in the top level dir. Also in the plunker I had to include angular and angular-route. So be sure you have both of those in your index.html file.
Reply all
Reply to author
Forward
0 new messages