0
私はAngularJSを初めて使い、単純なシングルページアプリケーションを作成しようとしています。すべて正常に動作しましたが、$ stateProviderで状態を追加しました。関数を割り当てたボタンをクリックすると、コントローラに問題があるようなことはありません。 私を助けることができれば感謝します。コードは長い間静かなかもしれませんが、私は自分自身でさらに動くことはできません。ここ コードである：ルーティング後にシングルページアプリケーションが機能しなくなった
index.htmlを
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.ico">
<link href="node_modules/angular-material/angular-material.min.css" rel="stylesheet" />
<link href="node_modules/angular-material/angular-material.css" rel="stylesheet" />
<link href="node_modules/mdi/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="styles/customMaterial.css" rel="stylesheet" />
</head>
<body ng-app="ngClassifieds">
<ui-view></ui-view>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-material/angular-material.min.js"></script>
<script src="node_modules/angular-aria/angular-aria.min.js"></script>
<script src="node_modules/angular-animate/angular-animate.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="scripts/app.js"></script>
<script src="classifiedsCtrl.js"></script>
<script src="components/classifieds/classifieds.fac.js"></script>
<script src="components/classifieds/new/newClassified.ctr.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
</body>
</html>
classifieds.tpl.html
<md-toolbar>
<div class="md-toolbar-tools">
<p>Pixo</p>
<md-button ng-click="vm.openSidenav()">
<md-icon class="mdi mdi-plus-circle"></md-icon>
Add new
</md-button>
<md-button ng-click="filtering = !filtering">
<md-icon class="mdi mdi-magnify"></md-icon>
Filter
</md-button>
</div>
</md-toolbar>
<ui-view></ui-view>
<div class="filters" layout="row" layout-align="center center" ng-show="filtering">
<md-input-container style="margin-top:43px">
<label>Enter search term</label>
<input type="text" ng-model="filter" />
</md-input-container>
<md-input-container>
<label>Category</label>
<md-select ng-model="category" placeholder="Select a category">
<md-option ng-repeat="category in vm.categories" value="{{category}}" ng-bind="category"></md-option>
</md-select>
</md-input-container>
<md-input-container>
<md-button class="md-warn" ng-click="category='';filter=''">
Clear <md-icon class="mdi mdi-backspace"></md-icon>
</md-button>
</md-input-container>
</div>
<md-content class="md-padding" layout="row" layout-wrap>
<md-card flex="30" ng-repeat="classified in vm.classifieds | filter:filter
|filter: category" class="classified">
<img ng-src="{{classified.img}}" alt="phone" style="height:300px !important" />
<md-card-content>
<div class="classified-info" ng-show="!showContact">
<h2 class="md-title" ng-bind="classified.title"></h2>
<h3 ng-bind="classified.price | currency:'€'"></h3>
<p ng-bind="classified.description">
</p>
</div>
<div class="classified-contact" ng-show="showContact">
<p><md-icon class="mdi mdi-account"></md-icon><span ng-bind="classified.contact.name"></span></p>
<p><md-icon class="mdi mdi-phone"></md-icon><span ng-bind="classified.contact.phone"></span></p>
<p><md-icon class="mdi mdi-email"></md-icon><span ng-bind="classified.contact.email"></span></p>
</div>
<div layout="row">
<md-button ng-click="showContact = true" ng-show="!showContact">Contact</md-button>
<md-button ng-click="showContact = false" ng-show="showContact">Details</md-button>
<md-button ng-click="showAdmin = true" ng-show="!showAdmin">Admin</md-button>
<md-button ng-click="showAdmin = false" ng-show="showAdmin">Cancel</md-button>
</div>
<div class="row" ng-show="showAdmin">
<md-button class="md-primary" ng-click="vm.editClassified(classified)">EDIT</md-button>
<md-button class="md-warn" ng-click="vm.deleteClassified($event,classified)">DELETE</md-button>
</div>
</md-card-content>
</md-card>
</md-content>
newClassified.tpl.html
<md-sidenav md-component-id='left' class="md-sidenav-left">
<md-toolbar>
<h2 class="md-toolbar-tools">Add new</h2>
</md-toolbar>
<md-content class="md-padding">
<form>
<md-input-container>
<label for="title">Title</label>
<input type="text" autofocus ng-model="classified.title" />
</md-input-container>
<md-input-container>
<label for="price">Price</label>
<input type="text" ng-model="classified.price" />
</md-input-container>
<md-input-container>
<label for="description">Description</label>
<textarea ng-model="classified.description"></textarea>
</md-input-container>
<md-input-container>
<label for="image">Image link</label>
<input type="text" ng-model="classified.image" />
</md-input-container>
<md-button class="md-primary" ng-click="vm.saveClassified(classified)" ng-if="!vm.editing">SAVE</md-button>
<md-button class="md-primary" ng-if="vm.editing" ng-click="vm.saveEdit()">SAVE EDIT</md-button>
<md-button class="md-warn" ng-click="vm.closeSidenav()">CANCEL</md-button>
</form>
</md-content>
</md-sidenav>
app.js
angular.module("ngClassifieds", ["ui.router", "ngMaterial"])
.config(function ($mdThemingProvider, $stateProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
$stateProvider.state("classifieds", {
url: '/classifieds',
templateUrl: 'components/classifieds/classifieds.tpl.html',
controller: 'classifieds as vm'
})
.state('classifieds.new', {
url: '/new',
templateUrl: 'components/classifieds/new/newClassified.tpl.html',
controller: 'newClassified as vm'
});
});
classifiedsCtrl.js
(function() {
angular
.module("ngClassifieds")
.controller("classifieds", function ($scope, $http, classifiedsFactory, $mdSidenav, $mdToast, $mdDialog) {
var vm = this;
var classifieds;
vm.openSidenav = openSidenav;
vm.closeSidenav = closeSidenav;
vm.saveClassified = saveClassified;
vm.editClassified = editClassified;
vm.saveEdit = saveEdit;
vm.deleteClassified = deleteClassified;
vm.classifieds;
vm.categories;
vm.editing;
vm.classified;
classifiedsFactory.classifiedsData().then(function (classifieds) {
vm.classifieds = classifieds.data;
vm.categories = getCategories(vm.classifieds);
});
function getCategories(classifieds) {
var categories = [];
angular.forEach(classifieds, function (classified) {
angular.forEach(classified.categories, function (category) {
categories.push(category);
});
});
return _.uniq(categories);
}
function openSidenav() {
$mdSidenav('left').open();
}
function closeSidenav() {
$mdSidenav("left").close();
}
var showSavedToast = function (message) {
$mdToast.show($mdToast.simple()
.content(message).position("right", "top").hideDelay(3000));
}
var contact = {
"name": "John Doe",
"phone": "545 555 655",
"email": "[email protected]"
}
function saveClassified(classified) {
classified.contact = contact;
vm.classifieds.push(classified);
classified = {};
closeSidenav();
showSavedToast("Classified saved");
}
function editClassified(classified) {
vm.editing = true;
vm.classified = classified;
openSidenav();
}
function saveEdit() {
vm.editing = false;
vm.classified = {};
vm.closeSidenav();
showSavedToast("Classified edited");
}
function deleteClassified(event, classified) {
var confirm = $mdDialog.confirm()
.title("Are you sure you want to delete " + classified.title + "?")
.textContent("This item will be deleted permanently")
.ok('Yes')
.cancel('No');
$mdDialog.show(confirm).then(function() {
var index = vm.classifieds.indexOf(classified);
vm.classifieds.splice(index, 1);
}, function() { });
}
});})();
newClassified.ctr.j S
(function() {
angular.module('ngClassifieds')
.controller('newClassified', function ($mdSidenav, $mdDialog, classifiedsFactory, $timeout) {
var vm = this;
$timeout(function() {
$mdSidenav('left').open();
});
});})();
それはあなたが問題のコードを追加したことをうれしいですが、私たちは、あなたが取得しているエラーに関するすべての詳細を取得していない場合、我々は助けることはできません。ブラウザのデベロッパーツールのコンソールで何が表示されますか？ – Shade