i'm new to angularjs,my problem is that i cannot render the views by using routes,here is my folder structure,i can't figure what is the problem with my code
index.html
three.html
two.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routes example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>
<body ng-app="sampleApp">
Route 2<br/>
Route 3<br/>
<div ng-view></div>
<script>
var app = angular.module("sampleApp", ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/three', {
templateUrl: 'three.html',
controller: 'RouteController'
}).
when('/two', {
templateUrl: 'two.html',
controller: 'RouteController'
}).
otherwise({
redirectTo: '/'
});
}]);
app.controller("RouteController", function($scope) {
})
</script>
</body>
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 am getting error in routing to about page. Home page is loading successfully. I am new to angular. Please help me to do it successfully.
here is the code link
enter code here Plunker Link
find code here
index.html
<!DOCTYPE html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="demo">
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Js
// Code goes here
var app = angular.module("demo", ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'homeController'
}).
when('/about', {
templateUrl: 'partials/about.html',
controller: 'aboutController'
}).
otherwise({
redirectTo: 'partials/404.html'
});
}
]);
app.controller('mainController', function() {});
app.controller('homeController', function($scope, $http, $location){
$scope.login= function() {
$location.path("/home");
}
});
app.controller('aboutController', function($scope, $http) {
$scope.about= function() {
$location.path("/about");
}
});
Correct your references as <script src="main.js"></script> and create partial/home.html. It will work then.
Try to utilize browser developer tool (F12), it will you help to find actual error.
There are several issues with your plunker.
You don't have the partials created in your plunker version. You need to create the files partials/about.html and partials/home.html.
The css/main.css. You have created a style.css in the root folder, but referred css/main.css in index.html.
3.The path to main.js was wrong. The file is in the root folder and you referred it as js/main.js. Please refer it as <script src="main.js"></script>
You have to call the routes from the partials.
You have created the about method in aboutController. But, it should be in the home controller. About controller will only be instantiated when you route to the about.html page.
You have referred an URL '/home' which is not defined in the main.js.
Please find the following working plunker.
https://plnkr.co/edit/APKWvpuTfivua5CovRp7?p=preview
// Code goes here
var app = angular.module("demo", ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html',
controller: 'homeController'
}).
when('/about', {
templateUrl: 'about.html',
controller: 'aboutController'
}).
when('/login', {
templateUrl: 'login.html',
controller: 'loginController'
}).
otherwise({
redirectTo: 'partials/404.html'
});
}
]);
app.controller('homeController', function($scope, $http, $location){
$scope.login= function() {
$location.path("/login");
}
$scope.about= function() {
$location.path("/about");
}
});
app.controller('aboutController', function($scope, $http) {
$scope.backToHome = function() {
window.history.back();
}
});
app.controller('loginController', function($scope, $http) {
$scope.backToHome = function() {
window.history.back();
}
});
index.html:
<!DOCTYPE html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="demo">
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="main.js"></script>
</body>
</html>
I am new to angular and was using Angular 1, However I always get 404 Resource not available error.
Here is the Code that I am doing.I am using ng-view and I am stuck in the part as to why my application does not route to the login or the dashboard page
index.html :
<!DOCTYPE html>
<html ng-app="sampleApp" lang="en">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="webapp/js/vendor/angular.js"></script>
<script src="webapp/js/vendor/angular-route.min.js"></script>
<script src="webapp/js/app/app.js"></script>
<script src="webapp/js/app/loginController.js"></script>
<script src="webapp/js/app/dashboardController.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
</head>
<body >
<ng-view></ng-view>
Login
Dashboard
</body>
</html>
var sampleApp = angular.module('sampleApp', ['ngRoute','loginModule','dashboardModule']); sampleApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
$routeProvider
.when('/login',{
templateUrl: 'partials/login.html',
controller: loginController
})
.when('/dashboard',{
templateUrl: 'partials/dashboard.html',
controller: dashboardController
});
$locationProvider.html5Mode(true);
}]);
This is my loginController.js
angular.module('sampleApp',[])
.controller('loginController',function($scope,$location){
$scope.login = "In Login Controller";
});
dashboardController.js
angular.module('sampleApp',[])
.controller('dashboardController',function($scope,$location){
$scope.dashboard = "In Dashboard Controller";
});
Please let me know what wrong am I doing.
Sorry for my English.
Hi Following Modification I have done to your code.
create login.html inside partials folder aside of index.html file
{{login}}
create dashboard.html inside partials folder aside of index.html file
{{dashboard}}
create index.html with following code.
<!DOCTYPE html>
<html ng-app="sampleApp" lang="en">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<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 type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>-->
</head>
<body>
<ng-view></ng-view>
Login
Dashboard
</body>
</html>
<script>
var sampleApp = angular.module('sampleApp', ['ngRoute']);
sampleApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider.when('/login', {
templateUrl: 'partials/login.html',
controller: 'loginController'
}).when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: 'dashboardController'
});
}]);
sampleApp.controller('loginController', function($scope, $location) {
$scope.login = "In Login Controller";
});
sampleApp.controller('dashboardController', function($scope, $location) {
$scope.dashboard = "In Dashboard Controller";
});
</script>
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
Here is my code:
var myApp = angular.module('myApp', [
'ngRoute',
'artistControllers'
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'includes/list.html',
controller: 'artistListController',
controllerAs: 'alc',
}).
when('/detail/:id', {
templateUrl: 'includes/detail.html',
controller: 'artistDetailController',
controllerAs: 'adc',
}).
otherwise({
redirectTo: '/list'
});
}]);
My 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="lib/angular/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script> //include artistListController and artistDetailController
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main" ng-view></div>
</body>
</html>
If I use angular-route.min.js v1.4.3, it will throw $injector:unpr Unknown Provider and the url is stuck on http://127.0.0.1:56116/index.html
angular-route.min.js v1.2.10 works fine and the url is http://127.0.0.1:56116/index.html/#list
Anybody can help me with this? Thank you
This error results from the $injector being unable to resolve a required dependency. To fix this, make sure the dependency is defined and spelled correctly.
Removing artistControllers from your angular.module will solve the problem.Also include artistListController and artistDetailController in your index.html file.
including all the controller in your index.html like this:
<body>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/artistListController.js"></script>
<script type="text/javascript" src="js/controllers/artistDetailController.js"></script>
</body>
In your app.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'includes/list.html',
controller: 'artistListController'
}).
when('/detail/:id', {
templateUrl: 'includes/detail.html',
controller: 'artistDetailController'
}).
otherwise({
redirectTo: '/list'
});
}]);