CamilleSNCF CamilleSNCF - 1 year ago 125
AngularJS Question

Can't get a controller to work AngularJS

After many tries, I still can't get a single controller to work properly.
I've been doing some angular projects recently, and whatever I try my controllers don't work.

On this last project everything is on the same html file, here is the full code I've worked on :

<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8">
<link rel="stylesheet" href="node_modules/angular-material/angular-material.min.css">
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<link href="node_modules/ng-material-floating-button/mfb/dist/mfb.min.css" rel="stylesheet"/>
<link href="" rel="stylesheet">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src=""></script>

<body layout="column" ng-app="MyApp">
<div id="welcomeDiv" style="display:none; position: fixed; height: 100%; width: 100%; left: 0; top: 0; background: rgba(51,51,51,0.4); z-index: 10;">
<div style="width: 50vw; background-color: #009aa6; margin: auto; margin-top:10vw; height: 26vw;">
<div style="font-size:2vw; color: white; margin-left: 0.8vw;">CREER UNE RESERVATION</div>

<div style="font-size: 1vw; color: white; margin-left: 0.8vw;">Titre de la réservation</div>
<input type="text" style="border-radius: 3px; border: none; margin-left: 0.8vw; width: 20vw; margin-top: 0.2vw; height: 1.8vw">

<div style="font-size: 1vw; color: white; margin-left: 0.8vw; margin-top: 1vw">Type</div>
<select class="form-control" style="margin-top: 0.2vw; margin-left: 0.8vw; width: 20vw; height: 1.8vw">

<div style="font-size: 1vw; color: white; margin-left: 0.8vw; margin-top: 2.4vw;">Description</div>
<input type="text" style="border-radius: 3px; border: none; margin-left: 0.8vw; width: 20vw; margin-top: 0.2vw; height: 10vw">

<div ng-controller="AppCtrl" style='padding: 40px;' ng-cloak>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>

<input type="button" name="answer" value="Cacher" onclick="hideDiv()" style="margin-left: 1vw; float: bottom; width: 4vw;" />

<div id="contenu">
<div class="cyanMenu">
<div class="white">
<a href="#demo" data-toggle="collapse" style="color: white; text-decoration: none;"><i class="fa fa-angle-down" style="text-shadow: 0 0 8px #555; margin-right: 3vw;"></i>1 MAI 2016</a>
<div id="demo" class="collapse">

<div class="container" layout="row">
<md-sidenav md-is-locked-open="false" class="nav">
<div class="cyanNav">574</div>
<div class="whiteText">Nantes</div>
<i class="material-icons" style="font-size: 4vw; margin-left: 1.8vw; margin-top: 2vw; color: white;">date_range</i>
<i class="material-icons" style="font-size: 4vw; margin-left: 1.8vw; margin-top: 2vw; color: white;">notifications</i>
<i class="material-icons" style="font-size: 4vw; margin-left: 1.8vw; margin-top: 2vw; color: white;">equalizer</i>


<md-content id="content">

<input type="button" name="answer" value="+" onclick="showDiv()" style="margin-left: 6.5vw; bottom: 0; margin-bottom: 3vw; position: absolute" class="bout_rond"/>

<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-aria/angular-aria.min.js"></script>
<script src="node_modules/angular-material/angular-material.min.css"></script>

'use strict';

angular.module( 'MyApp', ['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope) {
$scope.myDate = new Date();
$scope.minDate = new Date(
$scope.myDate.getMonth() - 2,
$scope.maxDate = new Date(
$scope.myDate.getMonth() + 2,
$scope.onlyWeekendsPredicate = function(date) {
var day = date.getDay();
return day === 0 || day === 6;

function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
document.getElementById('contenu').style.display = "none";
function hideDiv() {
document.getElementById('welcomeDiv').style.display = "none";
document.getElementById('contenu').style.display = "block";
.nav {
box-shadow: 5px 0px 20px -1px #888;
z-index: 2;
.bout_rond {
border-radius: 50%;
background: #009aa6;
box-shadow: 5px 0px 20px -1px #888;
z-index: 3;
.cyanNav {
margin-left: 15%;
font-size: 3vw;
.cyanMenu {
font-size: 3.8vw;
margin-left: 6%;
z-index: -1000;
.whiteText {
color: white;
margin-left: 15%;
font-size: 2vw;
margin-top: -15%;
.white {
color: white;
margin-left: 4%;
.content {
background-color: #c7czba;
[ng-cloak] {
display: none;
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(rsc/MaterialIcons-Regular.woff);
src: local('Material Icons'),
url(rsc/MaterialIcons-Regular.woff2) format('woff2'),
url(rsc/ format('woff'),
url(rsc/ format('truetype');
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';

I'm getting 2 errors :

Uncaught SyntaxError: Unexpected token {

Uncaught Error: [$injector:modulerr]$injector/modulerr?p0=MyApp&p1=Error%3A%2…

(leads to an angular page about ngRoute that I don't really understand)

I've tried a few things like creating a
var app = angular.module(...)
but when I do that I get an error saying that app is not a function, then I try putting the whole script inside a
but still getting the same error.

I'm sure I've been missing something but cannot find what it is.

Oh and here is a link to the cloud9 project if you want to give a look to the whole "working" project :

Answer Source

The first error is occuring as you are including a css file as a script

<script src="node_modules/angular-material/angular-material.min.css"></script>

should be

<script src="node_modules/angular-material/angular-material.min.js"></script>

The second error is occurring as you are not including angular-messages.js in your source.

Try adding the below after you import the angular.js script

<script src=""></script>