проблемы с угловым приложением из углового семени

Я закончил курс по AngularJs через codecademy. Я последовал за шагами с угловыми затратами, чтобы настроить свою локальную среду, чтобы сделать свое первое приложение, но оно кажется угловым, но не инициализируется на моем сайте. Я даже не могу оценить простое выражение, например {{3 + 2}}, не говоря уже о выводе значений объема из контроллера.проблемы с угловым приложением из углового семени

мои первые шаги: 1. клон Угловая семя от мерзавца 2. НПМ установить в папку 3. НПМ начать

мой код:

index.html

<html lang="en" ng-app='myApp'> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

    <title>My AngularJS App</title> 

    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css"> 
    <link rel="stylesheet" href="app.css"> 

    <!-- core Bootstrap css --> 
    <link rel="stylesheet" href="app.css"> 


    <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="components/version/version.js"></script> 
    <script src="components/version/version-directive.js"></script> 
    <script src="components/version/interpolate-filter.js"></script> 


<!-- Modules --> 
    <script src="js/app.js"></script> 

<!-- Controllers --> 
    <script src="js/MainController.js"></script> 

<!-- Directives --> 
    <script src="js/listinginfo.js"></script> 


</head> 





<body ng-controller ='MainController'> 

<div class ='container-fluid'> 

<div class ='col-md-4'> 

    <ul> 
    <li class = 'text-primary'> Properties </li> 
    <li><a href="#/view1">view1</a></li> 
    <li><a href="#/view2">view2</a></li> 
    </ul> 
</div> 



    <!--[if lt IE 7]> 
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
    <![endif]--> 
<div class = 'col-md-8'> 


      <p> {{ 3 + 2 }}</p> 

</div> 


    </div> 





<!-- container--> </div> 





<!-- for production use 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> --> 


</body>

и здесь мой модуль:

// Declare app level module which depends on views, and components 

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

Контроллер:

myApp.controller('MainController', function($scope) { 


} 
    ]; 
});

Любая помощь будет принята с благодарностью.

благодаря

моих ошибкам консоли в хроме являются:

Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: print, not all, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) 
http://localhost:8000/app/js/app.js Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost:8000/app/js/MainController.js Failed to load resource: the server responded with a status of 404 (Not Found) 
http://localhost:8000/app/js/listinginfo.js Failed to load resource: the server responded with a status of 404 (Not Found) 
angular.js:4138 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: 
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myApp 
    at http://localhost:8000/app/bower_components/angular/angular.js:63:12 
    at http://localhost:8000/app/bower_components/angular/angular.js:1774:17 
    at ensure (http://localhost:8000/app/bower_components/angular/angular.js:1698:38) 
    at module (http://localhost:8000/app/bower_components/angular/angular.js:1772:14) 
    at http://localhost:8000/app/bower_components/angular/angular.js:4115:22 
    at forEach (http://localhost:8000/app/bower_components/angular/angular.js:323:20) 
    at loadModules (http://localhost:8000/app/bower_components/angular/angular.js:4099:5) 
    at createInjector (http://localhost:8000/app/bower_components/angular/angular.js:4025:11) 
    at doBootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1452:20) 
    at bootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1473:12) 
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=myApp&p1=Error%3A%…calhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1473%3A12)

я понял клонирование углового семени и работает НПМИ установки могли бы установить все правильно

источник

2015-04-24 Shaun Anderson

Вы определили логику контроллера в любом месте? –

необходимо использовать консоль браузера/dev, чтобы начать процесс отладки ... ошибки теневые? файлы не загружены? – charlietfl

Контроллер пуст, но определен, обновлен в op –

Ваш веб-сервер не может иметь доступ для чтения файлы js внутри вашей bower_components/угловой папки. Это случилось со мной, когда однажды.

Также как и вышеприведенный комментарий, посмотрите на консоль своего браузера, чтобы увидеть, какие ошибки вы видите. Определяется ли MainController?

источник

2015-04-24 18:07:50 shivas

вот консольные ошибки: –

Было бы трудно сказать, не проверяя, какие ошибки выбрасываются. Вы определили свой контроллер? Попробуйте добавить контроллер в модуле, как:

// Declare app level module which depends on views, and components 

var myApp = angular.module('myApp', []); 
myApp.controller('MainCtrl', ['$scope', function ($scope) { 

}])

и удалить

<!-- Controllers --> 
    <script src="js/MainController.js"></script>

EDIT:

Я попытался запустить приложение без больших накладных расходов, и это работает. Мои файлы выглядеть примерно так:

index.html

<html lang="en" ng-app='myApp'> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

    <title>My AngularJS App</title> 

    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css"> 
    <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css"> 
    <link rel="stylesheet" href="app.css"> --> 

    <!-- core Bootstrap css --> 
    <link rel="stylesheet" href="app.css"> 


<!-- <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="components/version/version.js"></script> 
    <script src="components/version/version-directive.js"></script> 
    <script src="components/version/interpolate-filter.js"></script> --> 

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> 

<!-- Modules --> 
    <script src="js/app.js"></script> 

<!-- Controllers --> 
    <script src="js/MainController.js"></script> 

<!-- Directives --> 
    <script src="js/listinginfo.js"></script> 


</head> 





<body ng-controller ='MainController'> 

<div class ='container-fluid'> 

<div class ='col-md-4'> 

    <ul> 
    <li class = 'text-primary'> Properties </li> 
    <li><a href="#/view1">view1</a></li> 
    <li><a href="#/view2">view2</a></li> 
    </ul> 
</div> 



    <!--[if lt IE 7]> 
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
    <![endif]--> 
<div class = 'col-md-8'> 


      <p> {{ 3 + 2 }}</p> 

</div> 


    </div> 





<!-- container--> </div> 





<!-- for production use 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> --> 


</body>

app.js

// Declare app level module which depends on views, and components 

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

MainController.js

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

myApp.controller('MainController', ['$scope', function ($scope) { 

}])

Надеюсь, это поможет.

источник

2015-04-24 18:11:12

ошибки были обновлены в op, –

@ShaunAnderson обновил мой ответ соответственно. :) –

проблемы с угловым приложением из углового семени

ответ

Смежные вопросы