This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="xploresoftware.css">
</head>
<body ng-app="myapp">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="Images/Drawing.png">
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="subject">
<li>Electrical Engineering</li>
<li> Computer Science</li>
<li> Mechanical Engineering</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" style="margin-top:55px" >
<div ng-view=""> </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="angularview.js"></script>
</body>
</html>
This is my angularview.js file
(function(){
var app=angular.module('myapp',['ngRoute']);
app.config([function($routeProvider){
$routeProvider.when('/',{
templateUrl:'home.html'
})
.when('/ece',{
templateUrl:"ece.html"
})
.when('/cs',{
templateUrl:"cs.html"
})
.when('/mech',{
templateUrl:"mech.html"
})
.otherwise({
redirectTo:"/"
});
}]);
})();
The error caught:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myapp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463
This error appears to caused by a missing dependency. I see that you need to include de ngRoute dependency in your app module.
Change your first line to:
var app=angular.module('myapp',['ngRoute']);
Try changing this line too
app.config(['$routeProvide', function($routeProvider){ ... }])
EDIT:
Take a look at this JSFiddle
https://jsfiddle.net/relferreira/dzx8w38t/2/
HTML:
<div data-ng-app="app">
<div data-ng-controller="MainController as main">
{{main.test}}
</div>
<ul class="nav navbar-nav" id="subject">
<li>Electrical Engineering</li>
<li> Computer Science</li>
<li> Mechanical Engineering</li>
</ul>
<div ng-view> </div>
</div>
JS:
angular.module('app', ['ngRoute']);
angular.module('app')
.config(config)
.controller('MainController', mainController);
config.$inject = ['$routeProvider'];
function config($routeProvider){
$routeProvider.when('/',{
template:'<h1>home</h1>'
})
.when('/ece',{
template:"<h1>ece</h1>"
})
.when('/cs',{
template:"<h1>cs</h1>"
})
.when('/mech',{
template:"<h1>mech</h1>"
})
.otherwise({
redirectTo:"/"
});
}
mainController.$inject = ['$scope'];
function mainController($scope){
var vm = this;
vm.test = 'test'
}
Related
I'm learning AngularJS for a project but I got stuck in rendering a partial view. I've made the main page with three partial templates that need to be loaded in the main page. Also created a javascript files to define the module and create the controller. After all this still the partial templates are not loading in the main index page. Also there is no errors in the google chrome console. My Folder structure is as follows :
- scripts
-- angular.min.js
-- angular-route.min.js
-- app.js
templates
-- home.html
-- courses.html
-- students.html
index.html
My index.html is :
<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route-min.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<nav 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" data-toggle="collapse" data-target=".navbar-ex1-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 class="navbar-brand" href="#">Title</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Courses</li>
<li>Students</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Home</li>
<li>Courses</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
My app.js is :
var app = angular.module("myModule", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "templates/students.html",
controller: "studentsController"
})
})
.controller("homeController", function ($scope) {
$scope.message = "Home Page";
})
.controller("coursesController", function ($scope) {
$scope.courses = ["C#", "VB.NET", "ASP.NET", "SQL Server", "AngularJS", "JavaScript"];
})
.controller("studentsController", function($scope, $http) {
$http.get("http://localhost:8000/api/students").then(function(response) {
$scope.students = response.data;
});
});
I've also tried the followings :
"<ng-view></ng-view>", "<div ng-view></div>", "<div ng-view=""></div>"
But nothing seems to be working.
I am trying to use the routing feature of angularJS, but so far it will not include my html templates (user.html and overview.html, which are in the same folder as index.html).
For information only: the expression {{test}} is working.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PARA Liste</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
</head>
<body>
<div ng-app="angularJsApplication" ng-controller="angularJsController">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Para Liste</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>overview</li>
<li>user1</li>
<li>user2 - {{test}}</li>
</ul>
</div>
</div>
</nav>
<div class="ng-view"></div>
</div>
<script src="js/angularJsApplication.js"></script>
<script src="js/angularJsApplicationController.js"></script>
</body>
</html>
angularJsApplication.js:
var app = angular.module("angularJsApplication", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/#", {
templateURL : "overview.html"
})
.when("/overview", {
templateURL : "overview.html"
})
.when("/user1", {
templateURL : "user.html"
})
.when("/user2", {
templateURL : "user.html"
})
});
angularJsApplicationController.js:
app.controller("angularJsController", function($scope){
$scope.test = "testTestTEST";
});
user.html:
<h1>user</h1>
Its typo mistake :
not templateURL It''s templateUrl
So,it should be.
templateUrl: "overview.html"
I have this website routing my pages with 4 html files and it works fine, but when I am trying to add or remove a new one, it just shows blank screen with my navigation bar only.
The error I caught is :
Error: $injector:modulerr
Module Error
Being a noobie in Angular I saw various solutions that have to do with the ngRoute, but in vain.
I want to add more html files for the rest of the projects but I can't.
I use 1.2.15 version and call the files locally. Below is the Angular script I am using, there's also some code added to browse through the projects.
var app = angular.module('myapp', ['ngRoute','ngAnimate']);
app.controller('MainCtrl', function($scope, NextBackBasicService, $location) {
$scope.message = $location.path();
});
app.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html',
controller: 'MainCtrl'
}).
when('/example1', {
templateUrl: 'example.html',
controller: 'MainCtrl'
}).
when('/example2', {
templateUrl: 'example2.html',
controller: 'MainCtrl'
}).
when('/example3', {
templateUrl: 'example3.html',
controller: 'MainCtrl'
}).
when('/example4', {
templateUrl: 'example4.html',
controller: 'MainCtrl'
});
$routeProvider.otherwise({
redirectTo: '/route'
});
});
app.run(function($rootScope, NextBackBasicService){
$rootScope.goNext = function() {
NextBackBasicService.goNext();
};
$rootScope.goBack = function() {
NextBackBasicService.goBack();
};
});
app.factory('NextBackBasicService', function($route, $location) {
//array for keeping defined routes
var routes = [];
angular.forEach($route.routes, function(config, route) {
//not to add same route twice
if (angular.isUndefined(config.redirectTo)) {
routes.push(route);
}
});
return {
goNext: function() {
var nextIndex = routes.indexOf($location.path()) + 1;
if (nextIndex === routes.length) {
$location.path(routes[0]);
} else {
$location.path(routes[nextIndex]);
}
},
goBack: function() {
//window.history.back();
var backIndex = routes.indexOf($location.path()) - 1;
if (backIndex === -1) {
$location.path(routes[routes.length - 1]);
} else {
$location.path(routes[backIndex]);
}
}
};
});
And here is my index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>My Title</title>
<!--<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>-->
<!--<script data-require="ng-route#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0-rc.3/angular-route.js"></script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700&subset=latin,greek,greek-ext' rel='stylesheet' type='text/css'>
<!--Loads Angular
<script src="https://code.angularjs.org/1.2.15/angular.min.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular-route.min.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular-animate.min.js"></script>-->
<script src="js/angular.min.js" data-semver="1.2.15"></script>
<script src="js/angular-route.min.js" data-semver="1.2.15"></script>
<script src="js/angular-animate.min.js"></script>
<script src="app.js"></script>
<!--jQuery-->
<script src="js/jquery.js" type="text/javascript">
<!--Bootstrap-->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script>
$( document ).ready(function() {
$(".burger").click(function(){
$(this).toggleClass("active");
});
});
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container mynavigation">
<!-- 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-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>-->
<button type="button" class="burger navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span>
</button>
<a class="pull-left" href="#">
<img class="logodimensions" src="images/svg/logo.svg" alt="">
</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>
<a class="animlinks" href="#">WORK</a>
</li>
<li>
<a class="animlinks" href="#">CONTACT / ABOUT</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="grids">
<div ng-controller="MainCtrl">
<ng-view></ng-view>
</div>
</div>
</body>
</html>
And bellow is the home where the routing takes place between the projects.
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example1">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example2">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example3">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example4">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
</div>
</div>
According to the posted error, the last reference to $routeProvider is undefined. There seems to be something odd going on, because that shouldn't be possible. To side-step this issue though, you can remove the last reference to $routeProvider and just chain the .otherwise() call onto the previous .when() call, like so:
.when('/example4', { templateUrl: 'example4.html', controller: 'MainCtrl' }).otherwise({ redirectTo: '/route' });
I'm trying to test some example Angularjs app in Salesforce. When I test it running
grunt serve
on my browser, it works fine. So I put the code in a Visualforce page and it doesn't show all the content correctly. Seems like it is a problem with the #/ and the $routeProvider part.
The code (the initial code of the angular generator from Yeoman) in my Visualforce page:
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="griApp">
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-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 class="navbar-brand" href="#/">gri</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a ng-href="#/about">About</a></li>
<li><a ng-href="#/">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view=""></div>
</div>
<div class="footer">
<div class="container">
<p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
</body>
In my real code I'm using correctly the URLFOR to include the files of an static resource.
My app.js is:
angular
.module('griApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.otherwise({
redirectTo: '/'
});
});
Hope you can help me.
Thanks!
I have integrated salesforce and angularjs. I have created Apex components corresponding to each page and have placed the html content in ngTemplate and load via $templateCache.
so my app visualforce page looks like as follows
<apex:component controller="APTS_ApttusLabAngularJS">
<script type="text/ng-template" id="name.html">
<!-- include your html and refer this name.html in your route
</script>
</apex:component>
I would advise you to use stateProvider instead.
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/