has someone an idea, why :message always throws "undefined"? i call the page with "MyDomain.com/#AMessage"
ctrl.js:
angular.module('AutApp', ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when("/:message",
{
templateUrl: "index.html",
controller: "ctrl"
}
);
})
.controller('ctrl', function($routeParams) {
document.getElementById("test").innerHTML = $routeParams.message;
});
index.html:
<!DOCTYPE html>
<head></head>
<body ng-app="AutApp" ng-controller="ctrl">
<div id = "test"></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="ctrl.js"></script>
</body>
</html>
Thank you for your help!
You are not using ng-route properly. You must define a view. The template for the view cannot be index.html, as that page is the root of your application. Your controller should be associated with the route. More info on ng-route
<!DOCTYPE html>
<body ng-app="AutApp">
<div ng-view></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
angular.module('AutApp', ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when("/:message",
{
template: '<div id = "test"></div>',
controller: "ctrl"
}
);
})
.controller('ctrl', function($routeParams) {
document.getElementById("test").innerHTML = $routeParams.message;
});
</script>
Related
My code starts from here
<!DOCTYPE html>
<html>
<head>
<title>Routing</title>
</head>
<body ng-app="myApp">
Login
Register
<div ng-view></div>
</body>
<script src="angular-min.js" type="text/javascript"></script>
<script src="angular-route.js" type="text/javascript"></script>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/login", {
templateUrl : "login.html"
})
.when("/register", {
templateUrl : "register.html"
})
});
</script>
</html>
I cannot route, it is simple touting with html, using simple method , the basic one , i do not know why it doesnt route
This is with the version 1.2.
var app = angular.module("myApp", ["ngRoute"])
app.config(function($routeProvider) {
$routeProvider.when('/', {
template: `<h1>Login</h1>`,
controller: 'loginCtrl'
})
.when('/register', {
template: `<h1>Register</h1>`,
controller: 'RegisterCtrl'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('loginCtrl', function($scope) {
$scope.name = "Login";
});
app.controller('RegisterCtrl', function($scope) {
$scope.name = "Register";
})
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS User Registration and Login Example </title>
</head>
<body>
Login
Register
<div class="mainContainer" ng-view></div>
<script src="//code.angularjs.org/1.2.26/angular.js"></script>
<script src="https://code.angularjs.org/1.2.26/angular-route.min.js"></script>
</body>
</html>
If you are using Angularjs version 1.6 and above, routes has changed. Look at this Answer
I can see changes in the url but the content in that page is not visible in ng-view please help. The following are the code files.
Angular script
<script>
var app = angular
.module("myapp", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/Home", {
templateUrl: "Home.html",
})
.when("/ThankYou", {
templateUrl: "ThankYou.html",
})
})
</script>
Html code
This is the main UI.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<title></title>
</head ng-app="myapp">
<body>
<div>
Home
ThankYou
</div>
<div ng-view></div>
</body>
</html>
Home.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
Home
</div>
</body>
</html>
var app = angular.module("Demo", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/Home', {
templateUrl: 'Home.html',
controller: 'FirstController'
})
.when('/ThankYou', {
templateUrl: 'ThankYou.html',
controller: 'SecondController'
})
});
app.controller('FirstController', function($scope) {
});
app.controller('SecondController', function($scope) {
});
DEMO
One of my HTML pages is like this:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1', {
templateUrl: "test.html"
}).
otherwise({
redirectTo: '/'
});
}]);
</script>
</head>
<body ng-app="sampleApp">
Route
<div ng-app="myApp" ng-view></div>
</body>
</html>
I'm trying to navigate from this page to test.html through angular routing. test.html is as follows
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.my = 10;
ab = function() {
alert($scope.my);
}
});
</script>
<meta charset="UTF-8">
<div ng-app="myApp" data-ng-controller="myCtrl">
{{10+20}}
{{my}}
<button onclick="ab()">click</button>
</div>
But angular is not working in test.html, i.e., {{10+20}} and {{my}} is displayed as it is. when I run test.html separately, then angular is working well. But when routed from the first html page it is not working.
Please help me out. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1', {
controller: 'myCtrl',
templateUrl: 'test.html'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller("MainController", function($scope) {
});
module.controller("myCtrl", function($scope) {
$scope.my = 10;
ab = function() {
alert($scope.my);
}
});
</script>
</head>
<body ng-app="sampleApp">
<div ng-controller="MainController">
Route
<ng-view>
</ng-view>
</div>
</body>
</html>
And in your test.html, put this only :
<div>
{{10+20}}
{{my}}
<button onclick="ab()">click</button>
</div>
This all are in a working condition, i have test it in my local.
You have to just make test.html file then all code snippet will works fine
in Index.html i defined:
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bwp">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="app/landingController.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
In app.js i defined:
var app = angular.module("bwp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider.when(
'/main', {
templateUrl: 'app/test.html',
controller: 'testController'
})
.otherwise({ redirectTo: '/main' });
});
Here is the complete testController.js:
(function() {
var app = angular.module("bwp");
var landingController = function ($scope, $http) {
$scope.test = "this is a test";
};
app.controller("landingController", landingController);
}());
In test view I defined:
<h1 ng-controller="landingController">
{{test}}
</h1>
When i render the page i get (through inspect element):
<h1 ng-controller="landingController" class="ng-scope ng-binding">
{{test}}
</h1>
Note that it identifies the controller and the scope.
SO...Angular injects the view but doesn't bind $scope.test as expected. What am I doing wrong?
I have shown a simplified version of my problem below:
The directive 'name' is not understood when it is in the view 'loginView.html', however it works fine when It's in the main page 'index.html'
loginView.html
<p>Welcome : {{name}}</p>
<input type="text" data-ng-model="name"><br>
<button type="submit" data-ng-click="loginUser()">Login</button>
index.html
<!doctype html>
<html data-ng-app="vla">
<head>
<title>Video Learning application</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class = "navBar">
<div class = "leftButton"></div>
<div class = "title">VLA</div>
<div class = "rightButton"></div>
</div>
<div data-ng-view=""></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="controllers/controllers.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('vla', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/view1',
{
controller: 'controllers/controllers.js',
templateUrl: 'partials/loginView.html'
})
.otherwise({ redirectTo: '/view1' });
});
controller.js
app.controller('loginController', function ($scope)
{
$scope.loginUser = function () {
alert("test");
}
});
The {{name}} just prints itself out when in the view 'loginView', but works fine and prints he contents of the input field when placed into index.html.
I'm very new at this and would appreciate any help.
Thanks in advance
You should write controller name but not path in controller option of routeProvider:
$routeProvider
.when('/view1',
{
controller: 'loginController',
templateUrl: 'partials/loginView.html'
})
.otherwise({ redirectTo: '/view1' });
And attach file with controller (controllers/controllers.js) with tag <script>.
Just realised the problem was the ordering of the script declarations in the index.php page
The app reference should come before the controller:
<script src="app.js"></script>
<script src="controllers/controllers.js"></script>