Q&A
おそらく初歩的なことだったにもかかわらずご丁寧に回答いただきありがとうございました。動かすことができました。
ng-viewは知っていましたが記載漏れしていました。申し訳ございませんでした。
AngularJS+PHP+MySQLでCRUD入門 http://qiita.com/naga3/items/cacb8182ad79dbbf6e64 のサイトの記事をベースで同じ機能をもたせながらrouting機能も持たせたものを作成しようとしているのですがうまくいきません。
index.htmlで表示されているものをlist.htmlで表示させようとしています。
index.html <!doctype html> <html lang="ja" ng-app="app"> <head> <meta charset="utf-8"> <title>名簿</title> </head> <body> <!--表示部分をlist.htmlに移す--> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.min.js"></script> <!--routingを使うために設定 --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js"></script> <script src="route.js"></script> <script src="controller.js"></script> </body> </html>
list.html <!--index.htmlの表示部分をそのまま移す--> <!doctype html> <ng-controller="MainCtrl"> <table border="1"> <tr><th>ID</th><th>名前</th><th>年齢</th><th>コメント</th></tr> <tr ng-controller="DetailCtrl" ng-repeat="student in students"> <td>{{student.id}}</td> <td><input ng-model="student.name"></td> <td><input ng-model="student.age"></td> <td><input ng-model="student.comment"></td> <td><button ng-click="update()">更新</button></td> <td><button ng-click="delete()">削除</button></td> </tr> <tr> <td> </td> <td><input ng-model="new_student.name"></td> <td><input ng-model="new_student.age"></td> <td><input ng-model="new_student.comment"></td> <td><button ng-click="add()">追加</button></td> <td> </td> </tr> </table>
route.js routingできるよう記述 angular.module('myApp', [ 'ngRoute' ]) // 1configメソッドに$routeProviderプロバイダーを注入 .config(['$routeProvider', function($routeProvider){ $routeProvider .when('/', { templateUrl: 'list.html', controller: 'MainCtrl' //↑DetailCtrlも使うがコントローラーを２つ使う場合の書き方がわからない。 }) .otherwise({ redirectTo: '/' }); }]);
controller.js そのまま使用 var app = angular.module('app', ['ngResource']); app.controller('MainCtrl', function($scope, $resource, $window) { var Student = $resource('students.php', {id: '@id'}); $scope.students = Student.query(); $scope.add = function() { Student.save($scope.new_student, function() { alert("追加しました。"); $window.location.reload(); }); }; }); app.controller('DetailCtrl', function($scope, $window) { $scope.update = function() { $scope.student.$save(function() { alert("更新しました。"); }); }; $scope.delete = function(index) { $scope.student.$delete(); alert("削除しました。"); $window.location.reload(); }; });
students.php そのまま使用 <?php $pdo = new PDO('mysql:dbname=school', 'root'); switch ($_SERVER['REQUEST_METHOD']) { case 'GET': $st = $pdo->query("SELECT * FROM students"); echo json_encode($st->fetchAll(PDO::FETCH_ASSOC)); break; case 'POST': $in = json_decode(file_get_contents('php://input'), true); if (isset($in['id'])) { $st = $pdo->prepare("UPDATE students SET name=:name,age=:age,comment=:comment WHERE id=:id"); } else { $st = $pdo->prepare("INSERT INTO students(name,age,comment) VALUES(:name,:age,:comment)"); } $st->execute($in); break; case 'DELETE': $st = $pdo->prepare("DELETE FROM students WHERE id=?"); $st->execute([$_GET['id']]); break; }
これだと何も表示されません。
index.htmlの中身を移してroute機能を軽く入れるだけなのでベースからそこまで大きな変化をしてないはずなんですが・・・。あと複数コントローラー1画面で使用の方法もよくわかりません。
長文で申し訳ございませんが、よろしくお願いします。
回答2件
0
すみません、同様のアプリで$resourceについて疑問点がもう一つあったため再度質問させていただきました。
もし分かればよろしくお願いします。質問してばかりで大変恐縮です。
投稿2016/12/21 17:28
総合スコア38
0
ベストアンサー
その記事の作者です。
route.jsでmyApp、controller.jsでappというふたつのアプリケーションを定義しているので表示されません。
まずテンプレートが入る場所としてbodyタグの直下に
html
1<div ng-view></div>
を置きます。
controller.jsの
javascript
1var app = angular.module('app', ['ngResource']);
を消して、
route.jsの冒頭を
javascript
1var app = angular.module('app', ['ngResource', 'ngRoute']); 2app.config(['$routeProvider', function($routeProvider){ 3・・・
このように変更してアプリケーションをひとつにすると表示されます。
ひとつのページで複数のテンプレートを使いたい場合はUI Routerを使ってください。
https://ui-router.github.io/ng1/
投稿2016/12/21 00:52
編集2016/12/21 01:06
総合スコア1293
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。