2016-06-22 4 views
-1

Я пытаюсь запустить это угловое приложение локально: https://jsfiddle.net/alexsuch/6aG4x/Попытки запустить простое угловое приложение, но угловые не загружая

Я создал index.html, и app.js и скопировать соответствующий код для каждого файла , В html-файле я добавил ...

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> 
<script src= "app.js" type="text/javascript"></script> 

Я запускаю http-сервер из консоли для загрузки приложения. Когда я посещаю localhost: 8080, я вижу {{content}}, поэтому я знаю, что угловой не загружается.

Вот мои файлы ...

index.html

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

<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> 
    </div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> 
<script src= "app.js" type="text/javascript"></script> 
</body> 

app.js

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, {$fileContent:onLoadEvent.target.result}); 
        }); 
       }; 

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

Что мне не хватает?

+0

Проводили ли вы базовую отладку? Откройте консоль, и она скажет вам * почему *. – dfsq

+0

Вы можете добавить файлы в свои руки? –

+0

@dfsp да, открыл хромированный инспектор и не было ошибок. – Lumbee

ответ

2

вы самонастройка модуля под названием: «магазина» с этим <html ng-app='store'>

переименовывать myapp в store этой линии angular.module('myapp', []);

+0

Бум! Ты прибил его, чувак! Работает как шарм. Спасибо. – Lumbee

1

Название вашего углового приложения некорректно и отличаются в HTML и JavaScript. Он должен быть согласован между директивой ng-app и декларацией angular.module('', []). Измените его, как показано ниже, чтобы сделать приложение работает:

Изменение JavaScript

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

Изменение HTML

<html ng-app='myapp'> 

Смотрите рабочую демонстрацию того же здесь: https://jsbin.com/geyidot/1/edit?html,js,console,output