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

Редактировать:

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

Источник

2 ответа

Решение

Похоже, вам не хватает ngRoute модуль. Вы можете связаться с ним через CDN:

http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js

Вот скрипка с добавленной зависимостью.

Источник

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

Источник
Другие вопросы по тегам