angularjs embed with visualforce page - angularjs

Question

I am try to embed an angular js script within VF page.But I am getting two errors:
/*ajpage:16 Uncaught SyntaxError: Unexpected token . angular.min.js:40 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=app&p1=Error%3A%20%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.8%2Fangular.min.js%3A20%3A390)
ajpage:
apex:page doctype="html-5.0" sidebar="false" showHeader="false">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app = "app" ng-controller="myCtrl">
<p>Please upload you file:</p>
<p><input type="file" ng-model="allText"/></p>
<button ng-click="readCSV()">Upload</button>
<button ng-click="extractfile()">test</button>
</div>
<div ng-repeat="f in constr">
{{constr}}
</div>
<script>
var app = angular.module('app',[]);
.controller('myCtrl', myCtrl);
function myCtrl($scope) {
$scope.$log = $log;
$scope.readCSV = function($scope) {
var allTextLines = $scope.allText.split(/\r\n|\n/);
for ( var i = 0; i < allTextLines.length; i++)
{
var tarr = [];
tarr.push(allTextLines[i]);
}
};
$scope.extractfile = function(tarr) {
var constr[];
var deployobj ={
"Componenttype": Componenttype,
"ComponentApiname":ComponentApiname,
};
deployobj.push(tarr);
for (var j=0;j<$scope.deployobj.length;j++)
{
var str1 = "<members>";
var str2 = "</members>";
if ($scope.deployobj[j].Componenttype=== customobject)
{
var result = str1 +" "+$scope.deployobj[j].Componenttype+" "+str3;
$scope.constr.push(result);
}
}
};
}
</script>
</apex:page>
Can anyone help me to resolve this issue.

Answer 1

Try to this way .
var app = angular.module('app',[]);
.controller('myCtrl', function(){
//All the functionalities are inject here.
});

Answer 2

<apex:page doctype="html-5.0" sidebar="false" showHeader="false">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app = "app" ng-controller="myCtrl">
<p>Please upload you file:</p>
<p><input type="file" ng-model="allText"/></p>
<button ng-click="readCSV()">Upload</button>
<button ng-click="extractfile()">test</button>
</div>
<div ng-repeat="f in constr">
{{constr}}
</div>
<script>
var app = angular.module('app',[]);
.controller('myCtrl', function(){
$scope.readCSV = function($scope) {
var allTextLines = $scope.allText.split(/\r\n|\n/);
for ( var i = 0; i < allTextLines.length; i++)
{
var tarr = [];
tarr.push(allTextLines[i]);
}
};
$scope.extractfile = function(tarr) {
var constr[];
var deployobj ={
"Componenttype": Componenttype,
"ComponentApiname":ComponentApiname,
};
deployobj.push(tarr);
for (var j=0;j<deployobj.length;j++)
{
var str1 = "<members>";
var str2 = "</members>";
if ($scope.deployobj[j].Componenttype=== customobject)
{
var result = str1 +" "+deployobj[j].Componenttype+" "+str3;
$scope.constr.push(result);
}
}
};
});
</script>
</apex:page>
Changed code