CamilleSNCF CamilleSNCF - 5 months ago 49
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">
<head>
<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="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<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">
<option>Réunion</option>
<option>Evènement</option>
<option>Visite</option>
</select>

<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>
</div>

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

</div>
</div>
<div id="contenu">
<md-toolbar>
<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">
MauvaisDéploiment
</div>
</div>
</div>
</md-toolbar>

<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-sidenav>

<md-content id="content">

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

<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>

<script>
'use strict';

angular.module( 'MyApp', ['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope) {
$scope.myDate = new Date();
$scope.minDate = new Date(
$scope.myDate.getFullYear(),
$scope.myDate.getMonth() - 2,
$scope.myDate.getDate());
$scope.maxDate = new Date(
$scope.myDate.getFullYear(),
$scope.myDate.getMonth() + 2,
$scope.myDate.getDate());
$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";
}
</script>
<style>
.nav {
background-color:#3e3d40;
width:8%;
box-shadow: 5px 0px 20px -1px #888;
z-index: 2;
}
.bout_rond {
display:block;
width:3vw;
height:3vw;
line-height:3vw;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #009aa6;
box-shadow: 5px 0px 20px -1px #888;
font-size:1.4vw;
font-weight:bold;
z-index: 3;
}
.cyanNav {
margin-left: 15%;
color:#009aa6;
font-size: 3vw;
}
.cyanMenu {
background-color:#009aa6;
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'),
local('MaterialIcons-Regular'),
url(rsc/MaterialIcons-Regular.woff2) format('woff2'),
url(rsc/example.com/MaterialIcons-Regular.woff) format('woff'),
url(rsc/example.com/MaterialIcons-Regular.ttf) 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';
}
</style>
</body>
</html>


I'm getting 2 errors :

Uncaught SyntaxError: Unexpected token {

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=MyApp&p1=Error%3A%2…4-millenium.c9users.io%2Fnode_modules%2Fangular%2Fangular.min.js%3A21%3A19)


(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
function()
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 :
https://ide.c9.io/millenium/test574-cloned

Answer

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="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-messages.js"></script>
Comments