i am just new to angular js and when I tried to study routing one error occurs..
please check this..
here is my index.html
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Angular</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div data-ng-view=""> </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var demoApp = angular.module('demoApp', []);
demoApp.controller('firstController', function($scope) {
$scope.customers = [{
name: 'nik',
city: 'san fransisco'
}, {
name: 'henry',
city: 'new york'
}, {
name: 'avida',
city: 'california'
}, {
name: 'lynda',
city: 'texas'
}];
$scope.addCust = function($scope) {
$scope.customers.push({
name: $scope.newCust.name,
city: $scope.newCust.city
})
}
});
demoApp.config(function($routeProvider) {
$routeProvider
.when('/view1', {
controller: 'firstController',
templateUrl: '1.html'
})
.when('/view2', {
controller: 'firstController',
templateUrl: '2.html'
})
.otherwise({
redirectTo: '/view1'
});
});
</script>
</body>
</html>
routing is not working, as it supposed to load "/view2" as default when i take index.html
I hope no need to include code from 1.html and 2.html here, for reference as that just contains the 'li' tag which shows the data from this.
Error is,
angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=demoApp&p1=Error%3A…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.6%2Fangular.min.js%3A39%3A222)
Thank.
you must include ng-route script angular-route
Related
Code
<body ng-app="ngapp">
<h2>NG App</h2>
<div>
<ng-view></ng-view>
</div>
<script src="Scripts/angular.min.js"></script>
<script>
var app = angular.module('ngapp', ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Page1.html',
controller: 'simpCtrl'
})
.when('/view2', {
templateUrl: 'Page2.html',
controller: 'simpCtrl'
});
});
app.controller('simpCtrl', function ($scope) {
$scope.customers = [
{ name: 'Jack', age: 10 },
{ name: 'Abdul', age: 12 },
{ name: 'Zubair', age: 11 },
{ name: 'Ammar', age: 10 }
];
});
</script>
I have registered the routes properly but its is not working, I don't know why. Any Idea how to debug or find misbehaving code in angular?
Page1.html
<div>
<h2>View 1</h2>
Customer Name:
<input type="text" ng-model="search.name" />
<ul>
<li ng-repeat="n in customers | orderBy:'name' | filter:search:strict ">{{n.name|uppercase}} - {{n.age}}
</li>
</ul>
View 2
Thanks
Plunker link to code
There are few issues with your application,
(i) You are refering to angular2 library, change it like this
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
(ii) you have not added reference for ngRoute
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4/angular-route.js"></script>
Working Application
I have an array called reviews in my app.js file.
I'm trying to output the two hardcoded reviews on the screen, but nothing appears.
The error in the console says that the mainfunction is undefined, but I defined it I though with the correct syntax. Can anyone tell me what's the issue with my code. currently the page is blank and no reviews are outputting to the screen.
app.js
var app = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/page1', {
templateUrl: 'page1.html'
})
.when('/page2', {
templateUrl: 'page2.html'
});
$locationProvider.html5Mode({enabled: true, requireBase: false});
app.controller('mainController', function($scope){
$scope.reviews = [
{
name: 'Joe',
review: "awesome site. Super informative"
},
{
name: 'Bill',
review: "Sweet site dude!"
}
];
});
}]);
index.html
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<div id="headerBar">
<a ng-href="/page1" id="page1">Page 1</a>
<a ng-href="/page2" id="page2">Page 2</a>
</div>
<div id="templateView" ng-view></div>
<div id="reviews" ng-controller="mainController">
<div id="reviewOutput" ng-repeat="review in reviews">
{{review.name}}
</div>
</div>
<script src='bower_components/angular/angular.js'></script>
<script src="bower_components/angular-route/angular-route.js">
</script>
<script src="app.js"></script>
</body>
</html>
Console Error
Error: [ng:areq] Argument 'mainController' is not a function, got undefined
http://errors.angularjs.org/1.5.7/ng/areq?p0=mainController&p1=not%20a%20function%2C%20got%20undefined
at angular.js:68
at assertArg (angular.js:1885)
at assertArgFn (angular.js:1895)
at $controller (angular.js:10210)
at setupControllers (angular.js:9331)
at nodeLinkFn (angular.js:9116)
at compositeLinkFn (angular.js:8510)
at compositeLinkFn (angular.js:8513)
at compositeLinkFn (angular.js:8513)
at publicLinkFn (angular.js:8390)
Variables in angular expressions refer to attributes of the $scope. Not to local variables defined in the controller, which, by definition, are only accessible from the controller (since they are local variables).
app.controller('mainController', function($scope) {
$scope.reviews = [ ... ];
});
and
<div id="reviewOutput" ng-repeat="review in reviews">
Since you're using controllerAs, the controller itself is in the $scope, in a field that you chose to name ctrl. So the view can access the controller, and its fields. So you can do
app.controller('mainController', function() {
this.reviews = [ ... ];
});
and
<div id="reviewOutput" ng-repeat="review in ctrl.reviews">
Currently your reviews array is private. Attach it to this to make it part of the controller.
...
this.reviews = [
{
name: 'Joe',
review: "awesome site. Super informative"
},
{
name: 'Bill',
review: "Sweet site dude!"
}
];
try this https://plnkr.co/edit/1zn6FLr8oRWHE9Y89k4z?p=preview
app.controller('mainController',['$scope', function($scope){
$scope.reviews = [
{
name: 'Joe',
review: "awesome site. Super informative"
},
{
name: 'Bill',
review: "Sweet site dude!"
}];
}]);
if you want to use object in DOM you need to add $scope
I have a very simple program where I am trying to load a page in a using a dropdown menu. But for some reason, the $location.path is not working.
Here is my code.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="sampleApp">
<div>
<div>
<div ng-controller="RouteController">
<select ng-model="opt.selector" ng-options="opt as opt.label for opt in options">
</select>
<button ng-click="selectFn()">Go</button>
</div>
<div>
<div ng-view></div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
JS
var sampleApp = angular.module('sampleApp', []);
sampleApp .config(['$routeProvider','$locationProvider',
function($routeProvider) {
$routeProvider.
when('/one', {
templateUrl: '1.html',
//controller: 'AddOrderController'
}).
when('/two', {
templateUrl: '2.html',
//controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/index.html'
});
}]);
sampleApp.controller('RouteController', function($scope){
$scope.options=[
{label: '1', url:'#one'},
{label: '2', url:'#two'}
];
$scope.selectFn = function($locationProvider){
$location.path($scope.opt.selector.url));
}
});
Could someone tell me where I am going wrong?
I am getting the following error:
ReferenceError: $location is not defined
at Object.$scope.selectFn
You need to inject $location into your controller so that the singleton can be used inside the controller. You are (I think trying to inject it int a function in your controller?) which won't work the way you are using it right now. If you want to do it the way you are doing right now:
sampleApp.controller('RouteController', function($scope, $location){
$scope.options=[
{label: '1', url:'#one'},
{label: '2', url:'#two'}
];
$scope.selectFn = function(){
$location.path($scope.opt.selector.url));
}
});
Although I highly recommend using the $window service to redirect
I need to run this router without nodejs server. Is it possible. All other files for routing having in the same directory.But it is not routing with the certain url to desired pages. Also the first page 'online_exam_1.html' content is not displaying while I am open this page with browser.
<html data-ng-app="demoApp" >
<head>
<title>
Online Exam Syatem
</title>
</head>
<body ><div class="container" ng-controller="RoutingController">
<div>
<h3>Adding Module Configuration and Routing</h3>
<!-- ng-view handles loading partials into it based
upon routes -->
<div data-ng-view></div>
</div>
</div>
<script src="angular.min.js">
<script src="angular_route.js"> </script>
</script>
<script>
demoApp.config(function ($routeProvider) {
alert('in');
$routeProvider
.when('/',
{
controller: 'RoutingController',
templateUrl: urlBase + 'online_exam_1.html'
})
//Define a route that has a route parameter in it (:customerID)
.when('/2',
{
controller: 'RoutingController',
templateUrl: urlBase + 'online_exam_2.html'
})
.otherwise({ redirectTo: '/partial1' });
});
demoApp.controller('RoutingController', function ($scope) {
$scope.customers = [
{ name: 'Dave Jones', city: 'Phoenix' },
{ name: 'Jamie Riley', city: 'Atlanta' },
{ name: 'Heedy Wahlin', city: 'Chandler' },
{ name: 'Thomas Winter', city: 'Seattle' }
];
});
</script>
</body>
</html>
I am having an issue using templateURL.
I have the following code
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<title>Angular Demo</title>
</head>
<body>
<div class="container">
<ul class="nav nav-pills">
<li>Home</li>
<li>About</li>
</ul>
</div>
<div ng-view>
</div>
<script src="scripts/libraries/angular.min.js"></script>
<script src="scripts/libraries/angular-route.min.js"></script>
<script type="text/javascript">
var testApp = angular.module("testApp", ['ngRoute']);
testApp.config(function($routeProvider)
{
$routeProvider
.when('/',
{
controller: 'TestController',
template: '<h1>HOME</h1>'
})
.when('/about',
{
controller: 'TestController',
templateURL: 'partials/about.html'
})
.otherwise ({redirectTo: '/'});
});
var controllers = {};
controllers.TestController = function($scope)
{
$scope.list =
[
{fname: "John", sname: "Doe"},
{fname: "John", sname: "Doe"}
];
};
testApp.controller(controllers);
</script>
</body>
</html>
about.html is in partials folder
template: "HOME" works fine, but templateURL doesn't bind the content of about.html to ng-view.
Let me know if you think I'm missing anything.
Thanks
Use
templateUrl: 'partials/about.html'
Not
templateURL: 'partials/about.html'
http://plnkr.co/LzYn0IxRtkV1xoKpcg5z