Lumbee Lumbee - 1 year ago 55
AngularJS Question

Trying to run a simple angular app, but angular not loading

I am trying to run this angular app locally:

I created an index.html, and an app.js and copied the respective code to each file. In the html file I added...

<script src=""></script>
<script src= "app.js" type="text/javascript"></script>

I am running http-server from the console to load the app. When I visit localhost:8080 I see the {{ content }} so I know angular is not loading.

Here are my files...


<!DOCTYPE html>
<html ng-app='store'>

<div ng-controller="MainCtrl" class="container">
<h1>Select text file</h1>
<input type="file" on-read-file="showContent($fileContent)" />
<div ng-if="content">
<h2>File content is:</h2>
<pre>{{ content }}</pre>
<script src=""></script>
<script src= "app.js" type="text/javascript"></script>


var myapp = angular.module('myapp', []);

myapp.controller('MainCtrl', function ($scope) {
$scope.showContent = function($fileContent){
$scope.content = $fileContent;

myapp.directive('onReadFile', function ($parse) {
return {
restrict: 'A',
scope: false,
link: function(scope, element, attrs) {
var fn = $parse(attrs.onReadFile);

element.on('change', function(onChangeEvent) {
var reader = new FileReader();

reader.onload = function(onLoadEvent) {
scope.$apply(function() {
fn(scope, {$});

reader.readAsText((onChangeEvent.srcElement ||[0]);

What am I missing?

Answer Source

you are bootstrap a module named :'store' with this <html ng-app='store'>

rename myapp to store is this line angular.module('myapp', []);