2016-08-13 5 views
0

Я только начал изучать веб-разработку самостоятельно, и у меня возникла проблема, когда либо мое приложение, либо просто контроллер просто не будут сотрудничать.Не удается заставить ng-контроллер работать в угловом приложении

В prototype.js, я объявляю приложение:

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

    cds.config(function($routeProvider) { 
     $routeProvider 
     .when('/', { 
      controller: 'appCtrl', 
      templateUrl: 'partials/login.html' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
     }); 

    cds.controller('appCtrl', ['$scope', function($scope) { 
     $scope.pageClass = 'page-login'; 
     $scope.list = [ 
      {name: 'One', description: 'I'}, 
      {name: 'Two', description: 'II'}, 
      {name: 'Three', description: 'III'}, 
      {name: 'One More', description: 'Extra'} 
     ]; 
    }]); 

В моем HTML файл:

<!DOCTYPE html> 
    <html ng-app='cds'> 
    <head> 
     <title>References</title> 
     <meta charset="utf-8"> 
     <script type="text/javascript" charset="utf-8" src="cordova.js"></script> 
     <script src="js/prototype.js"></script> 
     <style type="text/css"> 
     @import url("styles.css"); 
     </style> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/font-awesome.css"> 
    </head> 

    <body ng-controller='appCtrl' onload="align()" onresize="align()"> 
     {{ pageClass }} 
     <div ng-view></div> 
     <div id="dropdown"> 
      <button class="drop-btn">Options</button> 
      <div class="dropdown-content"> 
       <a href="#/body_diagram"><img src="img/header.menu.png"></a> 
      </div> 
     </div> 
    </body> 
    </html> 

По какой-то причине, {{ pageClass }} не будет даже отображать значение I возложенную на него в контроллере , не говоря уже о ng-view элементов. Раньше я следил за очень старым учебным пособием по маршрутизации, где приложение было объявлено с использованием только angular.module('myApp', ...), и все контроллеры выполнялись как отдельные функции, независимые от углового приложения, и все сработало хорошо для меня. Однако после прыжка с углового 1.0.7 до 1.5.8 (это длинная история и ошибка новичка), я попробовал обновить стиль и очистить код, и вот что произошло. Я чувствую, что мне не хватает чего-то очень элементарного здесь.

Edit:

Оказывается, я забыл включить нг-маршрут. Derp. Теперь все работает отлично. Спасибо всем!

+0

скрипку бы неплохо –

+0

Есть ли какие-либо ошибки сообщение (ы) в окне вашего отладчика? (В хроме это будет на консоли в окне инструментов разработчика). – warun26

+0

Извините, вот оно: https://jsfiddle.net/U3pVM/26672/. Я просто озадачен тем, как я даже не могу получить «page-login» для отображения на экране вместо '{{pageClass}}'. – tomatoBisque

ответ

0

эй, не забудьте включить ngRoute, и, возможно, поставить сценарий включает в нижней части тела ... получил вашу скрипку, чтобы работать, делая так