私は自分でWeb開発を学び始めました。私はアプリ全体やコントローラだけが協力しない問題に遭遇しました。私のHTMLファイルで角度アプリでng-controllerを動作させることができません
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'}
];
}]);
:prototype.js
で
、私はアプリを宣言
何らかの理由で<!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。今はすべてが完璧に機能しています。皆さんありがとう!
フィドルは –
いいだろう行うことによって動作するようにあなたのフィドルを得たすべてのエラーがありますデバッガウィンドウのメッセージ(Chromeでは、開発者ツールウィンドウのコンソールに表示されます)。 – warun26
申し訳ありませんが、ここにあります:https://jsfiddle.net/U3pVM/26672/。私は '{{pageClass}} 'の代わりに' page-login 'を画面に表示することさえできない方法に悩まされています。 – tomatoBisque