Spring security not allowing angularjs to Run - angularjs

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

Related

Undefined variable in app.blade.php laravel5.4

i want to list the name of courses from my database in my navbar menu (app view) :
#foreach ($cours as $cour)
<li><a class="dropdown-item">{{ $cour->nom }}</a></li>
#endforeach
and i created my layoutcontroller to display the view :
class layoutController extends Controller
{
public function showView()
{
$cours = DB::table('cours')->select('id','nom')->get();
return view('app',['cours' => $cours]);
}
}
then i made a route for it :
Route::get('#','layoutController#showView');
the problem is when i navigate to login view for exemple it shows an error that the variable cours is undefined in my app layout view :
Undefined variable: cours (View: C:\wamp64\www\opencourses\resources\views\layouts\app.blade.php) (View: C:\wamp64\www\opencourses\resources\views\layouts\app.blade.php)
here is my login view :
#extends('layouts.app')
#section('content')
<div class="container-fluid">
<div class="row">
<div class="col-md-8 offset-md-2 px-3 py-3 pt-md-4 pb-md-4">
<div class="card">
<div class="card-header">Connexion</div>
<div class="card-body">
<form class="form-horizontal" method="POST">
{{ csrf_field() }}
<div class="row mb-3">
<label for="email" class="col-sm-3 offset-sm-1 col-form-label">Adresse Email</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="email" name="email">
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-sm-3 offset-sm-1 col-form-label">Mot de passe</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="password" name="password">
</div>
</div>
<div class="row mb-3">
<div class="offset-sm-4 col-sm-7">
<button type="submit" class="btn btn-primary">Envoyer</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
#endsection
and here is my app view :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Mon blog</title>
<link rel="icon" href="https://www.jsdelivr.com/img/icon_256x256.png">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css">
<!-- other CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/font-awesome#4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light p-3 px-md-4 mb-3 bg-body border-bottom shadow-sm">
<div class="container-fluid">
<a class="navbar-brand" href="welcome.html">
<img src="https://www.jsdelivr.com/img/icon_256x256.png" width="30" height="30" class="d-inline-block align-top" alt=""> Mon blog
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-flex">
<li class="nav-item px-2">
<a class="nav-link active" aria-current="page" href="<?php echo url('')?>">Accueil</a>
</li>
<li class="nav-item dropdown px-2">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Articles
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
#foreach ($cours as $cour)
<li><a class="dropdown-item">{{ $cour->nom }}</a></li>
#endforeach
</ul>
</li>
<!-- si utilisateur non authentifié -->
#guest
<li class="nav-item px-2">
<a class="btn btn-outline-primary me-2" href="<?php echo url('login')?>">Connexion</a>
</li>
<li class="nav-item px-2">
<a class="btn btn-primary" href="<?php echo url('register')?>">S'inscrire</a>
</li>
#else
<!-- si utilisateur authentifié -->
<li class="nav-item px-2">
<a class="nav-link" href="home">Mon compte</a>
</li>
<li class="nav-item px-2">
<a class="nav-link" href="{{ route('logout') }}" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">Déconnexion</a>
</li>
#endguest
</ul>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</div>
</div>
</nav>
#yield('content')
<footer class="container pt-4 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="https://www.jsdelivr.com/img/icon_256x256.png" alt="" width="24" height="24">
<small class="d-block mb-3 text-muted">© 2017–2021</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Team feature</a></li>
<li><a class="link-secondary" href="#">Stuff for developers</a></li>
<li><a class="link-secondary" href="#">Another one</a></li>
<li><a class="link-secondary" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Resource name</a></li>
<li><a class="link-secondary" href="#">Another resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="link-secondary" href="#">Privacy</a></li>
<li><a class="link-secondary" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>

In your existing action you've sent $cours variable only for login view blade. In this kind of situations you can use share() method via "View" facade. This will allow you to share the variable to all your blades (which includes your whole layout blade).
// don't forget to include this class in the top
use Illuminate\Support\Facades\View;
public function showView()
{
$cours = DB::table('cours')->select('id','nom')->get();
View::share('action', $action);
return view('login'); // here not need to pass shared variable
}
In other words, with this you can increase the visibility scope of your sent variables.

I use model class to get data from DB. I hope this will help for you,
class Course extends Model
{
//
protected $table = 'cours';
protected $fillable = array('nom');
}
class LayoutController extends Controller
{
public function showView()
{
$cours = Course::select('id','nom')->get();
$data['cours'] = $cours;
return view('app', $data);
}
}

The controller with the name 'viewctrl' is not registered

<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>

Have two collapsed buttons corresponding to sidebar and navbar, want only only one at a time to be expanded

I have a web app with a sidebar menus and some navbar dropdowns. When #media screen and (max-width: 768px) the sidebar collapses into a button the left on the navbar; the navbar buttons collapse to the right on the navbar.
I only want one to be able to be opened at a time. If the other one is opened, it closes the other. Also, it would be great if clicking outside of dropdown closes too.
sidebar.directive.js
angular.module('sideBar').
directive('sideBar', function($cookies, $location){
return {
restrict: 'E',
templateUrl: '/api/templates/sidebar.html',
link: function (scope, element, attr){
scope.userLoggedIn = false
scope.$watch(function(){
var token = $cookies.get('token')
if (token) {
scope.userLoggedIn = true
} else {
scope.userLoggedIn = false
}
scope.isNavCollapsedSideBar = true;
})
}
}
});
navbar.directive.js
angular.module('cronNav').
directive('cronNav', function($cookies, $location){
return {
restrict: 'E',
templateUrl: '/api/templates/navbar.html',
link: function (scope, element, attr){
scope.userLoggedIn = false
scope.$watch(function(){
var token = $cookies.get('token')
if (token) {
scope.userLoggedIn = true
} else {
scope.userLoggedIn = false
}
scope.isNavCollapsedNav = true;
})
}
}
});
navbar.html
<nav class='navbar navbar-inverse navbar-fixed-top' ng-show='userLoggedIn'>
<div class='container-fluid'>
<!-- Logo on the left of navbar -->
<div class='navbar-header'>
<img src='{{ "./static/media/Trans_Small.png" }}' alt='The Company Logo' height="45">
<!-- The actual hamburger everything is collapsed into -->
<button type='button' class='navbar-toggle pull-left' ng-click='isNavCollapsedSideBar = !isNavCollapsedSideBar'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
</div>
<!-- The actual hamburger everything is collapsed into -->
<button type='button' class='navbar-toggle pull-right' ng-click='isNavCollapsedNav = !isNavCollapsedNav'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</button>
</div>
<!-- Collapse all links and icons into the hamburger -->
<div class='collapse navbar-collapse' uib-collapse='isNavCollapsedNav'>
<ul class='nav navbar-nav navbar-right'>
<!-- Search button -->
<form class='navbar-form navbar-left'>
<div class='input-group custom-search-form'>
<input type='text' class='form-control' placeholder='Search'>
<span class='input-group-btn'>
<button class='btn btn-default' type='button'>
<i class='glyphicon glyphicon-search' title='Search'>
</i>
</div>
</form>
<!-- Home link showing -->
<li uib-dropdown>
<a href='' id='simple-dropdown' uib-dropdown-toggle><i class='pull-right hidden-xs glyphicon glyphicon-home' title='Home'></i></a>
<ul class='center-menu cron-nav' uib-dropdown-menu>
<li><h5>Home</h5></li>
<li class='divider'></li>
<li><a href='#'>Stuff 1</a></li>
<li><a href='#'>Stuff 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
sidebar.html
<nav class='navbar navbar-inverse sidebar' role='navigation' ng-show='userLoggedIn'>
<div class='container-fluid'>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class='collapse navbar-collapse' uib-collapse='isNavCollapsedSideBar'>
<ul class='nav navbar-nav'>
<!-- Original side bar before AngularJS -->
<li uib-dropdown class='top-item' auto-close='disabled' is-open='status.openA'>
<a href='' uib-dropdown-toggle>Client Information <i class='chev glyphicon' ng-class='{"glyphicon-chevron-up": status.openA, "glyphicon-chevron-down": !status.openA}'></i><i class='pull-right hidden-xs fa fa-user-circle-o'></i></a>
<ul class='cron-side' uib-dropdown-menu>
<li><h5>General Information</h5></li>
<hr>
<li><a href='#'>View / Edit<i class='pull-right hidden-xs glyphicon glyphicon-edit'></i></a></li>
<li><h5>Assesment</h5></li>
<hr>
<li><a href='#'>View<i class='pull-right hidden-xs glyphicon glyphicon-eye-open'></i></a></li>
<hr class='h'>
</ul>
</li>
</ul>
</div>
</div>
</nav>

Note: create a local version and copy it in your index, first open window in full-page to figure out what will happen in responsive mode
Do not Forget:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Target: Join sidbar menus in main nav when window width is lower than 768px (base on bootstrap framework responsive)
Description: In this sample we need standard bootstrap navbar with collapse mode, but in the sidbar we do not need this mode because it will hidden (by ".hidden-xs") after window width is lower than 768px, and then by our directive (joinNav) we can join the sidbar in the main nav as you see.
Features:
Handle All sidebar navs with one collapse click
close nav on click in collapse mode
join all navs in main one
var app = angular.module("app", []);
app.directive('joinNav', function () {
return {
restrict: 'A',
scope: {
sidebarHanlder: "#"
},
link: function (scope, element) {
//you can change it
var navMain = "#bs-example-navbar-collapse-1";
var sidbarNav = ".sidebar";
element.addClass(scope.sidebarHanlder);
//on window start
var startWindowWidth = $(window).width();
if (startWindowWidth <= 767) {
element.appendTo(navMain);
} else {
element.appendTo(sidbarNav);
}
//on window resize
$(window).resize(function (data) {
if (data.target.innerWidth <= 767) {
element.appendTo("#bs-example-navbar-collapse-1");
} else {
element.appendTo(".sidebar");
}
});
////hanlde hide on click nav
if (!$("li.dropdown").data('clicked')) {
$(document).click(function (event) {
var clickover = $(event.target);
var $navbar = $(".navbar-collapse");
var _opened = $navbar.hasClass("in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$navbar.collapse('hide');
}
});
}
}
}
});
.sidebar,
.sidebar .collapse {
margin: 0;
padding: 0;
}
.sidebar ul,
.sidebar li {
width: 100%;
clear: both;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div ng-app="app">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="col-lg-3 col-md-3 col-sm-6 hidden-xs">
<nav class="navbar navbar-default sidebar">
<ul class="nav navbar-nav" join-nav="navbar-sidbar">
<li>Link 2</li>
<li class="dropdown">
Dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>

Please have a look at angular-sidebar. Its simple with much flexibility.

Spring security Angular Post not supported

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

Error loading angularjs controller

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.

Resources