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 :)
Related
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'm trying to create a portfolio in angular, and can't seem to get the routing correct. I double checked with an app I had made previously, and can't seem to find anything. When I compile, there are no errors logged in the console. Could someone check if my code is properly laid out?
the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<!-- <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300' rel='stylesheet' type='text/css"> -->
</head>
<body np-app="myPort">
<div id="navigation-bar">
<ul>
<li>Home</li>
<li>My Projects</li>
<li>Contact</li>
</ul>
</div>
<div ui-view></div>
<!-- loading angular frameworks -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- app js stuff -->
<script src="app.js"></script>
</body>
</html>
the module
angular.module('myPort', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partials/bio/index.html',
})
.state('projects', {
url: '/projects',
templateUrl: 'partials/projects/index.html',
})
.state('contact', {
url: '/contact',
templateUrl: 'partials/contact/index.html',
})
$urlRouterProvider.otherwise('/home');
}]);
//no controllers linked for troubleshooting
There is a spelling mistake while defining ng-app.
Change <body np-app="myPort>" to <body ng-app="myPort>"
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 pretty new to this whole angularjs thing and am having some trouble solving an issue. So we have a single page app that loads each page in an ng-view i have a directive that actually loads the date picker code into the view. When the page first loads it is fine but if I click to another page and then click back to the "add" page it gives me an error that says "Error: $(...).datepicker is not a function". I'm not sure if it's a jquery issue or what.
Here is my code:
index.html (towards the middle of the page is the ng-view where the views get loaded)
<!DOCTYPE html>
<html>
<head>
<title>Rx Pricing Maintenance</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="Sat, 01 Dec 2001 00:00:00 GMT">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="resources/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="resources/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
<!-- <link rel="stylesheet" href="./resources/bootstrap-datepicker/css/datepicker.standalone.css"> -->
<link rel="stylesheet" href="resources/bootstrap-3.3.4-dist/css/bootstrap.css">
<link rel="stylesheet" href="resources/css/main.css">
<link rel="stylesheet" href="resources/bootstrap-3.3.4-dist/css/bootstrap-dialog.css">
<link rel="stylesheet" href="resources/DataTables-1.10.5-dist/css/jquery.dataTables.css">
<!-- External Sources -->
<script src="resources/jquery-2.1.3-dist/jquery-2.1.3.js"></script>
<script src="./resources/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<script src="./resources/angular-1.3.15/angular.js"></script>
<script src="./resources/angular-1.3.15/angular-route.js"></script>
<script src="./resources/angular-1.3.15/angular-resource.js"></script>
<script src="./resources/bootstrap-3.3.4-dist/js/bootstrap-dialog.js"></script>
<script src="resources/DataTables-1.10.5-dist/js/jquery.dataTables.js"></script>
<script src="resources/angular-datatables-dist/angular-datatables.js"></script>
<script src="resources/angular-datatables-dist/vendor/datatables-columnfilter/js/dataTables.columnFilter.js"></script>
<script src="resources/angular-datatables-dist/columnfilter/angular-datatables.columnfilter.js"></script>
<script src="resources/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<!-- Internal Sources -->
<script src="resources/js/serviceCaller.js"></script>
<script src="./resources/js/controllers.js"></script>
<script src="./resources/js/application.js"></script>
<script src="resources/alasql/alasql.min.js"></script>
<script src="resources/alasql/xlsx.core.min.js"></script>
<script src="resources/alasql/alasql.js"></script>
</head>
<body ng-app="pricingApp" style="padding-top: 50px;">
<div class="container-fluid">
<nav><nav>
<div ng-view></div>
<footer>
<div class="footer-container">
</div>
</footer>
<!-- end footer -->
</div>
</body>
</html>
application.js
'use strict';
/* App Module */
var pricingApp = angular.module('pricingApp', [
'ngRoute',
'pricingControllers'
]);
pricingApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl : 'views/home.html'
}).when('/home', {
templateUrl : 'views/home.html'
}).when('/add', {
templateUrl : 'views/add.html',
controller : 'SchedulesController'
}).when('/help', {
templateUrl : 'views/help.html',
controller : 'VersionController'
});
$locationProvider.html5Mode(false).hashPrefix('!');
} ]);
pricingApp.directive('myDatePicker',function(){
return {
restrict: 'E',
templateUrl: 'views/dates.html',
controller: function($scope){
$(document).ready(function() {
$('#startDatePicker')
.datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
$('#endDatePicker')
.datepicker({
format: 'yyyy-mm-dd',
autoclose: true
});
});
}
}
});
add.html
<div class="main-container shadow-effect insert-tab">
<h2>Insert a New Pricing Schedule</h2>
<div>
<form class="form-inline" name="pricingInsertForm"
ng-submit="submitData()" role="form" novalidate >
<my-date-picker></my-date-picker>
</form>
</div>
I have left a lot of the filler code out but this is basically how it works. So When I load the application from localhost on the add view it works fine. But when I click off the add view to the home view or something like that and go back to the add view I get the error.
I want to know what is causing the datepicker not a function error and what I can do to fix it. Thanks in advance!
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