2017-01-18 2 views
0

Я новичок в угловой и хочу начать практиковать какой-то код. Я создал простое приложение, но угловое выражение не оценивается в браузере. Мой Угловая не работает

{{inventory.product.name}}

печатает в браузере как {{inventory.product.name}}; однако, если я перейду к просмотру источника страницы, загрузится мой файл angular.min. Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно, спасибо.

HTML КОД

<title>Angular Practice</title> 
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> 
    </head> 

    <body ng-app="inventory"> 

    <div ng-controller="InventoryController as inventory"> 
    <h1>{{inventory.product.name}}</h1> 
    <h2>Product Amount</h2> 
    <p>Product description</p> 
    </div> 

    <script type="text/javascript" src="js/angular.min.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
    </body> 
    </html> 

ANGULAR КОД

(Function(){ 
     var app = angular.module('inventory', []); 

     app.controller('InventoryController', function(){ 
     this.product = item; 
     }); 

     var item = { 
     name: 'Test Item', 
     amount: 10, 
     description: 'This is the first test item', 
     } 
    })(); 
+1

какие ошибки выбрасываются в браузере Dev инструментов консоли? Это всегда первое, что нужно проверить. – charlietfl

+0

Uncaught SyntaxError: Неожиданный токен { angular.min.js: 6 Неиспользуемая ошибка: [$ injector: modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr ? p0 = inventory & p1 = Ошибка% ...% 20Bc% 20 (http% 3A% 2F% 2Flocalhost% 2Fangular% 2Fjs% 2Fangular.min.js% 3A21% 3A179) at angular.min.js: 6 at angular.min. js: 40 при q (угловой.min.js: 7) при g (угловой.min.js: 39) при cb (угловой.min.js: 43) при c (угловой.min.js: 20) в Bc (angular.min.js: 21) в Fe (angular.min.js: 20) в angular.min.js: 317 на HTMLDocument.b (angular.min.js: 189) –

+2

' Функция 'должна быть' function' ... javascript чувствителен к регистру – charlietfl

ответ

2

В коде JS, Function() должен быть function(). Обратите внимание, что Javascript чувствителен к регистру.

Рабочий фрагмент кода:

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

 
    app.controller('InventoryController', function() { 
 
    this.product = item; 
 
    }); 
 

 
    var item = { 
 
    name: 'Test Item', 
 
    amount: 10, 
 
    description: 'This is the first test item', 
 
    } 
 
})();
<body ng-app="inventory"> 
 

 
    <div ng-controller="InventoryController as inventory"> 
 
    <h1>{{inventory.product.name}}</h1> 
 
    <h2>Product Amount</h2> 
 
    <p>Product description</p> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
</body>