Don't see what I'm missing here. My javascript isn't throwing any errors, but when I run the main page all I get is a blank screen; it appears that view1.htm isn't loading.
Here's the main page:
<!doctype HTML>
<html ng-app="demoApp">
<!--- This is how you integrate with partials (views)... --->
<head>
<title>Using AngularJS Views</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<!-- normally would put this in it's own js file and call with script src="" -->
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when("/",
{
controller:"simpleController",
templateURL:"partials/view1.htm"
})
.when("/view2",
{
controller:"simpleController",
templateURL:"partials/view2.htm"
})
.otherwise({ redirectTo: "/"});
});
demoApp.controller('simpleController', ['$scope', function($scope) {
$scope.customers = [
{name:"David Jones", city:"Phoenix"},
{name:"James Riley", city:"Atlanta"},
{name:"Heedy Wahlin", city:"Chandler"},
{name:"Thomas Winter", city:"Seattle"}
];
$scope.addCustomer = function(){
$scope.customers.push(
{name: $scope.newCustomer.name, city: $scope.newCustomer.city}
);
};
}]);
</script>
</head>
<body>
<div>
<!-- placeholder for the views -->
<div ng-view></div>
</div>
</body>
</html>
and here's partials/view1.htm:
<div class="container">
<h2>View 1</h2>
Name:
<br/>
<input type="text" ng-model="filter.name" />
<br/>
<ul>
<li ng-repeat="cust in customers | filter:filter.name">{{cust.name}}</li>
</ul>
<br/>
Customer Name:<br/>
<input type="text" ng-model="newCustomer.name" />
<br/>
Customer City:<br/>
<input type="text" ng-model="newCustomer.city" />
<br/>
<button ng-click="addCustomer()">Add Customer</button>
View 2
</div>
Thanks for any help.
Found it. templateURL should be templateUrl.
Related
I'm learning AngularJS and trying to develop a simple app. The app consist of 2 pages(sections) which are list and details.
If I visit both page separately (manually enter the URL in the address bar), both pages loads fine without any error. But if I navigate to details page from list page, the console displays this error.
TypeError: Cannot read property '$$phase' of null
at Object.$$debounceViewValueCommit (angular.min.js:293)
at Object.$setViewValue (angular.min.js:293)
at Array.<anonymous> (angular.min.js:315)
at m.$digest (angular.min.js:145)
at m.$apply (angular.min.js:147)
at l (angular.min.js:101)
at XMLHttpRequest.N.onload (angular.min.js:106)
However, the page still load fine but the error bothers me. What exactly is happening?
app.js
var myApp = angular.module('myApp', ['ngRoute', 'heroControllers']);
myApp.config(['$routeProvider', function ($routeProvider) {
"use strict";
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListController'
}).
when('/details/:itemId', {
templateUrl: 'partials/details.html',
controller: 'DetailsController'
}).
otherwise({
redirectTo: '/list'
});
}]);
//controller
var heroControllers = angular.module('heroControllers', []);
heroControllers.controller('ListController', ['$scope', '$http', function ($scope, $http) {
"use strict";
$http.get('js/data.json').then(function (response) {
$scope.hero = response.data;
$scope.order = "nickname";
});
}]);
heroControllers.controller('DetailsController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
"use strict";
$http.get('js/data.json').then(function (response) {
$scope.hero = response.data;
$scope.whichItem = $routeParams.itemId;
});
}]);
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Demo</title>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="page-header">
<h1>Heroes</h1>
</div>
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
list.html
<section>
<div class="form-group">
<input ng-model="query" type="text" class="form-control" placeholder="Search for heroes" autofocus>
</div>
<div class="form-group">
<label>Sort by: </label>
<select ng-model="order">
<option value="nickname">Nickname</option>
<option value="name">Name</option>
</select>
<input ng-model="direction" type="radio" name="direction" checked>
<label>Ascending</label>
<input ng-model="direction" type="radio" name="direction" value="reverse">
<label>Descending</label>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in hero | filter: query | orderBy: order:direction">
<a href="#!/details/{{hero.indexOf(item)}}">
<img ng-src="images/{{item.imagename}}.png" alt="Photo of {{item.nickname}}">
<div>
<h2>{{item.nickname | uppercase}}</h2>
<h3>{{item.name}}</h3>
</div>
</a>
</li>
</ul>
</section>
details.html
<section>
<div ng-model="hero" class="jumbotron">
<h2>{{hero[whichItem].nickname}}</h2>
<div>
<h3>{{hero[whichItem].name}}</h3>
<img ng-src="images/{{hero[whichItem].imagename}}.png" alt="Photo of {{hero[whichItem].imagename}}">
<div>{{hero[whichItem].lore}}</div>
</div>
</div>
« Back to search
</section>
data.json
[
{
"nickname" : "Sniper",
"imagename" : "sniper",
"name" : "Kardel Sharpeye",
"lore" : "Bla... Bla... Bla..."
},
{
"nickname" : "Io",
"imagename" : "io",
"name" : "Wisp",
"lore" : "Bla... Bla... Bla..."
},
{
"nickname" : "Timbersaw",
"imagename" : "timbersaw",
"name" : "Rizzrack",
"lore" : "Bla... Bla... Bla..."
}
]
Use stable version of angularjs(latest for now is 1.5.9) to get rid of
"TypeError: Cannot read property '$$phase' of null - AngularJS"
error.
Why my routes not working well ?
I'm sure that my code is true but no thing happen when I trying to run it , why the routes not routing the files ??
this is my main file code
routes.html
<!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
<title>Routes</title>
</head>
<body>
<div >
<!-- my views -->
<div data-ng-view=""></div>
</div>
view 1
view 2
<!-- angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<!-- routes -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<!-- scope -->
<script>
var myApp = angular.module("MyApp",[]);
// define my routes
myApp.config(function($routeProvider){
$routeProvider.when('/',
{
templateUrl: 'view1.html',
controller: 'SimpleController'
});
$routeProvider.when('/view2',
{
templateUrl: 'view2.html',
controller: 'SimpleController'
});
$routeProvider.otherwise ({redirectTo: '/'});
});
// define my controller
myApp.controller("SimpleController", function($scope)
{
// my array
$scope.customers=[
{name:'astm',city:'Alex'},
{name:'tamer',city:'Usa'},
{name:'ahmed',city:'Cairo'}
];
// add new persons to my array
$scope.addPerson = function(){
$scope.customers.push(
{
name: $scope.newPerson.name,
city: $scope.newPerson.city
});
};
});
</script>
</body>
</html>
This is the first view file view1.html
<div class="container">
<h2>View 1</h2>
Name :
<br>
<input type="text" data-ng-model="filter.name">
<br>
<ul class="list-group">
<li class="list-group-item" data-ng-repeat="person in customers | filter:filter.name | orderBy:'name' ">
{{ person.name}} live in {{ person.city}}
</li>
</ul>
<br>
<h2>Add new person</h2>
Name :
<br>
<input type="text" data-ng-model="newPerson.name">
<br>
City :
<br>
<input type="text" data-ng-model="newPerson.city">
<br>
<button data-ng-click="addPerson()">Add person</button>
view 2
</div>
This is the second view file view2.html
<div class="container">
<h2>View 2</h2>
City :
<br>
<input type="text" data-ng-model="city">
<br>
<ul class="list-group">
<li class="list-group-item" data-ng-repeat="person in customers | filter:city | orderBy:'city' ">
{{ person.name}} live in {{ person.city}}
</li>
</ul>
view 1
</div>
You have not added dependency of ngRoute in your app ..
var myApp = angular.module("MyApp",['ngRoute']);
// define my routes
myApp.config(function($routeProvider){
$routeProvider.when('/',
{
templateUrl: 'view1.html',
controller: 'SimpleController'
});
$routeProvider.when('/view2',
{
templateUrl: 'view2.html',
controller: 'SimpleController'
});
$routeProvider.otherwise ({redirectTo: '/'});
});
// define my controller
myApp.controller("SimpleController", function($scope)
{
// my array
$scope.customers=[
{name:'astm',city:'Alex'},
{name:'tamer',city:'Usa'},
{name:'ahmed',city:'Cairo'}
];
// add new persons to my array
$scope.addPerson = function(){
$scope.customers.push(
{
name: $scope.newPerson.name,
city: $scope.newPerson.city
});
};
});
here is the working plunkr
this is my first time asking a question on stackoverflow because so far I was able to find all the answers that I needed. This time, I couldn't though. My problem is every time I try to use ngRoute I get an error in the console saying "Error:
[$injector:modulerr] Failed to instantiate module demoApp due to:
$routeProvider.$ is undefined".
Here is my html code:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title>AngularJS</title>
<meta charset='UTF-8'>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body>
<article>
<div ng-view>
</div>
</article>
</body>
</html>
And this is my Angular code:
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.controller('Ctrl', ['$scope', function($scope){
$scope.customers = [
{firstName: 'Fostata', lastName: 'Boklik'},
{firstName: 'John', lastName: 'Hoe'},
{firstName: 'Jane', lastName: 'Doe'}
];
$scope.addCustomer = function(){
$scope.customers.push({firstName: $scope.newCustFirstName, lastName: $scope.newCustLastName});
};
}]);
demoApp.config(function($routeProvider) {
$routeProvider
.$.when('/', {
templateURL: '/home/martin4o29/Documents/WebSites/angular practice/first steps/Partials/View1.html',
controller: 'Ctrl'
})
.$.when('.view2', {
templateURL: '/home/martin4o29/Documents/WebSites/angular practice/first steps/Partials/view2.html',
controller: 'Ctrl'
})
.otherwise({
redirectTo: '/'
});
});
View1.html:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta charset='UTF-8'>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body data-ng-app='demoApp'>
<article data-ng-controller="Ctrl">
<input type="text" data-ng-model='name'>
<br>
<div>
<ul>
<li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
</ul>
</div>
<input type="text" data-ng-model='newCustFirstName'>
<br>
<input type="text" data-ng-model='newCustLastName'>
<br>
<button data-ng-click="addCustomer()">AddCustomer</button>
</article>
View2
</body>
</html>
view2.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS</title>
<meta charset='UTF-8'>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
<script type="text/javascript" src='/home/martin4o29/Documents/WebSites/angular practice/first steps/Controller.js'></script>
</head>
<body data-ng-app='demoApp'>
<article data-ng-controller="Ctrl">
<input type="text" data-ng-model='name'>
<br>
<div>
<ul>
<li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
</ul>
</div>
</article>
</body>
</html>
First of all fix your templates
remove head scripts
remote ng-app
remove controller
Example view:
<!DOCTYPE html>
<html>
<body>
<article>
<input type="text" data-ng-model='name'>
<br>
<div>
<ul>
<li data-ng-repeat="cust in customers | filter: name"> {{cust.firstName + " " + cust.lastName }}</li>
</ul>
</div>
</article>
</body>
</html>
Views are defining only the part which should be changed, not the whole app.
Replace $routeProvider.$.when with $routeProvider.when
I have set up a AngularJS MVC structure. Unfortunately, there is no specific errors or warnings in the script. However, the screen is displaying nothing and views is not redering according to the URLS give in the address bar.
Please help me to fix this issue.
Please see the below codes sepearate
-----------------controller.js---------------------
var demoApp = angular.module('demoApp', []);
var controllers = {};
demoApp.controller('simpleController', function ($scope) {
$scope.customers = [{
name: 'Rex',
city: 'Kensas'
}, {
name: 'Cyrin',
city: 'Texas'
}, {
name: 'Vijith',
city: 'Florida'
}];
$scope.addCustomer = function () {
$scope.customers.push({
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
$scope.newCustomer.name = '';
$scope.newCustomer.city = '';
};
});
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/view1', {
controller: 'simpleController',
templateUrl: 'Partials/view1.html'
})
.when('/view2', {
controller: 'simpleController',
templateUrl: 'Partials/view2.html'
})
.otherwise({
redirectTo: '/view1'
});
});
-----------------------index.html--------------------------
<!doctype html>
<html ng-app="demoApp">
<head>
<script src="angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div>
<div ng-view=""></div>
</div>
</body>
</html>
-------------Partials/view1.html----------------------------
<div class="container">
<h2>View 1</h2>
Name:
<br />
<input type="text" ng-model="name" />
<br />
<ul>
<li ng-repeat="cust in customers | filter:name">{{ cust.name }}</li>
</ul>
<br />
User Name:<br />
<input type="text" ng-model="newCustomer.name" />
<br />
User Name:<br />
<input type="text" ng-model="newCustomer.city" />
<br />
<button ng-click="addCustomer()">Add Customer</button>
<br />
View 2
</div>
Not including view2.html as it is less important here.
Hoping for the quick fix. :)
Thanks for your time!
Rex
Which version of Angular you are using?
If you are using 1.2* then you have to explicitly inject ngRoute module into your app by including angular-route.js separately
See docs: https://docs.angularjs.org/guide/migration#ngroute-has-been-moved-into-its-own-module
Import ngRoute in your code
var demoApp = angular.module('demoApp', ['ngRoute']);
Also you have not defined your controller to any of your HTML elements.
<div ng-controller="simpleController"></div>
DEMO PLUNKER
Note: Before you ask anything see your browser's console for any errors. If you haven't already included ngRoute, it throws an error you can see it in console.
you have to define your ng-controller
<div ng-controller="simpleController">
You have defined your app (ng-app).. But you have not defined your controller in any of your HTML files.
For the HTML file where you need to use the controller, call it there via:
<div ng-controller="simpleController">
// The rest of your HTML
</div>
I have been leaning AngularJS from e-book of Dan Wahlin. There author tried to explain about Modules, Route and Factories from the page 53. Then, I wrote the code in index.html as:
<div class="container" data-ng-app="demoApp">
<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 type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
var demoApp = angular.module('demoApp', []);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'SimpleController',
templateUrl: urlBase + 'View1.html'
})
//Define a route that has a route parameter in it (:customerID)
.when('/view2',
{
controller: 'SimpleController',
templateUrl: urlBase + 'View2.html'
})
.otherwise({ redirectTo: '/View1' });
});
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Dave Jones', city: 'Phoenix' },
{ name: 'Jamie Riley', city: 'Atlanta' },
{ name: 'Heedy Wahlin', city: 'Chandler' },
{ name: 'Thomas Winter', city: 'Seattle' }
];
});
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
}
</script>
Then I created two html pages - View1.html and View2.html and in the View1.html, I wrote:
<div class="container">
<h3>View 1</h3>
Name<br />
<input type="text" data-ng-model="filter.name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:filter.name">
{{ cust.name }} - {{ cust.city }}
</li>
</ul>
<br />Customer Name<br />
<input type="text" data-ng-model="newCustomer.name" />
<br />
<br />Customer City<br />
<input type="text" data-ng-model="newCustomer.city" />
<br />
<button data-ng-click="addCustomer()">Add Customer</button>
<br />
View 2
</div>
When I browse as http://localhost/angular/index.html#/view1 , I do not see anything that's mean no output. I do not understand actually where I did wrong.
The biggest issue here is that you are not including the routing module, which is required since Angular 1.2+
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript">
var demoApp = angular.module('demoApp', ['ngRoute']);
//Snip...
</script>
As mentioned by goutham in the comments, you also need to define urlBase which you do not appear to do anywhere.
Because JavaScript does type coercion for string concatenation, you are going to end up with the word 'undefined' appended to your templateUrl.
console.log(undefined + "view1.html"); // 'undefinedview1.html'