Issue in creating a simple app using Angular-Material - javascript

I'm trying to create an app that uses the Angular Material navigation bar that can be found on this link.
I'm fairly new to AngularJS and I cannot figure out when I load the app why I am presented with a blank page.
Here is my code:
index.html
<!DOCTYPE html>
<html ng-app="navBarDemoBasicUsage">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<md-nav-bar
md-selected-nav-item="currentNavItem"
nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">
Page One
</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">
Page Two
</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">
Page Three
</md-nav-item>
<!-- these require actual routing with ui-router or ng-route, so they
won't work in the demo
<md-nav-item md-nav-href="#page4" name="page5">Page Four</md-nav-item>
<md-nav-item md-nav-sref="app.page5" name="page4">Page Five</md-nav-item>
You can also add options for the <code>ui-sref-opts</code> attribute.
<md-nav-item md-nav-sref="page6" sref-opts="{reload:true, notify:true}">
Page Six
</md-nav-item>
-->
</md-nav-bar>
<div class="ext-content">
External content for `<span>{{currentNavItem}}</span>`.
</div>
<md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>
</md-content>
</div>
</body>
</html>
script.js
(function() {
'use strict';
angular.module('navBarDemoBasicUsage', ['ngMaterial'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
}
})();
style.css
.navBardemoBasicUsage md-content .ext-content {
padding: 50px;
margin: 20px;
background-color: #FFF2E0;
}

You missed to include several JSscripts in your page.
Angular Material requires to include angular-materials.js. You will also need angular-animate.js and angular-aria.js.
Just add them and it should work.
angular.module('navBarDemoBasicUsage', ['ngMaterial']).controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css
">
<div ng-app="navBarDemoBasicUsage">
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">
Page One
</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">
Page Two
</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">
Page Three
</md-nav-item>
</md-nav-bar>
<div class="ext-content">
External content for `<span>{{currentNavItem}}</span>`.
</div>
<md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>
</md-content>
</div>
</div>

You are using angular material directives like this
md-content
but there is no place where you add it to the page. Try to remove firstly all stuff connected to angular material and check application.

Related

Angular App doesn't work when injecting a pagination dependency

I'm building a simple Sigle Page Application with AngularJs, which retrieves data stored on a server-based application. When I try to inject the pagination directive, the application doesn't work, where it shows only the navigation bar.
I've followed this tutorial.
Moreover, the console doesn't show any error.
Below are the files where I'm trying to implement the pagination:
main.html:
<div class="page-header">
<h2 id="tables">Pagination in Angular Js</h2>
</div>
<div ng-controller="UsersList">
<table class="table striped">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Created At</th>
<!--<th>Status</th>-->
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users | itemsPerPage: pageSize" current-page="currentPage">
<td>{{user.last_name}}</td>
<td>{{user.first_name}}</td>
<td>{{user.created_at}}</td>
</tr>
</tbody>
</table>
<dir-pagination-controls boundary-links="true" max-size="10" template-url="app/main/dirPagination.tpl.html"></dir-pagination-controls>
</div>
main.js:
angular.module('Js-Users-App', ['angularUtils.directives.dirPagination']).controller('UsersList', UsersList);
UsersList.$inject = ['$scope', 'userDataFactory', 'angularUtils.directives.dirPagination'];
function UsersList($scope, userDataFactory){
$scope.users = [];
$scope.currentPage = 1;
$scope.pageSize = 10;
// Get the list of users
userDataFactory.userList().then(function(response) {
$scope.users = response.data;
});
}
user-data-factory.js:
angular.module('Js-Users-App').factory('userDataFactory', userDataFactory);
function userDataFactory($http) {
return {
userList: userList
};
function userList() {
return $http.get("users.json").then(complete).catch(failed);
}
function complete(response) {
return response;
}
function failed(error) {
console.log(error.statusText);
}
}
dir-paginate is declared in the file below:
<html ng-app="Js-Users-App">
<head>
<meta charset="utf-8">
<title>Js Users</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#/" class="brand-logo">Js Users</a>
<ul class="right hide-on-med-and-down">
<li>Add</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Add</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<div class="container">
<div ng-view></div>
</div>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/materialize-css/dist/js/materialize.min.js"></script>
<!--<script src="js/ui-bootstrap-2.5.0.min.js"></script>-->
<script src="js/dirPagination.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/main/main.js"></script>
<script type="text/javascript" src="app/user-data-factory/user-data-factory.js"></script>
</body>
</html>
And the script is located inside the js folder.
The application is running on a simple web server, started with python -m SimpleHTTPServer.
I can't find the problem. Also because I still don't know how to debug very well. Is it because the application is not loading the new directive? Thanks.
UPDATE 1
I've made a plunk to show you the project structure and the entire code: http://plnkr.co/edit/LoICEnE5nkwLDvsu7URD
ng-app shouldn't be defined on <html> element, unless proven otherwise. This can result in undesirable behaviour when jQuery is loaded.
jQuery should be loaded before Angular and other dependencies that may use of it (Materialize).
Js-Users-App module is being redefined:
angular.module('Js-Users-App', ['angularUtils.directives.dirPagination']).controller('UsersList', UsersList);
This eliminates router configuration, so the application does nothing. The module should be defined once, with all module dependencies:
angular.module("Js-Users-App", ["ngRoute", 'angularUtils.directives.dirPagination'])
After that angular.module("Js-Users-App") should be used only as a getter (no second argument).
UsersList controller injects angularUtils.directives.dirPagination for no good reason, this will result in error because there's no such service - it's a directive. It should be omitted.

Home and a List page

What i want to do is pass from my home application to a list. I have the list and my home on different .js files, but now, how can i show first my home, and then, with one click, send to the list?
My files, next. First the home code and view:
home-component.js
(function(){
'use strict';
var home = {
templateUrl: './app/components/list-component/home-component/home.html',
controller: homeCtrl
};
angular
.module('payApp')
.component('home', home);
function homeCtrl(){
var home = this;
}
})();
home.html
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-lg-7">
<div class="title">
<h3><strong>¡Welcome!</strong></h3>
</div>
<br>
<div class="col-md-6 .col-md-offset-3">
<button class="btn btn-success" ng-click="">Start</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Then, my list files.
payment-component.js
(function(){
'use strict';
var pays = {
templateUrl: './app/components/list-component/paymentcompo.html',
controller: payCtrl
};
angular
.module('payApp')
.component('payInvoice', pays);
payCtrl.$inject = ["$scope"];
function payCtrl($scope){
}
})();
It's html view:
paymentcompo.html
<table class="table table-hover">
<thead>
<tr>
<th>Payment Number</th>
<th>Name</th>
<th>Tax Id</th>
</tr>
</thead>
<tbody>
<tr id="pool" ng-repeat="info in list | filter: search">
<th>{{info.Id}}</th>
<th>{{info.name}}</th>
<th>{{info.taxId}}</th>
</tr>
</tbody>
</table>
And, in the end, my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="payApp">
<meta charset="UTF-8">
<title>Pay This</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/componentes/css/pay-style.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<head>
</head>
<body>
<pay-Invoice></pay-Invoice>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-popover.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script>
<script src="app/payapp.js"></script>
<script src="app/components/list-component/payment-component.js"></script>
<script src="app/components/list-component/home-component/home-component.js"></script>
<script src="app/factory/pay-factories.js"></script>
<script src="app/routes/routes.js">
</body>
</html>
I'd read that i need also use ngRoute, so i added and create my routes.js.
EDITED
This is my routes.js code:
(function(){
'use strict';
angular
.module('payApp')
.config(config);
config.$inject = ["$routeProvider","$locationProvider"];
function config($routeProvider, $locationProvider){
$routeProvider
.when('/home',{
template: '<home></home>',
})
.when('/listado',{
template: '<pay-invoice></pay-invoice>',
})
.otherwise({
redirectTo: '/home',
});
$locationProvider.html5Mode(true);
}
})();
I need to pass two things:
The home view, because is the very first thing i need to show.
The list view, which will be triggered by the button on the home view.
How can i do that? What other thing i need to do on the index.html? Hope you can help me.
If you are using angular-route you need to create container div in your main html file.
So instead of
<pay-Invoice></pay-Invoice>
in your index html file place a container component:
<div ng-view></div>
This will tell ngRoute that it should mount route components to this container and swich it when location changes
More about it: https://docs.angularjs.org/api/ngRoute/directive/ngView

Unable to implement angular-intro.js on angular-material app

I am unable to use angular-intro.js on my angular-material app. I have tried to implement it outside my app on a simplified plunker and still have not had positive results. Can anyone point out to me what I am doing wrong ??
http://plnkr.co/edit/T94BixuBl7NBBKe2UUyN?p=preview
I have yet to find an example of someone implementing this on an angular-material app, I have only seen it on an angular-js app. Below is my view. In both my app and the plunker CallMe() never seems to be called.
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css" rel="stylesheet" data-require="angular-material#1.1.0-rc2" data-semver="1.1.0-rc2" />
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js" data-require="angular-material#1.1.0-rc2" data-semver="1.1.0-rc2"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js" data-require="angularjs#1.5.3" data-semver="1.5.3"></script>
<script src="https://code.angularjs.org/1.5.3/angular-animate.js" data-require="angular-animate#1.5.3" data-semver="1.5.3"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js" data-require="angular-aria#1.5.3" data-semver="1.5.3"></script>
<script src="https://github.com/itzgAndEnenbee" data-require="angular-messages#1.5.3" data-semver="1.5.3"></script>
<link href="style.css" rel="stylesheet" />
<link href="introjs.css" rel="stylesheet" />
<script type="text/javascript" src="intro.js"></script>
<script type="text/javascript" src="angular-intro.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body layout="column" layout-fill ng-app="YourApp" ng-controller="DemoCtrl">
<div ng-intro-options="IntroOptions" ng-intro-method="CallMe">
<md-toolbar class="top">
<div class="md-toolbar-tools">
<button class="btn btn-large btn-success" ng-click="CallMe();">Demo</button>
</div>
</md-toolbar>
<md-content class="md-padding" flex>
<div class="step0" layout-xs="column" layout="row">
<p>Testing</p>
</div>
</md-content>
<md-toolbar class="bottom">
<div class="md-toolbar-tools">
<button class="step2 btn btn-large btn-success">Button 1</button>
</div>
</md-toolbar>
<div id="step1" layout-xs="column" layout="row">
<button class="btn btn-large btn-success">Button 2</button>
</div>
</div>
</body>
</html>
My DemoCtrl is below:
angular
.module('YourApp', ['ngMaterial', 'angular-intro'])
.config(function($mdThemingProvider){
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.dark();
})
.controller('DemoCtrl', function ($scope) {
$scope.IntroOptions = {
steps:[
{
element: document.querySelector('.step0'),
intro: 'Testing',
position: 'right'
},
{
element: '#step1',
intro: 'Testing',
position: 'bottom'
},
{
element: '.step2',
intro: 'Testing 2',
position: 'right'
}],
showStepNumbers: false,
exitOnOverlayClick: true,
exitOnEsc: true,
nextLabel: '<strong>NEXT!</strong>',
prevLabel: '<span style="color:green">Previous</span>',
skipLabel: 'Exit',
doneLabel: 'Thanks'
};
$scope.ShouldAutoStart = false;
});
EDIT: So I have been able to fix this in my application by moving the ng-intro-options and ng-intro-method attributes from the same element where the ng-controller attribute was defined. I got this idea from here. This fix did not fix my plunker example, though. And also I am now having an issue in my app where intro.js makes a md-toolbar disappear from view when the overlay is active.
It looks like one or more AngularJS/AngularMaterial files you are loading is causing a problem:
I replaced the files you load with those used by the AM demos
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
and it seems to work - Plunker
Note: rel="stylesheet" should be added to any link tag otherwise the style is not processed.

AngularJS Material md-list hight completely different in chrome

I'm fairly new to using AngularJS and I'm working with Angular Materials, and I've come across an issue that I cannot understand.
When writing a md-list, it renders fine in Firefox, and IE (11), but in chrome, each md-list-item takes the full height of the window, but only when I'm running the code for my site.
If I view other pages (eg. the Angular Material demos), or put the code into a shareable editor, like codepen, or jsfiddle, they render fine.
The code below is is a test template which displays incorrectly
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<div style="height:400px;width:500px;">
<md-list>
<md-list-item ng-click="null">Item 1</md-list-item>
</md-list>
<md-list>
<md-list-item ng-click="null">Item 2</md-list-item>
</md-list>
<md-list>
<md-list-item ng-click="null">Item 3</md-list-item>
</md-list>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>
CodePen : http://codepen.io/anon/pen/pyqKZr
Live Demo of the failed layout: http://angular.deathwishgame.co.uk/
Why does this only happen when rendering my own page alone, what am I doing wrong?
You are running into https://github.com/angular/material/issues/8094
The only workaround is to give the list items a height/max-height.
There seems to be a pull-request pending review.
Use angular-material version 1.0.9 instead of 1.1.0. Then, it will work fine.
Try running this code , I have corrected your code which you have hosted
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.9/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<!--
Your HTML content here
-->
<div style="height:400px;width:500px;">
<md-list>
<md-list-item ng-click="null">Item 1</md-list-item>
<md-list-item ng-click="null">Item 2</md-list-item>
<md-list-item ng-click="null">Item 3</md-list-item>
</md-list>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.9/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>
You can try to put all the md-list-item in just one md-list.
<div style="height:400px;width:500px;">
<md-list>
<md-list-item ng-click="null">Item 1</md-list-item>
<md-list-item ng-click="null">Item 2</md-list-item>
<md-list-item ng-click="null">Item 3</md-list-item>
</md-list>
</div>
<html lang="en" >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<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-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script language="javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('listController', listController);
function listController ($scope) {
var self = this;
self.allContacts = loadContacts();
self.contacts = [self.allContacts[0]];
function loadContacts() {
var contacts = [
'Roberto Karlos',
'Bob Crestor',
'Nigel Rick',
'Narayana Garner'
];
return contacts.map(function (c, index) {
var cParts = c.split(' ');
var contact = {
name: c,
email: cParts[0][0].toLowerCase() + '.' + cParts[1].toLowerCase() + '#example.com',
image: 'http://lorempixel.com/50/50/people?' + index
};
contact._lowername = contact.name.toLowerCase();
return contact;
});
}
}
</script>
</head>
<body ng-app="firstApplication">
<div id="listContainer" ng-controller="listController as ctrl" layout="column" ng-cloak>
<md-content>
<md-list>
<md-subheader class="md-no-sticky">Contacts</md-subheader>
<md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts"
ng-if="ctrl.contacts.indexOf(contact) < 0">
<img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
<div class="md-list-item-text compact">
<h3>{{contact.name}}</h3>
<p>{{contact.email}}</p>
</div>
<md-divider ng-if="!$last"></md-divider>
</md-list-item>
</md-list>
<md-list>
<md-subheader class="md-no-sticky">Contacts (With Insets)</md-subheader>
<md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts"
ng-if="ctrl.contacts.indexOf(contact) < 0">
<img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
<div class="md-list-item-text compact">
<h3>{{contact.name}}</h3>
<p>{{contact.email}}</p>
</div>
<md-divider md-inset ng-if="!$last"></md-divider>
</md-list-item>
</md-list>
</md-content>
</div>
</body>
</html>

angular directive template not loading

my angular directive template is not getting loaded into my app. The js file for the directive is loading fine except the html. I checked the 'net' tab in firebug and its not getting called there either. I am currently not getting any errors.
Here is my directive js:
angular.module('Grid')
.directive('grid', function() {
return {
restrict: 'A',
require: 'ngModel',
scope: {
ngModel: '='
},
templateUrl: 'scripts/grid/grid.html'
}
});
Here is my directive html:
<div id="game">
<div class="grid-container">
<div class="grid-cell" ng-repeat="cell in ngModel.grid track by $index"></div>
</div>
<div class="tile-container">
<div tile ng-model="tile" ng-repeat="tile in ngModel.tiles track by $index"></div>
</div>
finally here is my index.html where it is meant to go
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2048</title>
<link rel="stylesheet" type="text/css" href="styles/game.css" />
<script type="application/javascript" src="scripts/libraries/angularjs.js" ></script>
<script type="application/javascript" src="scripts/app.js"></script>
<script type="application/javascript" src="scripts/game/game.js"></script>
<script type="application/javascript" src="scripts/grid/grid.js"></script>
<script type="application/javascript" src="scripts/grid/grid_directive.js"></script>
</head>
<body ng-app="twentyApp">
<!-- header -->
<div class="container" ng-include="'views/main.html'"></div>
<!-- script tags -->
<div id="game-controller">
<div grid ng-model="ctrl.game" class="row"></div>
</div>
</body>
</html>
This has app is being broken up into multiple modules as the new recommended structure for angular
The grid module needs to be a dependency of your twentyApp module.
angular.module('twentyApp', ['grid'])
Are you sure that the Grid module is being loaded?
Try this:
angular.module('Grid', [])
.directive('grid', function() {

Categories