// create the module and name it dbApp
var dbApp = angular.module('appDataBoard', ['ngRoute']);
// configure our routes
dbApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/main', {
templateUrl: 'Main.html',
controller: 'mainController'
})
// route for the about page
.when('/product', {
templateUrl: 'Product.html',
controller: 'productController'
})
});
// create the controller and inject Angular's $scope
dbApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Pagina principal';
$scope.hselect1 = true;
});
dbApp.controller('productController', function($scope) {
$scope.message = 'Pagina de producto.';
$scope.hide1 = true;
});
<!DOCTYPE html>
<html ng-app="appDataBoard">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController" >
<ul >
<li class="nav-item start open">
<a href="#/main" class="nav-link nav-toggle">Main</a>
</li>
<li class="nav-item ">
<a href="#/product" class="nav-link nav-toggle">Product</a>
</li>
</ul>
<div class="col-md-12 column sortable">
<div ng-view></div>
</div>
</body>
</html>
/* Put your css in here */
<div class="jumbotron text-center">
<h1>main Page</h1>
<p>{{ message }}</p>
</div>
<!-- INCLUDE FILTER APPS-->
<div ng-include="'filterApp.html'" ></div>
<div class="jumbotron text-center">
<h1>Product Page</h1>
<p>{{ message }}</p>
<p ng-hide="hide1">este parrafo se debe borrar</p>
</div>
<div ng-hide="hselect1" >
<p>This is filter app html page</p>
<!--<select id="select-1" multiple="multiple" onchange="RecargaSelectBU()" >-->
<!--</select>-->
</div>