AngularJS / ui-routing not working : no msg errors - angularjs

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';
});

Related

Cannot read property '$$phase' of null at Object.$$debounceViewValueCommit

I am getting this error while moving from one page to another. I have add order page with forms if I go to add order page directly it works fine but if go orders list page and then go to add order page then i got this error and all my forms fields on add order page set touched automatically . what could be the issue please help . thanks in advance
here is my home.html code
<div class="container body" ng-cloak>
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<img src="../assets/images/logo1.PNG" style="width:25%; float:left;"/>
<span>Trackerist</span>
</div>
<div class="clearfix"></div>
<!-- menu profile quick info -->
<div class="profile clearfix padding-2x">
<h5 class="text-center">Welcome</h5>
<h5 class="text-center">{{domain | capitalize}}</h5>
</div>
<!-- /menu profile quick info -->
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<!-- <h3>General</h3> -->
<ul class="nav side-menu">
<li><i class="fa fa-dashboard"></i> DASHBOARD
</li>
<li ng-if="is_admin"><a><i class="fa fa-truck"></i> COMPANY <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.inviteCompany">Invite companies</a></li>
<li><a ui-sref="home.listCompany">List companies</a></li>
</ul>
</li>
<li ng-if="!is_admin">
<a><i class="fa fa-book"></i> ORDERS <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.orderAdd">Create Order</a></li>
<li><a ui-sref="home.orderListing">List Orders</a></li>
<li><a ui-sref="home.savedOrders">Saved Orders</a></li>
</ul>
</li>
<li ng-if="!is_admin">
<a><i class="fa fa-user"></i> AGENTS <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.agentAdd">Add Agent</a></li>
<li><a ui-sref="home.agentListing">List Agents</a></li>
</ul>
</li>
<li ng-if="!is_admin">
<a><i class="fa fa-truck"></i> DRIVERS <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.driverAdd">Add Driver</a></li>
<li><a ui-sref="home.driverListing">List Drivers</a></li>
<li><a ui-sref="home.mapView">Live Map View</a></li>
</ul>
</li>
<li ng-if="!is_admin">
<a><i class="fa fa-archive"></i> WAREHOUSES <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.warehouseAdd">Add Warehouse</a></li>
<li><a ui-sref="home.warehouseListing">List Warehouses</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<nav>
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right" style="display:flex">
<form ng-show="showSearchBar" class="navbar-form" role="search" style="width:80%">
<div class="input-group" style="width:100%">
<input type="text" ng-model="searchText" class="form-control" placeholder="Search">
<span class="input-group-btn" style="width: 10%;" ng-click="showSearchBar=false">
<button type="reset" class="btn btn-default">
<span class="glyphicon glyphicon-remove">
<span class="sr-only">Close</span>
</span>
</button>
</span>
</div>
</form>
<button type="submit" class="btn btn-default" style="width:10%" ng-click="searchIt()">
<span class="glyphicon glyphicon-search">
<span class="sr-only">Search</span>
</span>
</button>
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="glyphicon glyphicon-cog"></i>
</a>
<ul class="dropdown-menu dropdown-usermenu pull-right">
<li> Profile </li>
<li>
<a href="javascript:;">
<span class="badge bg-red pull-right">50%</span>
<span>Settings</span>
</a>
</li>
<li>Help</li>
<li><a ng-click="logout()"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main" ui-view="">
</div>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="pull-right">
Copyright Trackerist © 2017. All rights reserved.
</div>
<div class="clearfix"></div>
</footer>
<!-- /footer content -->
</div>
</div>
<script>
$(document).ready(function () {
$.getScript('assets/js/custom.js');
});
</script>
here is my index.html file
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Logistics </title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/fonts/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/animate.min.css" rel="stylesheet">
<link href="assets/vendors/bootstrap-daterangepicker/daterangepicker.css"
rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<!-- jQuery -->
<script src="assets/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="assets/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="assets/vendors/nprogress/nprogress.js"></script>
<!-- Chart.js -->
<script src="assets/vendors/Chart.js/dist/Chart.min.js"></script>
<!-- gauge.js -->
<script src="assets/vendors/gauge.js/dist/gauge.min.js"></script>
<!-- bootstrap-progressbar -->
<script src="assets/vendors/bootstrap-progressbar/bootstrap-
progressbar.min.js"></script>
<!-- iCheck -->
<script src="assets/vendors/iCheck/icheck.min.js"></script>
<!-- Skycons -->
<script src="assets/vendors/skycons/skycons.js"></script>
<!-- Flot -->
<script src="assets/vendors/Flot/jquery.flot.js"></script>
<script src="assets/vendors/Flot/jquery.flot.pie.js"></script>
<script src="assets/vendors/Flot/jquery.flot.time.js"></script>
<script src="assets/vendors/Flot/jquery.flot.stack.js"></script>
<script src="assets/vendors/Flot/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="assets/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="assets/vendors/flot.curvedlines/curvedLines.js"></script>
<!-- DateJS -->
<script src="assets/vendors/DateJS/build/date.js"></script>
<!-- JQVMap -->
<script src="assets/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="assets/vendors/moment/min/moment.min.js"></script>
<script src="assets/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Switchery -->
<script src="assets/vendors/switchery/dist/switchery.min.js"></script>
<link href="assets/vendors/switchery/dist/switchery.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="assets/vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="assets/vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../assets/js/ie8-responsive-file-warning.js"></script>
<![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="node_modules/angular-local-storage/src/angular-local-storage.js"></script>
<script src="node_modules/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<!--<script src="node_modules/angular-loading-bar/build/loading-bar.js"></script>-->
<!--<script src="node_modules/angular-loading-bar/build/loading-bar.css"></script>-->
<script src="http://maps.googleapis.com/maps/api/js?
libraries=places&key=AIzaSyDLy0G_2BB47UWc6NwDCqHsrpaRfx2OyR8"></script>
<!--<script src="http://jvandemo.github.io/angularjs-google-maps/dist/angularjs-google-maps.js"></script> -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-cookies.js"></script>
<!--<script src="assets/js/custom.js"></script>-->
<!-- jQuery Smart Wizard -->
<script src="assets/js/jquery.smartWizard.js"></script>
<script src="assets/js/vs-google-autocomplete.js"></script>
<script src="index.js"></script>
<script src="factories/subDomian.js"></script>
</head>
<body ng-app="logistics" class="{{ bodylayout }}">
<ui-view>
</ui-view>
</body>
</html>
there are the routes
.state('home.orderAdd', {
url: "/orders/add",
controller: "orderController",
templateUrl: "views/order/add.html",
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load("controllers/orders.js");
}]
},
authenticate: true
})
.state('home.orderListing', {
url: "/orders/listing",
controller: "orderController",
templateUrl: "views/order/listing.html",
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load("controllers/orders.js");
}]
},
authenticate: true
})
.state('home.orderDetails', {
url: "/orders/details?order_id",
controller: "orderController",
templateUrl: "views/order/details.html",
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({serie: true,
name: "login",
files:[
"controllers/orders.js",
"node_modules/qrcode-generator/qrcode.js",
"node_modules/qrcode-generator/qrcode_UTF8.js",
"node_modules/angular-qrcode/angular-qrcode.js"
]
});
}]
},
authenticate: true
})
.state('home.savedOrders', {
url: "/orders/savedOrders-listing",
controller: "orderController",
templateUrl: "views/order/saved_listing.html",
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load("controllers/orders.js");
}]
},
authenticate: true
})
.state('home.orderDetail', {
url: "/orders/details/:order_id",
controller: "orderController",
templateUrl: "views/order/add.html",
params: {
'order_id': null,
'order_obj': null,
'type': 'order-details',
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({serie: true,
name: "login",
files:[
"controllers/orders.js",
"node_modules/qrcode-generator/qrcode.js",
"node_modules/qrcode-generator/qrcode_UTF8.js",
"node_modules/angular-qrcode/angular-qrcode.js"
]
});
}]
},
authenticate: true
})
.state('home.orderEdit', {
url: "/orders/edit?order_id",
controller: "orderController",
templateUrl: "views/order/add.html",
params:{
'order_id': null,
'order_obj': null,
'type': 'order-edit',
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load("controllers/orders.js");
}]
},
authenticate: true
})
here is my versions
"dependencies": {
"angular": "1.6.6",
"angular-animate": "^1.6.6",
"angular-aria": "^1.6.6",
"angular-jwt": "0.1.9",
"angular-loading-bar": "^0.9.0",
"angular-local-storage": "^0.7.1",
"angular-material": "^1.1.5",
"angular-qrcode": "^7.2.0",
"angular-ui-router": "1.0.3",
"nprogress": "^0.2.0",
"oclazyload": "^1.1.0",
"sweetalert": "^2.0.6",
"vsGoogleAutocomplete": "^0.5.0"
}
cause of error
<div class="right_col ng-scope" role="main" ui-view="" data-ng-animate="1">

Spring security not allowing angularjs to Run

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

UI routing not working, angular JS

I'm trying to display main.html template via UI routing, but its not working for some reason. Can someone please point out the mistake in my code. Thank you.
appModule
"use strict";
angular.module("fleetOperate", ["ui.router", "mainModule"]);
UI Routing
"use strict";
angular.module('fleetOperate').config(function ($stateProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html'
})
});
mainModule
"use strict";
angular.module("mainModule", []);
main.HTML
<div class="icon-bar" ui-view="main">
<a ui-sref="" class="item">
<i class="fa fa-truck" style="font-size:48px;"></i>
<label>Fleet</label>
</a>
<a ui-sref="" class="item">
<i class="fa fa-users" style="font-size:48px;"></i>
<label>Drivers</label>
</a>
<a href="#" class="item">
<i class="fa fa-calendar" style="font-size:48px;"></i>
<label>Planner</label>
</a>
<a href="#" class="item">
<i class="fa fa-truck" style="font-size:48px;"></i>
<label>Trailors</label>
</a>
<a href="#" class="item">
<i class="fa fa-files-o" style="font-size:48px;"></i>
<label>Pod</label>
</a>
<a href="#" class="item">
<i class="fa fa-cog" style="font-size:48px;"></i>
<label>Settings</label>
</a>
<a href="#" class="item">
<i class="fa fa-square-o" style="font-size:48px;"></i>
<label>Control Center</label>
</a>
<a href="#" class="item">
<i class="fa fa-phone" style="font-size:48px;"></i>
<label>Communication</label>
</a>
<a href="#" class="item">
<i class="fa fa-user" style="font-size:48px;"></i>
<label>Customer Profile</label>
</a>
</div>
Index.HTML
<!DOCTYPE html>
<html ng-app="fleetOperate">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Truck Trackers</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<link href="app/app.css" rel="stylesheet" />
<link href="app/main/main.css" rel="stylesheet" />
<script src="scripts/angular.js"></script>
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/angular-ui-router.min.js"></script>
<script src="app/main/mainModule.js"></script>
<script src="app/appModule.js"></script>
<script src="app/appUI_Routing.js"></script>
</head>
<body class="container-fluid">
<header class="js-title-bar">
<div class="js-logo-area">
<img class="js-icon" ng-src="http://www.cam-trucks.com/images/2.jpg"/>
<div class="js-title-area">
<p class="js-logo-title"> <strong>Truck Tracker's</strong></p>
<p class="js-logo-subtitle">Where ever you GO, we FIND you !</p>
</div>
</div>
</header>
<div ui-view></div>
</body>
</html>

Update your UI Router:
angular.module('fleetOperate').config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("main");
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html'
})
});

Dynamically generated drop-down menu is not working

I need to get a complex dropdown menu from backend and show it in angular application. Everything is working fine except one thing: dynamically generated dropdown menu is not working.
index.html
<!DOCTYPE html>
<html ng-app="BlogApp">
<head>
<title>Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-sanitize.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-controller="tagsCtrl" >
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<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="a-blog-path" target="_self" class="navbar-brand" href="#">Blog</a>
</div>
<div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'" ng-click="navCollapsed=true">
<ul class="nav navbar-nav" ng-bind-html="topLeft">
</ul>
<ul class="nav navbar-nav navbar-right">
<li dropdown>
<a class="dropdown-toggle" href="#"> test <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>finger</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
test.js
angular.module('BlogApp', ['ui.bootstrap', 'ngSanitize'],
function($locationProvider){
$locationProvider.html5Mode(true);
})
.controller('tagsCtrl', ['$scope', '$location', '$http', '$sce',
function ($scope, $location, $http, $sce) {
$scope.topLeft = '<li><a class="dropdown-toggle" href="#"> test <b class="caret"></b></a><ul class="dropdown-menu"><li>finger</li></ul></li>';
}]);
I have the code in plunker
In this example topLeft menu dropdown doesn't work, but topRight menu is working fine.
How I can resolve this issue?
Thanks!
UPD: Solved. Plunker working demo

index.html
<div ng-controller="MyCtrl">
Hello, {{name}}!
<div ng-bind-html="my_html | to_trusted"></div>
</div>
app.js
var myApp = angular.module('myApp',[]);
angular.module('myApp')
.filter('to_trusted', ['$sce', function($sce){
return function(text) {
return $sce.trustAsHtml(text);
};
}]);
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.my_html = '<label><b>Hello </b> <input type="text" value="world !"></label>';
}
Please have a look at the Demo for the fix.

I resolve this task by another way.
html:
<!DOCTYPE html>
<html ng-app="BlogApp">
<head>
<title>Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-controller="tagsCtrl" >
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
<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="a-blog-path" target="_self" class="navbar-brand" href="#">Blog</a>
</div>
<div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'" ng-click="navCollapsed=true">
<ul class="nav navbar-nav" >
<li dropdown>
<a class="dropdown-toggle" href="#"> test <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>finger</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li dropdown class="{{menuItem.cls}}" ng-repeat="menuItem in tMenu"
ng-include="menuItem.href ? 'menu-single.html' : 'menu-dropdown.html'"></li>
</ul>
</div>
</nav>
<script type="text/ng-template" id="menu-dropdown.html">
<a class="dropdown-toggle" href="{{menuItem.href}}">{{menuItem.name}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="{{menuItem.cls}}" ng-repeat="menuItem in menuItem.childs" ng-include="'menu-single.html'"></li>
</ul>
</script>
<script type="text/ng-template" id="menu-single.html">
{{menuItem.name}}
</script>
</body>
</html>
test.js:
angular.module('BlogApp', ['ui.bootstrap'],
function($locationProvider){
$locationProvider.html5Mode(true);
})
.controller('tagsCtrl', ['$scope', '$location', '$http',
function ($scope, $location, $http) {
$scope.tMenu = [
{name: 'level00', href: '#', cls: 'active'},
{name: 'level1', childs: [
{name: 'level2', href: '#'},
{name: 'level21', href: '#', cls: 'active'}
]},
{name: 'level1', childs: [
{name: 'level2', href: '#'},
{name: 'level21', href: '#'}
]}
];
}]);
plunker demo

Why is the angular controller never called?

Everything loads fine in the inspector and I do not see console errors. But I am expecting info.html partial to load. It is not using any data at this point from the scope. But the code form the infoController never gets executed. You cna see I have put in a debugger line in there and it never gets there.
My question is why is not the InfoController getting called?
Main shell page
<!DOCTYPE html>
<html lang="en" ng-app="adminUI">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link type="text/css" rel="stylesheet" media="all" href="/admin/css/bootstrap/core/bootstrap.min.css">
<link type="text/css" rel="stylesheet" media="all" href="/admin/css/attivio-global.css">
</head>
<body>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<!-- 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">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<img class="atv-image atv-margin-top-10 atv-navbar-logo" src="/img/attivio-navbar-logo.png">
</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" data-ng-controller="NavbarController">
<li class="dropdown">System <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li role="presentation" class="dropdown-header">System Management</li>
<li>Connectors</li>
<li>Indexes</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Workflows</li>
<li>Ingest</li>
<li>Query</li>
<li>Response</li>
<li>Palette</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">System Information</li>
<li data-ng-class="{'active':getClass('/info')}">General(System)</li>
<li>Configuration</li>
<li data-ng-class="{'active':getClass('/properties')}">Properties</li>
<li>Environment</li>
</ul></li>
<li class="dropdown">Tools <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>General(System)</li>
<li>Configuration</li>
<li>Properties</li>
<li>Environment</li>
</ul></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control input-sm" placeholder="Search">
</div>
<button type="submit" class="btn btn-default btn-sm">Go</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</div>
<script type="application/javascript" src="/js/jquery/jquery-1.10.2.min.js"></script>
<script type="application/javascript" src="/js/jquery/jquery-ui-1.10.3.custom.min.js"></script>
<script type="application/javascript" src="/admin/js/bootstrap/bootstrap.min.js"></script>
<script type="application/javascript" src="resources/js/angular.min.js"></script>
<script type="application/javascript" src="resources/js/angular-route.js"></script>
<script src="app.js"></script>
<script src="info/controllers/controllers.js"></script>
<script src="info/services/infoService.js"></script>
<script src="properties/controllers/controllers.js"></script>
<script src="properties/services/propertiesService.js"></script>
</body>
</html>
appjs
var app = angular.module('adminUI', ['ngRoute']);
//This configures the routes and associates each route with a view and a controller
app.config(function ($routeProvider) {
$routeProvider
.when('/info',
{
controller: 'InfoController',
templateUrl: '/info/partials/info.html'
})
.when('/properties',
{
controller: 'PropertiesController',
templateUrl: '/properties/partials/properties.html'
})
.otherwise({ redirectTo: '/info' });
});
app.controller('NavbarController', function ($scope, $location) {
$scope.getClass = function (path) {
if ($location.path().substr(0, path.length) == path) {
return true
} else {
return false;
}
}
});
info controller
app.controller('InfoController', function ($scope, infoService) {
$scope.sysInfo = [];
init();
function init() {
debugger;
$scope.sysInfo = infoService.getInfo();
}
});
properties controller
app.controller('PropertiesController', function($scope, propertiesService) {
$scope.properties = [];
init();
function init() {
$scope.properties = propertiesService.getProperties();
}
});
services
app.service('propertiesService', function () {
this.getProperties = function () {
return properties; //ajax call
};
var properties = ["a","b"];
});
app.service('infoService', function () {
this.getInfo = function () {
return info; //ajax call
};
var info = ["a","b"];
});
info.html template
<div class="info view">
<p> info test </p>
</div>
properties template
<div class="properties view">
<p> properties test </p>
</div>
this is my directory structure
http://postimg.org/image/5qgn25b5n/

Resources