angularjs embed with visualforce page

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

<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

Answer 2

Try to this way .

var app = angular.module('app',[]); .controller('myCtrl', function(){

//All the functionalities are inject here.

});