I'm trying to learn/refresh my AngularJS knowledge, by following this tutorial.
I'm now trying to complete the section on views and routing. However when I load the main.html page, no view is displayed. All I see is:
Before view! After view!
The chrome dev console is also completely empty (no errors/warnings etc).
So what am I missing?
I'm running it through an 'express' node.js server locally on my Win7 64bit pc. I'm accessing the page in the browser using http://localhost:9000/main.html
I downloaded the 1.5.8 versions of angular.js and angular-route.min.js and placed them in the same directory as main.html.
Trying: http://localhost:9000/view1.html displays the content of the view successfully.
This is the main.html:
<!DOCTYPE html>
<html ng-app="demoApp">
<body>
Before view!
<div ng-view></div>
After view!
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script>
var demoApp=angular.module('demoApp',['ngRoute']);
demoApp.config(function($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'SimpleController',
templateURL: '/view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateURL: '/view2.html'
})
.otherwise({ redirectTo: '/view1' });
});
var controllers= {};
controllers.SimpleController= function($scope) {
$scope.customers=[
{name:'John Smith', city: 'New York'},
{name: 'Bob Jones', city: 'London'},
{name:'David Peters', city: 'Sydney'}
];
$scope.addCustomer=function() {
$scope.customers.push( { name: $scope.newCustomer.name, city: $scope.newCustomer.city });
}
};
demoApp.controller(controllers);
</script>
</body>
</html>
Here's view1.html:
<div class="container">
<h2>View 1</h2>
Name: <input type="text" ng-model="filter.name" />
<ul>
<li ng-repeat="cust in customers | filter:filter.name | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city | lowercase}}</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>
view2.html is just a simpler version of view1.html
Replace the following code:
demoApp.config(function($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'SimpleController',
templateURL: '/view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateURL: '/view2.html'
})
.otherwise({ redirectTo: '/view1' });
});
with the following code:
demoApp.config(function($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'SimpleController',
templateUrl: 'view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'view2.html'
})
.otherwise({ redirectTo: 'view1' });
});
Replaced "templateURL" in your code with "templateUrl" because it is case sensitive.
Related
I am new to AngularJs and try my first project into it. Using Angular.min.js and angular-route.js 1.6.9 version. While hitting the http://localhost/myAngular/login/main.html in browser getting Uncaught Error:
[$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=myApp&p1=ReferenceError%3A%20otherwise%20is%20not%20defined%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%2FmyAngular%2Flogin%2Fmain.html%3A32%3A2%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A44%3A390)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A279)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A418%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20gb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)%0A%20%20%20%20at%20we%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A21%3A1)
main.html:
<!DOCTYPE html>
<html lang="Eng">
<head>
<title>Login Demo</title>
<script src="angular.min.js"> </script>
<script src="angular-route.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="mainApp">
<div ng-view>
</div>
</body>
controller.js
var app = angular.module( 'mainApp', ['ngRoute'] );
app.config( function( $routeProvider ) {
$routeProvider
.when( '/main', {
template: 'Welcome User!'
//templateUrl: 'login.html'
})
.when('/anotherPage', {
template: 'Welcome User, again!'
//templateUrl: 'dashboard.html'
})
otherwise({
redirectTo: '/'
});
});
app.controller( 'loginCtrl', function( $scope, $location) {
$scope.submit = function(){
var userName = $scope.userName;
var password = $scope.password;
if(userName == "admin" && password == "admin"){
$location.path = '/dashboard';
}
console.log( userName +" "+ password);
};
});
===========================================================
login.html
<div ng-controller="loginCtrl">
<div>
<form action="/" id="myLogin">
User Name: <input type="text" name="userName" ng-model="userName"/>
<br>br>
Password: <input type="password" name="password" ng-model="password"/>
<br><br>
<button type="button" ng-click="submit()">Submit</button>
</form>
</div>
</div>
Try:
$routeProvider
.when( '/main', {
template: 'Welcome User!'
//templateUrl: 'login.html'
})
.when('/anotherPage', {
template: 'Welcome User, again!'
//templateUrl: 'dashboard.html'
})
.otherwise({ // <-- you were missing "." here.
redirectTo: '/'
});
});
Also, try to use "angular.js" rather than angular.min.js , you'll get readable and easily understandable error messages
Side Note: Try to use controller in $routeProvider itself rather than writing it the way you have written in login.html. Refer the config of my plunkr
Here is the working code
Update
As per your new code, you need to do as below
$location.path('/dashboard');
Refer the plunkr. I have made the respective changes in it too
I have the below mentioned Angular code that uses the config and the routeProvider. View1 and View 2 are also enclosed.
<!DOCTYPE html>
<html>
<head>
<title>My test application</title>
</head>
<body ng-app="myApp">
<div>
<div ng-view></div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-
route.js"></script>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/view1.html'
})
.when('/view2',{
controller: 'SimpleController'
templateUrl:'Partials/view2.html'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('SimpleController',SimpFunc);
function SimpFunc($scope){
$scope.customers = [
{name:'Dave Smith', city:'New York'},
{name:'Will Smith', city:'Phily'},
{name:'Will Die', city:'Cincy'},
{name:'Die till', city:'New Jersey'},
{name:'Till What', city:'Cincy'}
];
$scope.addCustomer = function(){
$scope.customers.push(
{
name: $scope.newCust.name,
city: $scope.newCust.city
});
};
}
</script>
</body>
</html>
View1.html
<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
}} - {{ cust.city }}</li>
</ul>
<br />
Customer Name:
<br />
<input type="text" ng-model="newCust.name" />
Customer City:
<br />
<input type="text" ng-model="newCust.city" />
<br />
<button ng-click="addCustomer()">Add customer</button>
<br />
View 2
</div>
View 2
<div class="container">
<h2>View 2</h2>
City:
<br />
<input type="text" ng-model="filter.city" />
<br />
<ul>
<li ng-repeat="cust in customers | filter:filter.city">{{ cust.name
}} - {{ cust.city }}</li>
</ul>
</div>
I am not able to render view1 and/or view2 in the page. How can I do that?
Your script library URLs are giving 404 error.
I used below
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.js
And comma missing after SimpleController
.when('/view2',{
controller: 'SimpleController',
you have some syntax error in your app.config, also you have to make ng-href instead href for example <a ng-href="#!/view2">View 2</a>, replace your codes with below codes.
also you miss define the controller in the Html
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider.when('/',
{
controller: 'SimpleController',
templateUrl: 'partials/view1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'partials/view2.html'
})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Dave Smith', city: 'New York' },
{ name: 'Will Smith', city: 'Phily' },
{ name: 'Will Die', city: 'Cincy' },
{ name: 'Die till', city: 'New Jersey' },
{ name: 'Till What', city: 'Cincy' }
];
$scope.addCustomer = function () {
$scope.customers.push(
{
name: $scope.newCust.name,
city: $scope.newCust.city
});
};
});
<div ng-app="myApp" ng-controller="SimpleController">
<div ng-view></div>
</div>
I am running my AngularJS code in VS 2015. The routing just doesn't work. I tried everything but I get the url like below in the address bar of the browser when I click on the hyperlink "Add" and nothing gets displayed and same issue with other hyperlinks also. Please advise.
"http://localhost:21530/Index.html#!#Add"
Here is the code:
HTML File:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/Main/Home.js"></script>
</head>`enter code here`
<body>
<div>
<ul>
<li>Homes</li>
<li>Add</li>
<li>Edit</li>
<li>Delete</li>
</ul>
<ng-view>
</ng-view>
</div>
</body>
</html>
Home.js:
/// <reference path="../angular.js" />
var MyApp = angular.module("MyApp", ["ngRoute"]);
MyApp.config(function($routeProvider) {
$routeProvider.
when("/Add", {
templateUrl: "Views/Add.html",
controller: "AddController"
})
.when("/Edit", {
templateUrl: "Views/Edit.html",
controller: "EditController"
})
.when("/Delete", {
templateUrl: "Views/Delete.html",
controller: "DeleteController"
})
.when("/Home", {
templateUrl: "Views/Home.html",
controller: "HomesController"
});
});
MyApp.controller("AddController", function($scope) {
$scope.message = "Add Screen";
});
MyApp.controller("EditController", function($scope) {
$scope.message = "Edit Screen";
});
MyApp.controller("DeleteController", function($scope) {
$scope.message = "Delete Screen";
});
MyApp.controller("HomeController", function($scope) {
$scope.message = "Home Screen";
});
change all your href as below :
<div>
<ul>
<li>Homes</li>
<li>Add</li>
<li>Edit</li>
<li>Delete</li>
</ul>
<ng-view>
</ng-view>
</div>
Try to activate the HTML5 mode ($locationProvider.html5Mode(true);) in MyApp.config.
See the official doc: https://docs.angularjs.org/api/ngRoute/service/$route#example
MyApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when("/Add", {
templateUrl: "Views/Add.html",
controller: "AddController"
})
.when("/Edit", {
templateUrl: "Views/Edit.html",
controller: "EditController"
})
.when("/Delete", {
templateUrl: "Views/Delete.html",
controller: "DeleteController"
})
.when("/Home", {
templateUrl: "Views/Home.html",
controller: "HomesController"
});
}]);
You have to inject $routeprovider first. The $routeprovider inside function() you have written is just the parameter name which can be anything.
Please see that you open and close the square brackets properly.. Try Running the application now. If it doesnt work, also try <a ng-href="#Add">Add</a> inside the nav li.
Hope it works for you :) .
I have the following code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/styles/bootstrap.min.css" rel="stylesheet" />
<link href="~/styles/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>
</head>
<body ng-app="appName">
view1
view2
<div>
this is a dynamic message: {{message}}
</div>
<div ng-view>
</div>
<script type="text/javascript">
var app = angular.module('appName', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/view1', {
templateUrl: 'pages/about.html',
controller: 'FirstController'
})
.when('/view2', {
templateUrl: 'pages/contact.html',
controller: 'SecondController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('FirstController', function ($scope) {
$scope.message = 'first controller';
});
app.controller('SecondController', function ($scope) {
$scope.message = 'Second controller';
});
app.controller('HomeController', function ($scope) {
$scope.message = 'Home controller';
});
</script>
</body>
</html>
but when i click on the view1 or view2 anchor tag, nothing is happening and i get an error like this
resource not found error
I dont get any error in the console, can anyone help me to figure out what exactly is wrong.
In your html you miss
ngview directive add it.
<div ng-view></div>
For further help see this link
http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
Use ng-view to display content and you missed # at anchor tag
<body ng-app="appName">
view1
view2
<div ng-view>
this is a dynamic message: {{message}}
</div>
<script>
<!-- script here -->
</script>
</body>
You don't have ng-view
add following in html to get the pages loaded
<div ng-view></div>
Try this for app config
app.config(function (locationProvider, $routeProvider) {
$locationProvider.hashPrefix('#');
$routeProvider.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
.when('/view1', {
templateUrl: 'pages/about.html',
controller: 'FirstController'
})
.when('/view2', {
templateUrl: 'pages/contact.html',
controller: 'SecondController'
})
.otherwise({
redirectTo: '/'
});
});
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>