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.
Related
I'm getting this error on an iPad (first generation, the only iPad I have) while trying to use a very basic use of ngRoute and ngAnimate. It works on desktops and on iPhone(6), but not the iPad. This is the error I'm getting:
Error[$injector:modulerr]http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=ng&p1='undefined%20is%20not%20an%20object
This is the simple app I'm using:
var app = angular.module('openRoute', ['ngRoute', 'ngAnimate']);
app.config(function($routeProvider) {
$routeProvider
.when('/news', {
templateUrl : 'news.html'
})
.when('/info', {
templateUrl: 'info.html'
})
});
And this is the HTML with all the links necessary:
<!DOCTYPE html>
<html lang="sv" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="style2/style.css" />
<script src="style2/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
</head>
<body ng-app="openRoute">
Anyone makes sense out of this?
Unless you have an dependency injection mechanism that i don't see.
You need to give the key to the dependency then the actual setting of the value, see the example below
angular
.module('ModuleName')
.config(['$httpProvider', '$compileProvider', '$resourceProvider',
function($httpProvider, $compileProvider, $resourceProvider) {
// do stuff
}]);
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 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 :)
I'm new to Angular.js and i can't figure out why my partial templates are not bound to the ng-view div.The ng-view is just not there when i try to inspect it with firebug. Here is my code :
html header and body:
<html lang="en" ng-app="BPMNApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.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]-->
<!-- External Libraries -->
<script src="js/external/jquery-1.10.2.min.js"></script>
<script src="js/external/modernizr-2.6.2.min.js"></script>
<script src="js/external/angular.js"></script>
<script src="js/external/angular-resource.js"></script>
<script src="js/external/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<!-- General Navigation Bar -->
<nav>Simple Bootstrap nav
</nav>
<div><h1>View Should be right under here</h1></div>
<div id='contentcontainer'>
<div class='container' ng-view></div>
</div>
App :
'use strict';
/* App Module */
var BPMNApp = angular.module('BPMNApp', [
'ngRoute',
'BPMNControllers',
'BPMNServices'
]);
BPMNApp.config(['$routeProvider','$resourceProvider','$locationProvider',
function($routeProvider,$resourceProvider,$locationProvider) {
$routeProvider.
when('/landing', {
templareUrl: 'partials/landing.html',
controller : 'LandingCtrl'
}).
when('/process-definitions', {
templateUrl: 'partials/process-definitions.html',
controller: 'ProcessDefinitonCtrl'
}).
when('/process-definitions/:definitionId', {
templateUrl: 'partials/definition-detail.html',
controller: 'DefinitionDetailCtrl'
}).
otherwise({
redirectTo: '/landing'
});
//$locationProvider.html5Mode(true);
}]);
Controllers :
var BPMNControllers = angular.module('BPMNControllers', []);
BPMNControllers.controller('LandingCtrl',['$scope',
function($scope){
$scope.welcome = 'BPMN - Rest Interface';
}])
BPMNControllers.controller('ProcessDefinitionCtrl', ['$scope', 'ProcessDefinitions',
function($scope, ProcessDefinitons) {
$scope.defs = ProcessDefintions.query();
}]);
BPMNControllers.controller('DefinitionDetailCtrl', ['$scope','$routeParams','ProcessDefinitions',
function($scope,$routeParams, ProcessDefinitions) {
$scope.def = ProcessDefinitions.get({id : $routeParams.definitionId})
}]);
and the templates:
process-definitions.html :
<div class="container-fluid">
<div class="row" ng-repeat="def in defs">
<div class="col-md-1">{{def.name}} </div>
<div class="col-md-1">{{def.id}} </div>
<div class="col-md-1">{{def.version}}</div>
</div>
landing.html :
<h1>{{welcome}}<h1>
Even the simple landing.html is not displayed correctly, and i can't figure out why. Thanks for your help.
<a href="/process-definitons/{{def.id}}">
you need a # before the url
<a href="#/process-definitons/{{def.id}}">
when('/landing', {
templareUrl: 'partials/landing.html',
controller : 'LandingCtrl'
})
I see a typo there. change templareUrl to templateUrl.
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