I'm new at javascript and angularJS and I have a little problem configuring my $routeProvider. It does not display anything at all.
Here is my code :
var route = angular.module('app', []);
route.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {templateUrl: 'partials/home.html'})
.when('/about', {templateUrl: 'partials/about.html'})
.otherwise({redirectTo: '/home'})
}]);
var ap = angular.module('app', ['snap']);
ap.controller('MainCtrl', function($scope) {
$scope.opts = {
disable: 'right'
};
});
and the HTML :
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/angular-snap.css" />
<script src="js/angular-1.2.4.min.js" type="text/javascript"></script>
<script src="js/snap.js" type="text/javascript"></script>
<script src="js/angular-snap.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
</head>
<body ng-controller="MainCtrl">
<nav snap-drawer class="nav">
Home
About us
</nav>
<snap-content snap-options="opts">
<header class="header">
<button snap-toggle>
<img src="img/icon-menu.png" width="60px" />
</button>
Test
</header>
<div ng-view>
</div>
</snap-content>
<script src="cordova.js" type="text/javascript"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
The snap element for the left panel is working just fine but when I want to add the routeProvider it does not display what I have in partial/home.html (which is just a paragraph at the moment).
Don't forget to inject the ngRoute module.
var route = angular.module('app', ['ngRoute']);
You need to include the ngRoute module (and the angular-route.js) in order for $routeProvider to work. This was split up a while ago:
AngularJS $routeProvider docs
Related
I get an angular error : Error: [$injector:unpr] Unknown provider: $urlRouteProvider
I am using ui-router for routing
My Html Code:
<html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="angular.js" type="text/javascript"></script>
<script src="Controller.js" type="text/javascript"></script>
<script src="angular-route.js" type="text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body ng-app="myapp">
<div class="container">
<header ng-include="'templates/nav.html'"></header>
<div ui-view></div>
<footer ng-include="'templates/footer.html'"></footer>
</div>
</body>
My Module:
angular.module("myApp", ['ui.router'])
.config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider) {
$urlRouteProvider.otherwise('/index.html');
$stateProvider.state("home", {
url: '/',
template: "home"
});
}]);
Is there anything wrong I am doing here ?
first add ui router scripts to the index html file.
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<script data-require="ui-router#0.3.1" data-semver="0.3.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
Then there is character missing in here also.
change $urlRouteProvider.otherwise('/index.html');
.config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider)
to $urlRouterProvider.otherwise('/index.html');
.config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider)
Demo
You need to resolve your dependencies on other modules, for your module to work.
So rearrange your code to
<html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="angular.js" type="text/javascript"></script>
<script src="angular-route.js" type="text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script>
<script src="Controller.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body ng-app="myapp">
<div class="container">
<header ng-include="'templates/nav.html'"></header>
<div ui-view></div>
<footer ng-include="'templates/footer.html'"></footer>
</div>
</body>
And also change your dependency name from $urlRouteProvider to $urlRouterProvider
angular.module("myApp", ['ui.router'])
.config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider) {
}]);
You need to call the controller.js after loading ui router reference
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="angular.js" type="text/javascript"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js" defer></script>
<script src="Controller.js" type="text/javascript"></script>
also change from
angular.module("myApp", ['ui.router'])
.config(["$urlRouteProvider", "$stateProvider", function ($urlRouteProvider, $stateProvider) {
to
angular.module("myApp", ['ui.router'])
.config(["$urlRouterProvider", "$stateProvider", function ($urlRouterProvider, $stateProvider) {
I seem to be having an issue with Angular routing. My current index.html file is only displaying the header div that is in the index.html file but not the ng-view aspect of the code which should display a new page located at views/login.html.
var app = angular.module('Bandit', ['ngRoute']);
app.config(['$routeProvider', 'locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
//login feedback page
.when('/feedback', {
templateUrl: 'views/loginfeedback.html',
controller: 'loginFeedbackController'
})
// home page
.when('/', {
templateUrl: 'views/login.html',
controller: 'loginController'
})
//Catch all
.otherwise({
redirectTo: '/'
});
}
]);
<!DOCTYPE html>
<html lang="ENG">
<head>
<title>Band-it</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Imported Style-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--Custome Stylesheets-->
<link rel="stylesheet" type="text/css" href="css/universal.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<!--Imported JS Libraries-->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--Custom-->
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/loginController.js"></script>
</head>
<body ng-app="Bandit">
<div class='header'>
<h1 id='symbol'>B</h1>
</div>
<!--Angular Dynamic View-->
<div ng-view></div>
</body>
</html>
The error message from the console that I am getting is:
angular.js:38 Uncaught Error: [$injector:modulerr] [http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=Bandit&p1=Error%3A%…Fbandit%2FBanditMask%2Fpublic%2Flibs%2Fangular%2Fangular.min.js%3A39%3A222]1
Any help would be much appreciated!
Use $locationProvider instead of using locationProvider in app.config. and not sure please share the link.
I am trying to route my APP in angular and bootstrap, but nothing shows in the view, my code is:
app.js
var myApp = angular.module('myApp', [
'ngRoute',
'mainControl'
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/main', {
templateurl: 'partials/main.html',
controller: 'MainControl'
}).
otherwise({
redirectTo: '/main'
});
}]);
controllers.js
var mainControl = angular.module('mainControl', []);
mainControl.controller('MainControl', function($scope) {
$scope.message = "This is the message";
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Angular JS and Bootstrap</title>
<!-- jQuery Version 1.11.1 -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Angular JS -->
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/accordian.js"></script>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/app.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="myApp">
<div ng-view>
</div>
</body>
</html>
Any help would be appreciated?? I am fairly new to angular JS, am i declaring the ng-app in the wrong place?. when I look in the url, the url is displayed correctly i.e index.html#/main, but nothing is displayed...
It looks like you have a typo?
when('/main', {
templateUrl: 'partials/main.html', // capitalization on templateurl
controller: 'MainControl'
}).
EDIT: Confirmed that it works locally with your code.
i am using routing in angular.js
my code is :
//controllers.js
var ar= angular.module('ar', []);
ar.controller('lc', ['$scope', '$http', function($scope, $http){
$http.get('login.json').success(function(data){
$scope.art=data;
})
}])
ar.controller("search", function(){
this.search='a';
this.getdata= function (searchquery) {
console.log(searchquery);
}
});
//main.js (app.js)
var myApp= angular.module('myApp',[
'ngRoute',
'ar'
]);
myApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'inc/login.html',
controller: 'lc'
}).
otherwise({
redirectTo: '/login'
});
}]);
when i goto the Homepage its not redirect to the Login page and when i click on the login button its not working either.
<!DOCTYPE html>
<html class="no-js" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>Login</li>
</ul>
</div><!--/.navbar-collapse -->
in bottom:
i have include jquery and bootstrap's file.
this is a bootstrap application.
this is live example :
Live example
Routes are specified correctly. What you need is to define the ng-view in your template so that the templates mentioned in specific routes are loaded into the main template
Something like :
<div class="page-container">
<div ng-view></div>
</div>
ng-view will be the place where every template mentioned in the router will be loaded.
i think there might be issue with your path .. its mvc base and routes define your path :)
My index.html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body ng-app="app">
THIS WORKS NOW!
<div ng-view></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
And in app.js, I have:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'templates/home.html'
}).when('/dashboard', {
templateUrl: '/templates/dashboard.html'
}).otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}
]);
So I run cordova build ios and it does it's magic to make an xcode project, which I then open and run. I see THIS WORKS NOW!, but I don't see the contents of my home.html file.
What am I doing wrong?
You need bootstrap angular:
app.js is fine!
but remove ng-app inside the tag <body> and start angular when the event onDeviceReady has been triggered :
index.js file:
var app = {
initialize: function () {
this.bindEvents();
},
bindEvents: function () {
document.addEventListener("deviceready", this.onDeviceReady, false);
},
onDeviceReady: function () {
angular.element(document).ready(function () {
angular.bootstrap(document, ["app"]);
});
}
};
normally that is all you need to do.