I have the below angularjs code. The problem is that alert box ($window.alert("here");) is not getting generated once the page in which the controller "HomeController" is included.
angular.module('gbuyRef').controller('UserController',function ($scope,$window,$http,$cookies) {
//default action
$scope.clicked = true;
$scope.loginError = false;
$scope.doGreeting = function () {
$scope.clicked = !$scope.clicked;
};
$scope.user = {};
$scope.signIn = function () {
$http({
method : 'POST',
url : '/signIn',
data : $.param($scope.user), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
// set the headers so angular passing info as form data (not request payload)
}).success(function(data, status, headers, config) {
if($scope.data != "failed") {
$scope.loginError = false;
$window.location.href="/static/html/home.html";
$cookies.fName = data;
$cookies.email = $scope.user.email;
$cookies.password = $scope.user.password;
$window.alert($cookies.fName)
} else {
$scope.loginError = true;
}
}).error(function(data, status, headers, config) {
$scope.status = status;
$window.alert($scope.status)
});
};
$scope.signUp = function () {
$http({
method : 'POST',
url : '/signUp',
data : $.param($scope.user), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
// set the headers so angular passing info as form data (not request payload)
}).success(function(data, status, headers, config) {
$scope.data = data;
if($scope.data != "failed") {
$scope.loginError = false;
$cookies.fName = data;
$window.location.href="/static/html/home.html";
} else {
$scope.loginError = true;
}
}).error(function(data, status, headers, config) {
$scope.status = status;
$window.alert($scope.status)
});
};
});
angular.module('gbuyRef').controller('HomeController',function ($scope,$window,$http,$cookies) {
$window.alert("here");
$scope.logOut = function() {
$http({
method : 'POST',
url : '/logOut',
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
// set the headers so angular passing info as form data (not request payload)
}).success(function(data, status, headers, config) {
$window.alert("here");
$cookies.fName = "";
$window.location.href="/static/html/login.html"
}).error(function(data, status, headers, config) {
$scope.status = status;
$window.alert("error")
});
}
});
My html is as follows:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gbuy-Product Details</title>
<!-- Bootstrap -->
<link href="../css/external/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/gbuy/gbuy.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>
<script src="../js/external/bootstrap/jquery-1.11.0.min.js"></script>
<script src="../js/external/jquery-ui/ui/jquery-ui.js"></script>
<script src="../js/external/bootstrap/bootstrap.js"></script>
<script src="../js/external/angular/angular.min.js"></script>
<script src="../js/external/angular/angular-cookies.js"></script>
<script src="../js/gbuy/gbuy.js"></script>
<script src="../js/gbuy/gbuy-ang-controller.js"></script>
<script src="../js/gbuy/gbuy-ang-directives.js"></script>
<script src="../js/external/angular/angular-cookies.js"></script>
<script>
$(function() {
$('#carousel_home').carousel();
});
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
</script>
</head>
<body ng-controller="HomeController">
<header>
<div class=" col-xs-12 header-color text-center" style="height:50px;" >
<div class= "col-xs-1" style="height:50px;">
<p class="gbuy-color text-left" style="font-family: 'Patua One', cursive;font-size:270%">GTEST</p>
</div>
<div style="padding:15px 0;">
<div class=" col-xs-1" style="width:50px;" > <a href="#" class="login-header-color" >Deals</a></div>
<div class=" col-xs-1" style="width:100px; "> Want List</div>
<div class="col-xs-4">
<form class="search-bar" role="search">
<div class="input-group" >
<input type="text" class="form-control text-center" placeholder="Search Products" name="srch-term" id="srch-term" style="width:400px;height:30px; ">
<div class="input-group-btn">
<button class="btn btn-default" style="height:30px;" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
<div class="col-xs-1 pull-right" style="margin-right:50px;">
<div style="padding-left: 0px;padding-right: 0px;" >
<ul class="nav pull-left">
<li class="dropdown text-left" style="width:100px;">
<a data-toggle="dropdown" class="dropdown-toggle dropdown-menu-hover-color login-header-color text-center" style="padding:0px 0px;" href="#">{{fName}}<b class="caret login-header-color"></b></a>
<ul class="dropdown-menu submenu-hover-color" style="margin:0;">
<li>Account</li>
<li>Purchase History</li>
<li>Rewards</li>
<li>Email Subscription</li>
<li>Refer a Friend</li>
<li><a ng-href="#" ng-click="logOut();">Log Out</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-xs-1 pull-right text-right" style="width:100px;">
Cart
<span class="divider" style="color:#FFF;">|</span>
Help
</div>
</div>
</div>
</header>
<div class="col-xs-1" style="width:150pt;background-color:#A8A8A8;border:2px ridge;border-radius:25px;">
<div class="navbar">
<div class="container-fluid">
<div class="nav-collapse">
<ul class="nav">
<li class="dropdown">
<a class= "dropdown-toggle dropdown-menu-hover-color menu-left-color" data-toggle="dropdown" href="#">Electronics</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-level1-color menu-left-color" href= "#">Laptop</a>
<ul class= "dropdown-menu sub-menu submenu-hover-color">
<li>Apple</li>
<li>Sony</li>
<li>HP</li>
</ul>
</li>
<li><a class="dropdown-level1-color menu-left-color" href= "#">Camera</a></li>
<li><a class="dropdown-level1-color menu-left-color" href= "#">TV</a></li>
</ul>
</li>
<li class="dropdown">
<a class= "dropdown-toggle dropdown-menu-hover-color menu-left-color" data-toggle="dropdown" href="#">Home</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-level1-color menu-left-color" href= "#">Furniture</a>
<ul class= "dropdown-menu sub-menu submenu-hover-color">
<li>Table</li>
<li>Chair</li>
<li>Cupboard</li>
</ul>
</li>
<li><a class="dropdown-level1-color menu-left-color" href= "#">Couch</a></li>
<li><a class="dropdown-level1-color menu-left-color" href= "#">Utensils</a></li>
</ul>
</li>
<li class="dropdown">
<a class= "dropdown-toggle dropdown-menu-hover-color menu-left-color" data-toggle="dropdown" href="#">Books</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-level1-color " href= "#">Education</a>
<ul class= "dropdown-menu sub-menu submenu-hover-color">
<li>Science</li>
<li>History</li>
<li>Geography</li>
</ul>
</li>
<li><a class="dropdown-level1-color" href=
"#">Magazines</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
</div>
<div class="col-xs-12" style="width:700pt; height:500pt; margin-top:5px; ">
<div class="row " style="margin-left:75pt;">
<label class="text-center" style="margin-top:10pt;font-size:14pt;">Highlighted Deals</label>
</div>
</div>
<div class="col-xs-2" style="width:100pt;"></div>
<div class="col-xs-2" style="width:100pt;"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<div class="push"></div>
<footer>
<!--Start FooterSection-->
<div id="footerSection" class="col-xs-12 footer-color footer">
<div id="blank1" class="col-xs-2"></div>
<div id="urls" class="col-xs-8">
<div class="col-xs-3">
<h5 style="color:white; font-weight:bold;">Work with Us</h5>
Sell on OneTab<br>
Advertise<br>
Affiliate Program<br>
Developers API<br>
Merchant Terms & Conditions
</div>
<div class="col-xs-3">
<h5 style="color:white; font-weight:bold;">Company</h5>
About OneTab<br>
Jobs
</div>
<div class="col-xs-3">
<h5 style="color:white; font-weight:bold;">Help</h5>
FAQ<br>
Return Policy<br>
Terms of Use<br>
Privacy Statement
</div>
<div class="col-xs-3">
<h5 style="color:white; font-weight:bold;">More</h5>
Gift Cards<br>
Mobile
</div>
<div id="blank2" class="col-xs-2"></div>
</div><!--End of urls-->
<div id="copyright" class="col-xs-12 text-center">
<h5 style="color:white;">© 2014 All rights Reserved</h5>
</div><!--End of copyright-->
</div><!--End of footerSection-->
</footer>
</body>
</html>
Any help would be appreciated.
Thanks in advance.
Related
<div class="wrapper" id="body" ng-app="masterview" ng-controller="masterctrl" data-ng-init="getmenus()">
<header id="header">
<div class="header-width row">
<div class="col-xl-9">
<div class="logo float-xs-left">
<a href="#">
<img src="~/img/logo_accord.png" alt="Ace Report" />
</a>
</div>
</div>
<div class="col-xl-3 header-right">
<div class="header-inner-right">
<div class="float-default chat">
<div class="right-icon">
<a href="#">
<i class="fa fa-envelope-o"></i>
</a>
</div>
</div>
<div class="float-default chat">
<div class="right-icon">
<a href="#">
<i class="fa fa-comments-o"></i>
</a>
</div>
</div>
<div class="user-dropdown">
<div class="btn-group">
<a href="index.html#" class="user-header dropdown-toggle" data-toggle="dropdown"
data-animation="slideOutUp" aria-haspopup="true"
aria-expanded="false">
<img src="~/assets/images/user.jpg" alt="Profile image" />
</a>
<div class="dropdown-menu user drop-profile dropdown-card dropdown-card-profile animated flipInY">
#*
<header class="card-header d-flex">
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-user"></i>
</a>
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-cog"></i>
</a>
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-power-off"></i>
</a>
</header>*#
<ul class="list-unstyled card-body">
#*
<li>
<a href="index.html#">
<span>
<span class="align-middle">Manage Accounts</span>
</span>
</a>
</li>*#
<li>
<a href="index.html#">
<span>
<span class="align-middle">Change Password</span>
</span>
</a>
</li>
#*
<li>
<a href="index.html#">
<span>
<span class="align-middle">Check Inbox</span>
</span>
</a>
</li>*#
<li>
<a href="#Url.Action("Logout", "Admin")">
<span>
<span class="align-middle">Sign Out</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--top menu bar-->
<div id="header-icon" class="" >
<div class="header-width">
<div class="col-xl-12">
<div class="menucontainer">
<div class="overlapblackbg"></div>
<a id="navtoggle" class="animated-arrow">
<span></span>
</a>
<nav id="nav" class="topmenu" role="navigation">
<div class="sidebar-search">
<div class="logo float-xs-left">
</div>
<a href="javascript:void(0)">
<i class="search-close icon_search"></i>
</a>
</div>
<!--left menu-->
<ul id="dvMenuInner" class="nav navbar-nav">
<li ng-repeat="parent in menu" class="dropdown">
<a href="/{{parent.url}}/{{parent.actionname}}" ng-show="!parent.children">
<span class="fa fa-tachometer header-icon" aria-hidden="true"></span>{{parent.menuname}}
</a>
<a href="/{{parent.url}}/{{parent.actionname}}" ng-show="parent.children" class="dropdown-toggle" data-toggle="dropdown">
<span class="fa fa-tachometer header-icon" aria-hidden="true"></span>{{parent.menuname}}
</a>
<ul class="dropdown-menu" ng-show="parent.children">
<li ng-repeat="child in parent.children" ng-show="!child.childrencc">
{{child.menuname}}
</li>
<li class="dropdown-submenu" ng-repeat="child in parent.children" ng-show="child.childrencc">
{{child.menuname}}
{{child.menuname}}
<ul class="dropdown-menu" ng-show="child.childrencc">
<li ng-repeat="children in child.childrencc">
{{children.menuname}}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER -->
<!-- START CONTENT -->
<section id="main" class="container-fluid">
<!-- START RIGHT CONTENT -->
#*
<div class="row">
<!-- START RIGHT CONTENT -->
<section id="content-wrapper" class="form-elements">
<!-- START PAGE TITLE -->
<div class="site-content-title">
<h2 class="float-xs-left content-title-main">Client Dashboard</h2>
<!-- START BREADCRUMB -->
<ol class="breadcrumb float-xs-right">
<li class="breadcrumb-item">
<span class="fa fa-home" aria-hidden="true"></span>
Home
</li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
<!-- END BREADCRUMB -->
</div>
<!-- END PAGE TITLE -->
</section>
</div>*#
#*
<div class="contain-inner"></div>*#
<ng-view> #RenderBody()</ng-view>
</section>
#*
</div>
I want menus to be loaded at the start of the application and I have multiple pages in MVC, so the problem is getting the error stated that controller not registered. so can you tell me how can I handle ng-app and ng-controller in master page and pages?
I am loading menus as follows:
app.controller('masterctrl', function ($scope, $http, $window) {
$scope.getmenus = function () {
var holding_url = encodeURI(APIURL + "getmenus");
$http.get(holding_url)
.then(function (response) {
$scope.names = response.data.t1;
$scope.menu = [];
$scope.childrenmenu = [];
$scope.count = 0;
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid == 0) {
$scope.menu.push(value);
}
});
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid != 0) {
angular.forEach($scope.menu, function (value2, key2) {
if (value.parentid == value2.menuid) {
if (value2.children == undefined) {
value2.children = [];
value2.showChildren = false;
}
value2.children.push(value);
$scope.childrenmenu.push(value);
}
});
}
});
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid != 0) {
angular.forEach($scope.childrenmenu, function (value3, key3) {
if (value.parentid == value3.menuid) {
if (value3.childrencc == undefined) {
value3.childrencc = [];
value3.showChildren = false;
}
value3.childrencc.push(value);
}
});
}
});
Please see image due to that error data in table is also not loading properly, because master page and pages controller can not work together.
you need to bootstrap them using angular.bootstrap()
first give id to the child div lets say App2
<div class="ibox float-e-margins" ng-app="childview" id="App2">
</div>
angular.bootstrap(document.getElementById("App2"), ['childview']);
this will allow Angular to run subsequent views to run on the dom
Why not this ?
<div class="wrapper" id="body" ng-app="masterview" >
<div ng-controller="masterctrl" data-ng-init="getmenus()">
<!-- rest of your code --->
</div>
</div>
I have a problem with the repository list in the list of all Conributors for this repository.
I want to create a Contributors list in the list of repositories downloaded using GitHub Api. However, I can not get these data for each repository and put them in html.
Has anyone any idea how to do this?
Thank you in advance for your help
My code:
App in html
<div ng-controller="gitApi" ng-app="app">
<div class="container">
<h1 class="text-center">
<span ng-hide="userData" />Loading</span>
<span />{{userData.name}}</span>
<br>
<a href="{{userData.html_url}}" class="btn btn-default">
{{userData.login}}
</a>
</h1>
<div class="panel panel-default">
<div class="panel-heading">
<form class="form-inline">
<span>
<h4>Repos <span class="badge">{{repoData.length}}</span>
<input ng-model="searchText" placeholder="Search" class="form-control input-sm">
</h4>
</span>
</form>
</div>
<div class="panel-body">
<div class="list-group">
<div ng-repeat="orgs in orgsData | filter:searchText | orderBy:predicate:reverse" class="list-group-item ">
<div class="row">
<div class="col-md-6">
<h4>
<a href="{{repo.html_url}}" target="_blank">
{{orgs.name}}
</a>
<small>{{orgs.description}}</small>
</h4>
<small>
<a href="{{orgs.homepage}}" class="">
<i class="fa fa-link"></i> WebPage
</a>
</small>
</div>
<div class="col-md-6">
Conributors List:
<div ng-repeat=" | filter:searchText | orderBy:predicate:reverse" class="list-group-item ">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
APP.js
angular.module('app', [])
.controller('gitApi', ['$scope', '$http', function($scope, $http) {
$scope.reposLoaded = false;
$scope.userLoaded = false;
$scope.orgsLoaded = false;
$http.get("https://api.github.com/users/angular")
.success(function(data) {
$scope.userData = data;
loadOrgsRepos();
});
var loadOrgsRepos = function() {
$http.get("https://api.github.com/orgs/angular/repos")
.success(function(data) {
$scope.orgsData = data;
});
}
$scope.predicate = '-updated_at';
}]);
You can get all contributors url from contributors_url and make an API call for each one of these, storing the result in the original $scope.orgsData array :
"use strict";
var githubApp = angular.module('app', []);
githubApp.controller('gitApi', ['$scope', '$http', '$q', function($scope, $http, $q) {
$http.get("https://api.github.com/users/angular")
.success(function(data) {
$scope.userData = data;
loadOrgsRepos();
});
var loadOrgsRepos = function() {
$http.get("https://api.github.com/orgs/angular/repos")
.success(function(data) {
$scope.orgsData = data;
var contribs = [];
for (var i in data) {
contribs.push(data[i].contributors_url);
}
$q.all(contribs.map(function(item) {
return $http({
method: 'GET',
url: item
});
}))
.then(function(results) {
results.forEach(function(val, i) {
$scope.orgsData[i].contributors = val.data;
});
});
});
}
$scope.repo_sort = '-updated_at';
$scope.contrib_sort = '-contributions'
}]);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body id="page-top" class="index">
<div ng-controller="gitApi" ng-app="app">
<div class="container">
<h1 class="text-center">
<span ng-hide="userData">Loading</span>
<span>{{userData.name}}</span>
<br>
<a href="{{userData.html_url}}" class="btn btn-default">
{{userData.login}}
</a>
</h1>
<div class="panel panel-default">
<div class="panel-heading">
<form class="form-inline">
<span>
<h4>Repos <span class="badge">{{repoData.length}}</span>
<input ng-model="searchText" placeholder="Search" class="form-control input-sm">
</h4>
</span>
</form>
</div>
<div class="panel-body">
<div class="list-group">
<div ng-repeat="orgs in orgsData | filter:searchText | orderBy:repo_sort:reverse" class="list-group-item ">
<div class="row">
<div class="col-md-8">
<h4>
<a href="{{repo.html_url}}" target="_blank">
{{orgs.name}}
</a>
<small>{{orgs.description}}</small>
</h4>
<small>
<a href="{{orgs.homepage}}" class="">
<i class="fa fa-link"></i> WebPage
</a>
</small>
</div>
<div class="col-md-6">
Conributors List:
<div class="list-group-item">
<div class="row">
<div class="col-md-4">
name
</div>
<div class="col-md-4">
avatar
</div>
<div class="col-md-4">
contributions
</div>
</div>
</div>
<div ng-repeat="contrib in orgs.contributors | filter:searchText | orderBy:contrib_sort:reverse" class="list-group-item">
<div class="row">
<div class="col-md-4">
<a href="{{contrib.html_url}}" target="_blank">
{{contrib.login}}
</a>
</div>
<div class="col-md-4">
<img ng-src="{{contrib.avatar_url}}" height="42" width="42" />
</div>
<div class="col-md-4">
<p>
{{contrib.contributions}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Here is another fiddle
I have a todo spring boot app works 100% without spring security ,but if i use spring security angularjs will not work any more i use thymeleaf for pages but this page i use HTML with Angular without thymeleaf but angular actions will not work i am sure that the problem is with spring security
HTML PAGE :
<!DOCTYPE html>
<html ng-app="taskManagerApp" >
<head>
<meta charset="utf-8"/>
<!--IE Compatibility Meta-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!--first Mobile Meta-->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Tasks</title>
<!--css fontawesome jb-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
<!--My Css File-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/css/task.css"/>
<link rel="stylesheet" href="/css/animate.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/style.css"/>
<!--if IT IE 9-->
<script data-require="angular.js#*" data-semver="1.3.0-beta.14"
src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<script data-require="angular-animate#*" data-semver="1.3.0-beta.14"
src="http://code.angularjs.org/1.3.0-beta.14/angular-animate.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/jquery.nicescroll.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="/js/main-p.js"></script>
<script src="/js/plugin.js"></script>
<!--endif-->
</head>
<body>
<!--==============Start Menu==========-->
<div class="row">
<nav class="navbar navbar-inverse sidebar col-sm-6 col-md-2" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-sidebar-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Our logo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="/main"># Activity<span style="font-size:16px;"
class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a>
</li>
<li><a href="/chat">Chat<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-comments"></span></a>
</li>
<li><a href="/task">Tasks<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-bolt"></span></a>
</li>
<li><a href="/file">Files<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-paperclip"></span></a>
</li>
<li><a href="/calender">Calender<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-calculator"></span></a>
</li>
<li><a href="/search">Search<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-search"></span></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span
class="caret"></span><span style="font-size:16px;"
class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--==========End Section Menu=========-->
<!--==========Start Section Project=========-->
<div class="right-side col-xs-11 col-sm-11 col-md-10">
<!--==========Start Navbar=========-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="nav-brand" class="navbar-brand " href="#">Project name <span
class="fa fa-angle-right"></span></a>
</div>
<div class="navbar-collapse collapse horizon-nav">
<ul id="home-page" class="nav navbar-nav ">
<li id="activ">Activity</li>
</ul>
<ul id="main-menu" class="nav navbar-nav navbar-right">
<li id="profile"><a id="account" href="#" class="dropdown-toggle ">
<img class="img-circle" src="../static/images/1.jpg"
style="margin-right:5%;"/>Mohamed</a>
</li>
<li id="logout">logout
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--==========End Navbar=========-->
<!--==========Start Divs=========-->
<!-- this is main Div that contain navbar divs -->
<div id="content" class="yellow col-xs-12">
<!-- add task here !! -->
<div ng-controller="taskManagerController" >
<div id="task-panel" class="fadein fadeout showpanel panel" ng-show="toggle">
<div class="panel-heading ">
<!--<i class="panel-title-icon fa fa-tasks"></i>-->
<div class="panel-heading-controls">
<span class="panel-title">Recent Tasks</span>
<button ng-click="toggle = !toggle" class="btn-panel">Add New Task</button>
<button class="btn-panel " confirmed-click="archiveTasks()"
ng-confirm-click="Would you like to archive completed tasks?">Clear completed tasks
</button>
</div>
</div>
<div class="panel-body">
<div class="task" ng-repeat="task in tasks">
<span ng-if="task.taskPriority=='HIGH'" class="priority priority-red">
{{task.taskPriority}}
</span>
<span ng-if="task.taskPriority=='MEDIUM'" class="priority priority-yellow">
{{task.taskPriority}}
</span>
<span ng-if="task.taskPriority=='LOW'" class="priority priority-green">
{{task.taskPriority}}
</span>
<div class="action-checkbox">
<input id="{{task._links.self.href}}" type="checkbox" value="{{task._links.self.href}}"
ng-checked="selection.indexOf(task._links.self.href) > -1"
ng-click="toggleSelection(task._links.self.href)"/>
<label for="{{task._links.self.href}}"></label>
</div>
<div ng-if="task.taskStatus=='COMPLETED'">
<a href="#" class="checkedClass">
{{task.taskName}}
<span class="action-status">{{task.taskStatus}}</span>
</a>
</div>
<div ng-if="task.taskStatus=='ACTIVE'">
<a href="#" class="uncheckedClass">
{{task.taskName}}
<span class="action-status">{{task.taskStatus}}</span>
</a>
</div>
</div>
</div>
</div>
<div id="add-task-panel" class="fadein fadeout addpanel panel" ng-hide="toggle">
<div class="panel-heading">
<div class="panel-heading-controls">
<i class="panel-title-icon fa fa-plus"></i>
<span class="panel-title panel-title2">Add Task</span>
<button ng-click="toggle = !toggle" class="btn-panel">Show All Tasks</button>
</div>
</div>
<div class="panel-body">
<div class="task">
<table class="add-task">
<tr>
<td>Task Name:</td>
<td><input type="text" ng-model="taskName"/></td>
</tr>
<tr>
<td>Task Description:</td>
<td><input type="text" ng-model="taskDesc"/></td>
</tr>
<tr>
<td>Task Status:</td>
<td>
<select ng-model="taskStatus"
ng-options="status as status for status in statuses">
<option value="">-- Select --</option>
</select>
</td>
</tr>
<tr>
<td>Task Priority:</td>
<td>
<select ng-model="taskPriority"
ng-options="priority as priority for priority in priorities">
<option value="">-- Select --</option>
</select>
</td>
</tr>
<tr>
<td><br/>
<button ng-click="addTask()" class="btn-panel-big">Add New Task</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--==========End Divs=========-->
</div>
<!--==========End Section Project=========-->
</div>
</body>
</html>
App.JS
var taskManagerModule = angular.module('taskManagerApp', ['ngAnimate']);
taskManagerModule.controller('taskManagerController', function ($scope,$http) {
var urlBase="";
$scope.toggle=true;
$scope.selection = [];
$scope.statuses=['ACTIVE','COMPLETED'];
$scope.priorities=['HIGH','LOW','MEDIUM'];
$http.defaults.headers.post["Content-Type"] = "application/json";
function findAllTasks() {
//get all tasks and display initially
$http.get(urlBase + '/tasks/search/findByTaskArchived?archivedfalse=0').
success(function (data) {
if (data._embedded != undefined) {
$scope.tasks = data._embedded.tasks;
} else {
$scope.tasks = [];
}
for (var i = 0; i < $scope.tasks.length; i++) {
if ($scope.tasks[i].taskStatus == 'COMPLETED') {
$scope.selection.push($scope.tasks[i].taskId);
}
}
$scope.taskName="";
$scope.taskDesc="";
$scope.taskPriority="";
$scope.taskStatus="";
$scope.toggle='!toggle';
});
}
findAllTasks();
//add a new task
$scope.addTask = function addTask() {
if($scope.taskName=="" || $scope.taskDesc=="" || $scope.taskPriority == "" || $scope.taskStatus == ""){
alert("Insufficient Data! Please provide values for task name, description, priortiy and status");
}
else{
$http.post(urlBase + '/tasks', {
taskName: $scope.taskName,
taskDescription: $scope.taskDesc,
taskPriority: $scope.taskPriority,
taskStatus: $scope.taskStatus
}).
success(function(data, status, headers) {
alert("Task added");
var newTaskUri = headers()["location"];
console.log("Might be good to GET " + newTaskUri + " and append the task.");
// Refetching EVERYTHING every time can get expensive over time
// Better solution would be to $http.get(headers()["location"]) and add it to the list
findAllTasks();
});
}
};
// toggle selection for a given task by task id
$scope.toggleSelection = function toggleSelection(taskUri) {
var idx = $scope.selection.indexOf(taskUri);
// is currently selected
// HTTP PATCH to ACTIVE state
if (idx > -1) {
$http.patch(taskUri, { taskStatus: 'ACTIVE' }).
success(function(data) {
alert("Task unmarked");
findAllTasks();
});
$scope.selection.splice(idx, 1);
}
// is newly selected
// HTTP PATCH to COMPLETED state
else {
$http.patch(taskUri, { taskStatus: 'COMPLETED' }).
success(function(data) {
alert("Task marked completed");
findAllTasks();
});
$scope.selection.push(taskUri);
}
};
// Archive Completed Tasks
$scope.archiveTasks = function archiveTasks() {
$scope.selection.forEach(function(taskUri) {
if (taskUri != undefined) {
$http.patch(taskUri, { taskArchived: 1});
}
});
alert("Successfully Archived");
console.log("It's risky to run this without confirming all the patches are done. when.js is great for that");
findAllTasks();
};
});
//Angularjs Directive for confirm dialog box
taskManagerModule.directive('ngConfirmClick', [
function(){
return {
link: function (scope, element, attr) {
var msg = attr.ngConfirmClick || "Are you sure?";
var clickAction = attr.confirmedClick;
element.bind('click',function (event) {
if ( window.confirm(msg) ) {
scope.$eval(clickAction);
}
});
}
};
}]);
Spring security config :
#Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
#Autowired
UserDetailsService userDS;
#Override
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/register","/").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.usernameParameter("email")
.passwordParameter("password")
.defaultSuccessUrl("/dashboard")
.permitAll()
.and()
.logout().logoutSuccessUrl("/login?logout")
.permitAll();
}
#Bean
public BCryptPasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
#Autowired
public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
auth
.userDetailsService(userDS).passwordEncoder(passwordEncoder());
}
#Override
protected UserDetailsService userDetailsService() {
return userDS;
}
}
i solved the problem adding
http.csrf().disable();
to spring security config
Check the console of your browser, I guess there will be an error of 'No access Control Allow Origin' present. So you need to implement a "CORS Filter" in your application, spring security does not allow request from different origins, so manually need to allow them. You will get many resources on how to implement CORS in your application.
I followed example given in url below:
http://websystique.com/springmvc/spring-mvc-4-angularjs-example/
thanks
i am working on todo list it is working ok but when i add spring security to project and click on add it gives
2016-07-10 04:32:34.441 WARN 6692 --- [nio-8080-exec-8]
o.s.web.servlet.PageNotFound : Request method 'POST' not
supported
any solution to this problem
SpringWebSecurityConfig :
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
#Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
#Autowired
UserDetailsService userDS;
#Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable();
http
.authorizeRequests()
.antMatchers("/register", "/", "/home").permitAll()
.antMatchers("/css/*").permitAll()
.antMatchers("/images/*").anonymous()
.antMatchers("/fonts/*").permitAll()
.antMatchers("/js/**").permitAll()
.antMatchers("/template/**").permitAll()
.antMatchers("/favicon.ico").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.usernameParameter("email")
.passwordParameter("password")
.defaultSuccessUrl("/dashboard")
.permitAll()
.and()
.logout().logoutSuccessUrl("/login?logout")
.permitAll();
}
#Bean
public BCryptPasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
#Autowired
public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
auth
.userDetailsService(userDS).passwordEncoder(passwordEncoder());
}
#Override
protected UserDetailsService userDetailsService() {
return userDS;
}
}
Controller:
#Controller
public class TaskController {
#RequestMapping("/task")
public String task() {
return "task";
}
}
task.html
<!DOCTYPE html>
<html ng-app="taskManagerApp">
<head>
<meta charset="utf-8"/>
<!--IE Compatibility Meta-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!--first Mobile Meta-->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Tasks</title>
<!--css fontawesome jb-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
<!--My Css File-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/css/task.css"/>
<link rel="stylesheet" href="/css/animate.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/style.css"/>
<!--if IT IE 9-->
<script data-require="angular.js#*" data-semver="1.3.0-beta.14"
src="http://code.angularjs.org/1.3.0-beta.14/angular.js"></script>
<script data-require="angular-animate#*" data-semver="1.3.0-beta.14"
src="http://code.angularjs.org/1.3.0-beta.14/angular-animate.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/jquery.nicescroll.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="/js/main-p.js"></script>
<script src="/js/plugin.js"></script>
<!--endif-->
</head>
<body>
<!--==============Start Menu==========-->
<div class="row">
<nav class="navbar navbar-inverse sidebar col-sm-6 col-md-2" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-sidebar-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Todx</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="/dashboard"># Dashboard<span style="font-size:16px;"
class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></a>
</li>
<li><a href="/chat">Chat<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-comments"></span></a>
</li>
<li><a href="/task">Tasks<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-bolt"></span></a>
</li>
<li><a href="/files">Files<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-paperclip"></span></a>
</li>
<li><a href="/calendar">Calendar<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-calculator"></span></a>
</li>
<li><a href="/addtocalendar">Add to calendar<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-calendar-o
"></span></a>
</li>
<li><a href="/hangout">Hangout<span style="font-size:16px;"
class="pull-right hidden-xs showopacity fa fa-video-camera
"></span></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span
class="caret"></span><span style="font-size:16px;"
class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--==========End Section Menu=========-->
<!--==========Start Section Project=========-->
<div class="right-side col-xs-11 col-sm-11 col-md-10">
<!--==========Start Navbar=========-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="nav-brand" class="navbar-brand " href="#"><span
class="fa fa-angle-right"></span></a>
</div>
<div class="navbar-collapse collapse horizon-nav">
<ul id="home-page" class="nav navbar-nav ">
<li id="activ"></li>
</ul>
<ul id="main-menu" class="nav navbar-nav navbar-right">
<li id="profile"><a id="account" href="#" class="dropdown-toggle ">
<img class="img-circle img-responsive"
src="/images/1.png"
style="margin-left:5; width: 50px;display: inline-flex "/></a>
</li>
<li id="logout">logout
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--==========End Navbar=========-->
<!--==========Start Divs=========-->
<!-- this is main Div that contain navbar divs -->
<div id="content" class="yellow col-xs-12">
<!-- add task here !! -->
<div ng-controller="taskManagerController">
<div id="task-panel" class="fadein fadeout showpanel panel" ng-show="toggle">
<div class="panel-heading ">
<!--<i class="panel-title-icon fa fa-tasks"></i>-->
<div class="panel-heading-controls">
<i class="panel-title-icon fa fa-tasks"></i>
<span class="panel-title">Recent Tasks</span>
<button ng-click="toggle = !toggle" class="btn-md btn-panel ">Add New Task</button>
<button class="btn-md btn-panel " ng-click="archiveTasks()"> Clear completed
<!--ng-confirm-click="Would you like to archive completed tasks?">Clear completed tasks-->
</button>
</div>
</div>
<div class="panel-body">
<div style="text-align: left" class="task" ng-repeat="task in tasks">
<span ng-if="task.taskPriority=='HIGH'" class="priority priority-red">
{{task.taskPriority}}
</span>
<span ng-if="task.taskPriority=='MEDIUM'" class="priority priority-yellow">
{{task.taskPriority}}
</span>
<span ng-if="task.taskPriority=='LOW'" class="priority priority-green">
{{task.taskPriority}}
</span>
<div class="action-checkbox">
<input id="{{task._links.self.href}}" type="checkbox" value="{{task._links.self.href}}"
ng-checked="selection.indexOf(task._links.self.href) > -1"
ng-click="toggleSelection(task._links.self.href)"/>
<label for="{{task._links.self.href}}"></label>
</div>
<div ng-if="task.taskStatus=='COMPLETED'">
<a href="#" class="checkedClass">
{{task.taskName}}
<span class="action-status">{{task.taskStatus}}</span>
</a>
</div>
<div style="text-align: left" ng-if="task.taskStatus=='ACTIVE'">
<a href="#" class="uncheckedClass">
{{task.taskName}}
<span class="action-status">{{task.taskStatus}}</span>
</a>
</div>
</div>
</div>
</div>
<div id="add-task-panel" class="fadein fadeout addpanel panel" ng-hide="toggle">
<div class="panel-heading">
<div class="panel-heading-controls">
<i class="panel-title-icon fa fa-plus"></i>
<span class="panel-title panel-title2">Add Task</span>
<button ng-click="toggle = !toggle" class="btn-panel">Show All Tasks</button>
</div>
</div>
<div class="panel-body">
<div class="task">
<table class="add-task">
<tr>
<td>Task Name:</td>
<td><input type="text" ng-model="taskName" class="form-group"/></td>
</tr>
<tr>
<td>Task Description:</td>
<td><input type="text" ng-model="taskDesc" class="form-group"/></td>
</tr>
<tr>
<td>Task Status:</td>
<td>
<select ng-model="taskStatus"
ng-options="status as status for status in statuses">
<option value="">-- Select --</option>
</select>
</td>
</tr>
<tr>
<td>Task Priority:</td>
<td>
<select ng-model="taskPriority"
ng-options="priority as priority for priority in priorities">
<option value="">-- Select --</option>
</select>
</td>
</tr>
<tr>
<td><br/>
<button ng-click="addTask()" class="btn-panel-big"
>Add New Task
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--==========End Divs=========-->
</div>
<!--==========End Section Project=========-->
</div>
</body>
</html>
app.js
var taskManagerModule = angular.module('taskManagerApp', ['ngAnimate']);
taskManagerModule.controller('taskManagerController', function ($scope,$http) {
var urlBase="";
$scope.toggle=true;
$scope.selection = [];
$scope.statuses=['ACTIVE','COMPLETED'];
$scope.priorities=['HIGH','LOW','MEDIUM'];
$http.defaults.headers.post["Content-Type"] = "application/json";
function findAllTasks() {
//get all tasks and display initially
$http.get(urlBase + '/tasks/search/findByTaskArchived?archivedfalse=0').
success(function (data) {
if (data._embedded != undefined) {
$scope.tasks = data._embedded.tasks;
} else {
$scope.tasks = [];
}
for (var i = 0; i < $scope.tasks.length; i++) {
if ($scope.tasks[i].taskStatus == 'COMPLETED') {
$scope.selection.push($scope.tasks[i].taskId);
}
}
$scope.taskName="";
$scope.taskDesc="";
$scope.taskPriority="";
$scope.taskStatus="";
$scope.toggle='!toggle';
});
}
findAllTasks();
//add a new task
$scope.addTask = function addTask() {
if($scope.taskName=="" || $scope.taskDesc=="" || $scope.taskPriority == "" || $scope.taskStatus == ""){
alert("Insufficient Data! Please provide values for task name, description, priortiy and status");
}
else{
$http.post(urlBase + '/tasks', {
taskName: $scope.taskName,
taskDescription: $scope.taskDesc,
taskPriority: $scope.taskPriority,
taskStatus: $scope.taskStatus
}).
success(function(data, status, headers) {
alert("Task added");
var newTaskUri = headers()["location"];
console.log("Might be good to GET " + newTaskUri + " and append the task.");
// Refetching EVERYTHING every time can get expensive over time
// Better solution would be to $http.get(headers()["location"]) and add it to the list
findAllTasks();
});
}
};
// toggle selection for a given task by task id
$scope.toggleSelection = function toggleSelection(taskUri) {
var idx = $scope.selection.indexOf(taskUri);
// is currently selected
// HTTP PATCH to ACTIVE state
if (idx > -1) {
$http.patch(taskUri, { taskStatus: 'ACTIVE' }).
success(function(data) {
alert("Task unmarked");
findAllTasks();
});
$scope.selection.splice(idx, 1);
}
// is newly selected
// HTTP PATCH to COMPLETED state
else {
$http.patch(taskUri, { taskStatus: 'COMPLETED' }).
success(function(data) {
alert("Task marked completed");
findAllTasks();
});
$scope.selection.push(taskUri);
}
};
// Archive Completed Tasks
$scope.archiveTasks = function archiveTasks() {
$scope.selection.forEach(function(taskUri) {
if (taskUri != undefined) {
$http.patch(taskUri, { taskArchived: 1});
}
});
alert("Successfully Archived");
console.log("It's risky to run this without confirming all the patches are done. when.js is great for that");
findAllTasks();
};
});
//Angularjs Directive for confirm dialog box
taskManagerModule.directive('ngConfirmClick', [
function(){
return {
link: function (scope, element, attr) {
var msg = attr.ngConfirmClick || "Are you sure?";
var clickAction = attr.confirmedClick;
element.bind('click',function (event) {
if ( window.confirm(msg) ) {
scope.$eval(clickAction);
}
});
}
};
}]);
Notice that the get it working and it retrive all tasks but the post give 405 in the network developer chrome console and i think it is in spring security it worked before on spring security but i do not know what i did and now it is not working
By default, it’s assumed all incoming requests to URLs are of the HTTP GET kind. To differentiate the mapping by HTTP request type, we need to explicitly specify the HTTP request method in the #RequestMapping declaration
If you are trying to POST to this URL, Spring will reject it.
Try changing your annotation to
#RequestMapping(value = "/task", method = RequestMethod.POST)
public String task() {
return "task";
}
If you already have a external reference for the current GET method, you can still create an additional definition for the POST method, so that both can coexist. You only have to assign them different Java method names like this
#RequestMapping(value = "/task", method = RequestMethod.GET)
public String task() {
return "task";
}
#RequestMapping(value = "/task", method = RequestMethod.POST)
public String postTask() {
return "task";
}
UPDATE 1
If your controller is intended to receive Ajax calls, you need to add additional annotations (like #ResponseBody) to let Spring MVC know that this is an ajax capable controller / method
#ResponseBody
#RequestMapping(value = "/task", method = RequestMethod.POST)
public String task() {
return "task";
}
UPDATE 2
Try the following. Truly, I don't know if Spring Security enforces parameters versus method signatures, but it may be your case.
public String task(#RequestParam(value = "taskName") String taskName,
#RequestParam(value = "taskDescription") String taskDescription,
#RequestParam(value = "taskPriority") String taskPriority,
#RequestParam(value = "taskStatus") String taskStatus) {
return "task";
}
i found the problem i was making another controller get to /{files}
which conflict with the post method of the angular
Hi i tried to make ngRoute works but found post about ui-route. I follow this example here but i can't get anything working, tho i have no error message in the console.
I'm trying with pure text partials atm.
index.html :
<!DOCTYPE html>
<html lang="fr" ng-app="todoList">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<!-- <script src="js/jquery.js"></script>
<script src="js/angular-route.js"></script>-->
<script src="js/angular.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="js/todolist.js"></script>
<script src="js/controller.js"></script>
<!-- App Script -->
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid" >
<div class="navbar-header">
<a class="navbar-brand" ui-sref="index">Pense-bête</a>
</div>
<div class="navbar navbar-right" id="myNavbar" >
<ul class="nav navbar-nav">
<li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button></li>
<li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
</button></li>
<li><button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button></li>
</ul>
</div>
</div>
</nav>
<div class="row">
</div>
<div class="row" id="menu" ng-controller='navCtrl'>
<div class="col-sm-3 cold-md-2" id="left-menu">
<ul class="nav nav-pills nav-stacked">
<li ng-class="{active: menu=='inbox'}"><a ui-sref="inbox" ng-click="menu='inbox'"><span class="glyphicon glyphicon-inbox">
</span> Boite de réception</a></li>
<li ng-class="{active: menu=='today'}"><a ui-sref="today" ng-click="menu='today'"><span class="glyphicon glyphicon-calendar"></span> Aujourd'hui</a></li>
<li><span class="glyphicon glyphicon-calendar"></span> Cette semaine</li>
<li><i class="glyphicon glyphicon-pushpin"></i> Important </li>
<li><a href="#profile" data-toggle="tab"><span class="glyphicon glyphicon-cutlery"></span>
Repas</a></li>
<li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-shopping-cart"></span>
Courses</a></li>
<li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-list"></span>
Perso</a></li>
<li><a href="#messages" data-toggle="tab"><span class="glyphicon glyphicon-plus"></span>
Nouvelle liste</a></li>
</ul>
</div>
<div class="col-sm-9 cold-md-10" id='main-view'>
<div ui-view>
</div>
</div>
</div>
</body>
</html>
todolist.js :
var todoList = angular.module('todoList', ["ui.router"])
todoList.config(function($stateProvider){
$urlRouterProvider.otherwise("/inbox");
$stateProvider
.state('inbox', {
url: "/inbox",
templateUrl: "partials/inbox.html"
})
.state('today', {
url: "/today",
templateUrl: "partials/today.html"
})
})
controller.js :
var todoListController= angular.module('todoList', []);
todoListController.controller('todoCtrl',['$scope',
function ($scope) {
var todos = $scope.todos = [];
$scope.addTodo = function () {
var newTodo = $scope.newTodo.trim();
if (!newTodo.length) {
return;
}
todos.push({
title: newTodo,
completed: false
});
$scope.newTodo = '';
};
$scope.removeTodo = function (todo) {
todos.splice(todos.indexOf(todo), 1);
};
$scope.markAll = function (completed) {
todos.forEach(function (todo) {
todo.completed = !completed;
});
};
$scope.clearCompletedTodos = function () {
$scope.todos = todos = todos.filter(function (todo) {
return !todo.completed;
});
};
}]);
todoListController.controller('todayCtrl', function($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
todoListController.controller('navCtrl', function($scope) {
$scope.menu = 'inbox';
});
I updated the plunk. The following were corrected.
moved angularjs script as the first script.
include angular-ui-router.min.js followed by angularjs
the controller has a different variable todoListController. Not todoList
The $urlRouterProvider not mentioned in script.js
script.js
var todoList = angular.module('todoList', ["ui.router"])
todoList.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/inbox");
$stateProvider
.state('inbox', {
url: "/inbox",
templateUrl: "inbox.html"
})
.state('today', {
url: "/today",
templateUrl: "today.html"
})
})
index.html
<!DOCTYPE html>
<html lang="fr" ng-app="todoList">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="index">Pense-bête</a>
</div>
<div class="navbar navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li>
<button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</li>
<li>
<button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
</button>
</li>
<li>
<button type="button" class="btn btn-default navbar-btn" ng-click="clearCompletedTodos()">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="row"></div>
<div class="row" id="menu" ng-controller="navCtrl">
<div class="col-sm-3 cold-md-2" id="left-menu">
<ul class="nav nav-pills nav-stacked">
<li ng-class="{active: menu=='inbox'}">
<a ui-sref="inbox" ng-click="menu='inbox'">
<span class="glyphicon glyphicon-inbox"></span>
Boite de réception</a>
</li>
<li ng-class="{active: menu=='today'}">
<a ui-sref="today" ng-click="menu='today'">
<span class="glyphicon glyphicon-calendar"></span>
Aujourd'hui</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-calendar"></span>
Cette semaine</a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-pushpin"></i>
Important </a>
</li>
<li>
<a href="#profile" data-toggle="tab">
<span class="glyphicon glyphicon-cutlery"></span>
Repas</a>
</li>
<li>
<a href="#messages" data-toggle="tab">
<span class="glyphicon glyphicon-shopping-cart"></span>
Courses</a>
</li>
<li>
<a href="#messages" data-toggle="tab">
<span class="glyphicon glyphicon-list"></span>
Perso</a>
</li>
<li>
<a href="#messages" data-toggle="tab">
<span class="glyphicon glyphicon-plus"></span>
Nouvelle liste</a>
</li>
</ul>
</div>
<div class="col-sm-9 cold-md-10" id="main-view">
<div ui-view></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="script.js"></script>
<script src="controller.js"></script>
</body>
</html>
controller.js
todoList.controller('todoCtrl',['$scope',
function ($scope) {
var todos = $scope.todos = [];
$scope.addTodo = function () {
var newTodo = $scope.newTodo.trim();
if (!newTodo.length) {
return;
}
todos.push({
title: newTodo,
completed: false
});
$scope.newTodo = '';
};
$scope.removeTodo = function (todo) {
todos.splice(todos.indexOf(todo), 1);
};
$scope.markAll = function (completed) {
todos.forEach(function (todo) {
todo.completed = !completed;
});
};
$scope.clearCompletedTodos = function () {
$scope.todos = todos = todos.filter(function (todo) {
return !todo.completed;
});
};
}]);
todoList.controller('todayCtrl', function($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
todoList.controller('navCtrl', function($scope) {
$scope.menu = 'inbox';
});