I want to attach angular JS file to my project
<script src="js/global/angular.min.js" type="text/javascript"></script>
<script src="js/global/angular-route.min.js" type="text/javascript"></script>
However, after I did that and went to my app url http://localhost/demo3/ console throws me Error: error:modulerr, however when I opened this file via file path (file:///C:/wamp/www/demo3/index.html) there is no error...
When I followed link to angular DOCS it says that i should load angular-routes. But I even didn't start write anything yet?! I don't have any other js files loaded at this time and routes are attached anyway.
What I did wrong?
EDIT:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Demo v3</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/global/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/custom/common.css" rel="stylesheet" type="text/css"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="Demo">
<div class="temp_mainFlexCont">
<div class="template_menuFlexCont" ng-controller="LeftMenuController as Menu" ng-class="{'open': Menu.isMenuOpen}">
<left-menu></left-menu>
</div>
<div class="template_contentFlexCont container-fluid">
<section class="filter_tableContainer" ng-controller="UserfilterController as User">
<div class="row clearfix">
<div class="col-xs-12">
<h1>Users</h1>
</div>
</div>
<div class="row filter_tableHeader">
<div class="col-xs-offset-1 col-xs-2">
<a class="filter_tableHeaderHref" href ng-class="{'active':User.fn_setlected_filter('f_name'), 'filter_sortDesc':User.fn_is_descending()}" ng-click="User.fn_set_sorting('f_name')">Name</a>
</div>
<div class="col-xs-2">
<a class="filter_tableHeaderHref" href ng-class="{'active':User.fn_setlected_filter('addr'), 'filter_sortDesc':User.fn_is_descending()}" ng-click="User.fn_set_sorting('addr')">Address</a>
</div>
<div class="col-xs-5">
<a class="filter_tableHeaderHref" href ng-class="{'active':User.fn_setlected_filter('desc'), 'filter_sortDesc':User.fn_is_descending()}" ng-click="User.fn_set_sorting('desc')">Description</a>
</div>
<div class="col-xs-2">
<a class="filter_tableHeaderHref" ng-class="{'active':User.fn_setlected_filter('rate'), 'filter_sortDesc':User.fn_is_descending()}" href ng-click="User.fn_set_sorting('rate')">Rating</a>
</div>
</div>
<div class="row filter_tableTbody">
<div class="col-xs-12">
<div class="row filter_tableRow" ng-repeat="user in User.obj_users">
<div class="col-xs-1">
<div class="filter_imgContainer">
<img class="img-responsive filter_avararImg" ng-src="img/avatars/{{user.img}}" alt=""/>
</div>
</div>
<div class="col-xs-2">
{{user.f_name.firstname}} {{user.f_name.lastname}}
</div>
<div class="col-xs-2">
{{user.addr.line_1}}<br>
<span class="small">{{user.addr.line_2}}</span>
</div>
<div class="col-xs-5">
<p class="filter_tableDesc">
{{user.desc}}
</p>
</div>
<div class="col-xs-2">
<span class="filter_rateStars" ng-repeat="a in User.fn_return_array_by_integer(5)| limitTo: user.rate track by $index">
★
</span>
<span class="filter_rateStars notActive" ng-repeat="a in User.fn_return_array_by_integer(5)| limitTo: 5 - user.rate track by $index">
☆
</span>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- global JS -->
<script src="js/global/angular.min.js" type="text/javascript"></script>
<script src="js/global/angular-route.min.js" type="text/javascript"></script>
<!-- custom JS -->
<script src="js/custom/common.js" type="text/javascript"></script>
<script src="js/custom/filters.js" type="text/javascript"></script>
</body>
</html>
JS Custom file
(function () {
var app = angular.module('Demo', [
'ngRoute'
]);
app.controller('TemplateController', function () {
});
app.directive('leftMenu', function () {
return{
restrict: 'E',
templateUrl: 'views/left-menu.html'
};
});
app.controller('UserfilterController', function () {
this.int_male_counter = this.int_female_counter = 5;
this.str_sort_by = {
prop_name: 'f_name',
order: 'asc'
};
this.obj_users = new Users(this.int_male_counter, this.int_female_counter).list;
this.fn_set_sorting = function (str) {
if (this.str_sort_by.prop_name === str) {
this.str_sort_by.order = this.str_sort_by.order === 'des' ? 'asc' : 'des';
} else {
this.str_sort_by.order = 'asc';
this.str_sort_by.prop_name = str;
}
this.obj_users.sortByObjKeyVal(this.str_sort_by.prop_name, this.str_sort_by.order);
};
this.fn_setlected_filter = function (str) {
return str === this.str_sort_by.prop_name;
};
this.fn_is_descending = function () {
return this.str_sort_by.order === 'des';
};
this.fn_return_array_by_integer = function (int) {
return new Array(int);
};
});
app.controller('LeftMenuController', function () {
this.isMenuOpen = true;
});
})();
Related
Angular.JS issue with ng-repeat value from inputs
I'm having an issue with ng-repeat, where I can't see to get the values from the input to show on the UI when submitted.
I'm very new to angular JS, hence why I'm trying to build a simple to do app to learn the basics.
On the newItem.html page, there is a form with a function Add(). There are two inputs for the project and the title. There is a button to add the new to do item.
Once the button is clicked and it runs the Add() function, it should add a new object to the toDoList array with the Project and the Task.
On the homePage.html I want to display a project title and the task details. Later down the line I want to generate the entire row on each click but for now I'm just trying to get the text to change.
I'm obviously missing something obvious here, I've read through the documentation for ng-repeat and ng-model, but just can't seem to grasp it.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="ToDoListApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>To Do App</title>
<script src="angular/angular.min.js"></script>
<script src="angular-route/angular-route.min.js"></script>
<script src="app.module.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="app/assets/css/home.css">
<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4c765e5630.js" crossorigin="anonymous"></script>
</head>
<body ng-view ng-controller="toDoCtrl">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body>
</html>
homePage.html
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
<p>0 Open Tasks</p>
</div>
</div>
<div class="row toDoList">
<div class="row newItem">
<div class="col-2">
<button class="itemComplete btn"><i class="far fa-check-circle fa-2x"></i></button>
</div>
<div class="col-8">
<h4 ng-repeat="Project in ToDoList">{{ToDoList.Project}}</h4>
<p ng-repeat="Task in ToDoList">{{ToDoList.Task}}.</p>
</div>
<div class="col-2">
<button class="btn deleteItem"><i class="far fa-times-circle fa-2x"></i></button>
</div>
</div>
</div>
<div class="row addItemRow">
<div class="col-12 text-center">
<a href="#/newItem"><button type="button" class="btn btn addItem">
<i class="fas fa-plus-circle fa-3x"></i>
</button></a>
</div>
</div>
newItem.html
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
</div>
</div>
<div class="row addNewItem">
<form ng-submit='Add()' class="form">
<div class="row projectInput text-center">
<div class="col-12">
<input type="text" ng-model="ToDoList.Project" placeholder="Enter a project title" ng-required>
</div>
</div>
<div class="row taskInput text-center">
<div class="col-12">
<input type="text" ng-model="ToDoList.Task" placeholder="Enter your task details" ng-required>
</div>
</div>
<div class="buttonRow row">
<div class="col-12 text-center">
<button type="submit" class="btn-lg btn-success addItemButton">Add</button>
</form>
<button class="btn-lg btn-danger cancelButton">Cancel</button>
</div>
</div>
</div>
app.module.js
var app = angular.module('ToDoListApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
templateUrl: "app/home/homePage.html",
controller: "toDoCtrl"
})
.when("/newItem", {
templateUrl: "app/newItem/newitem.html",
controller: "toDoCtrl"
})
.otherwise({
redirectTo: '/'
})
});
//main controller for app functionality
app.controller('toDoCtrl', function ($scope) {
$scope.ToDoList = []
//add the new to do item to the array
$scope.Add = function () {
$scope.ToDoList.push({
Project: $scope.Project,
Task: $scope.Task
});
$scope.Project = '';
$scope.Task = '';
};
});
Hi I'm new with Web API's and I'm working with AngularJS and Web API I'm trying to upload an image into a Web API but when I click the button to send the image it gives me an error
I already did the method GET and it shows me all the images that are in that web API but it doesn't work the method POST
here is my code
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" media="screen">
<link rel="stylesheet" href="css/bootswatch.min.css">
</head>
<body>
<div ng-app="MarcasApp" >
<div ng-controller="MarcaController">
<div class="container">
<h2>Muestra</h2>
</div>
<input type="button" class="btn btn-info" value="Todos" ng-click="getTodos()">
<form name="formulario" method="post" action="" enctype="multipart/form-data">
<div class="container">
<label for="caption">Id:</label>
<input type="input" class="form-control" ng-model="txtId"/>
</div>
<div class="container">
<label for="caption">Cargar Marcar:</label>
<input type="file" ng-files="getTheFiles"/>
</div><br>
<div class="container">
<input type="submit" value="Enviar Marca" class="btn btn-success"
ng-click="btnGuardar()"/>
</div><br>
<div class="container">
Mensaje:{{msgGuardar}}
</div>
</form>
<div class="panel panel-info">
<ul class="list-group" ng-repeat="marca in marcas">
<li class="list-group-item">
<img src="{{marca.imagen}}">
{{marca.marca1}} + {{marca.marcaId}}
</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="MarcaJson.js"></script>
</body>
</html>
MarcaJson.js
var app = angular
.module("MarcasApp", [])
.controller("MarcaController", function($scope, $http){
$scope.getTodos =function(){
var apiUrl = 'http://tiendawebapi.azurewebsites.net/api/marcas/';
$http.get(apiUrl).then(function(response){
$scope.marcas = response.data;
});
};
$scope.btnGuardar = function(){
var datos = {
id: $scope.txtId,
imagen: $scope.getTheFiles
}
var apiUrl = 'http://tiendawebapi.azurewebsites.net/api/marcas/';
$http.post(apiUrl, JSON.stringify(datos)).then(function(response){
if (response.statusText == Created){
$scope.msgGuardar = "Marca Guardada";
}
}, function(error){
$scope.msgGuardar = "Ocurrio un error " + error.statusText;
});
};
});
i am trying to use $http GET requests but it is not working and i don't know what is wrong with it and am not also getting any errors in the console ,this is the whole code that am using
<!doctype html>
<html lang="en" ng-app="twitchApp">
<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>TwichTv</title><!-- End of Title -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container contentContainer">
<div class="contentWrapper">
<div class="innerContent">
<!-- Nav tabs -->
<ul class="nav nav-tabs statusBar" role="tablist">
<li role="presentation" id="all" class="active">All</li>
<li role="presentation" id="online">Online</li>
<li role="presentation" id="offline">Offline</li>
</ul>
<!-- Tab panes -->
<div ng-controller="allUsersController" class="tab-content result">
<div role="tabpanel" class="tab-pane active" id="allTab">
<div class="well">
<div class="userLogo">
<img ng-src="{{ image }}">
</div>
<h3 class="username">{{ userName }}</h3>
<p><span class="info">{{ channelStatusInfo }}</span></p>
<div class="pull-right">
<span class="statusIcons"><i id="icon" class="fa fa-user green"></i></span>
</div>
</div>
</div>
<div ng-controller="onlineUsersController" role="tabpanel" class="tab-pane" id="onlineTab">
<div class="well"></div>
</div>
<div ng-controller="offlineUsersController" role="tabpanel" class="tab-pane" id="offlineTab">
<div class="well"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
and javascript
var streamers = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "brandonlehr", "MedryBW"];
var streamurl = "https://api.twitch.tv/kraken/streams/";
var userurl = "https://api.twitch.tv/kraken/users/";
var online = "green glyphicon glyphicon-user";
var offline = "glyphicon glyphicon-user";
var twitchApp = angular.module("twitchApp", []);
twitchApp.controller("allUsersController",[ '$scope', '$http', allUsersController]);
function allUsersController($scope, $http) {
streamers.forEach(function(streamer){
var userUrl = "https://api.twitch.tv/kraken/users/" + streamer;
var req = {
method : 'GET',
url: userUrl
};
$http(req).then(function(result) {
var streamUrl = "https://api.twitch.tv/kraken/streams/" + streamer;
$http({
method: 'GET',
url: streamUrl
}).then(function(data){
$scope.userName = result.name;
if(result.logo === null) {
$scope.image = "http://fit.ie/fitnew/wp-content/uploads/2014/11/no-profile-image.jpg";
}
// check if streamer is streaming
if(data.stream === null) {
$('#icon').removeClass('green');
} else {
var ii = data.stream;
for(var item in ii) {
$scope.channelStatusInfo = ii.channel.status;
}
}
});
});// the main then callback
});// the forEach loop
}
so can anyone help with why it is not working
how to use marquee with ng-repeat in angular js?
I tried
<marquee>
<span ng-repeat="item in allItems">
<img src="img/ticker.png" style="padding-top:3px;">{{item.news}}
</span>
</marquee>
But it doesn't seem to work
Also, please suggest some sliding news ticker designed in Angular Way.
you have forgotten the {{ }} marks
<marquee>
<span ng-repeat="item in allItems">
<img src="img/ticker.png" style="padding-top:3px;">{{item.news}}
</span>
</marquee>
EDIT: since you have edited your question to include the solution
marquee is deprecated in HTML5, you should use a CSS solution, or an angular one
here is a simple fiddle with marquee functionality, and a ticker
There is a working example on jsfiddle.
<div ng-app="TestAPP">
<div ng-controller='test'>
<marquee >
<span ng-repeat="item in allItems">
<img src="img/ticker.png" style="paddingtop:3px;"/>
{{item.news}}
</span>
</marquee>
</div>
</div>
https://jsfiddle.net/rod3qo7x/3/
You can try this also
angular.module('angular-news-ticker', [])
.controller('newsCtrl', function ($scope, $interval) {
$scope.start=0;
$scope.totalitem=4;
$scope.news=[{obj:'news1'},{obj:'news2'},{obj:'news3'},{obj:'news4'},{obj:'news5'},{obj:'news6'},{obj:'news1'},{obj:'news2'},{obj:'news3'},{obj:'news4'},{obj:'news5'},{obj:'news6'}];
$scope.totalnumofitem=$scope.news.length;
$scope.next=function () {
if ($scope.totalitem < $scope.totalnumofitem) {
$scope.start += 1;
$scope.totalitem +=1;
}else{
$scope.start=0;
$scope.totalitem=4;
}
}
$scope.prev=function () {
if ($scope.start>0) {
$scope.start -= 1;
$scope.totalitem -=1;
}
}
$interval(moveat, 500);
function moveat() {
if ($scope.totalitem < $scope.totalnumofitem) {
$scope.start += 1;
$scope.totalitem +=1;
}else{
$scope.start=0;
$scope.totalitem=4;
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="angular-news-ticker">
<head>
<title>demo page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body ng-controller="newsCtrl">
<div class="panel panel-default">
<div class="panel-heading">
<span>news</span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul>
<li ng-repeat="new in news.slice(start, totalitem)" >{{new.obj}}</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer">
<ul class="pagination pull-right">
<li><span class="glyphicon glyphicon-chevron-down"></span></li>
<li><span class="glyphicon glyphicon-chevron-up"></span></li>
</ul>
</div>
</div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
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/