Created
March 16, 2014 13:15
-
-
Save arisetyo/9583035 to your computer and use it in GitHub Desktop.
MEAN tutorial, Part 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var meanApp = angular.module('meanApp', ['ngRoute', 'meanControllers']); | |
| meanApp.config(['$routeProvider', function($routeProvider) { | |
| $routeProvider | |
| .when('/', { | |
| controller:'ListCtrl', | |
| templateUrl:'mod_list.html' | |
| }) | |
| .when('/detail/:userId', { | |
| controller:'DetailCtrl', | |
| templateUrl:'mod_detail.html' | |
| }) | |
| .when('/create/', { | |
| controller:'InsertCtrl', | |
| templateUrl:'mod_insert.html' | |
| }) | |
| .otherwise({ | |
| redirectTo: '/' | |
| }); | |
| }]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var meanControllers = angular.module('meanControllers', []); | |
| //CONTROLLER FOR mod_list.html | |
| meanControllers.controller('ListCtrl', ['$scope', '$http', function ($scope, $http) { | |
| $http.get('/api/user/retrieveall/') | |
| .success(function(data){ | |
| $scope.users = data; | |
| }) | |
| .error(function(data) { | |
| console.log(data); | |
| }); | |
| }]); | |
| //CONTROLLER FOR mod_detail.html | |
| meanControllers.controller('DetailCtrl', ['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) { | |
| $http.get('/api/user/retrieveid/'+$routeParams.userId).success(function(data){ | |
| $scope.user = data; | |
| }); | |
| }]); | |
| //CONTROLLER FOR mod_insert.html | |
| meanControllers.controller('InsertCtrl', ['$scope', '$http', '$location', function($scope, $http, $location) { | |
| $scope.insertSubmit = function() { | |
| var data = { | |
| 'fullname' : $scope.newFullname, | |
| 'email' : $scope.newEmail, | |
| 'password' : $scope.newPassword, | |
| }; | |
| $http.post('/api/user/create/', data).success(function(){ | |
| $location.path("/"); | |
| }); | |
| } | |
| }]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html ng-app="meanApp"> | |
| <head> | |
| <script src="js/angular.js"></script> | |
| <script src="js/angular-route.js"></script> | |
| <script src="app.js"></script> | |
| <script src="controller.js"></script> | |
| <link href="bootstrap/css/bootstrap.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>Mean Stack</h2> | |
| <a class="btn btn-warning btn-mini" href="#/">Home</a> | |
| <a class="btn btn-warning btn-mini" href="#/create">Create</a> | |
| <div ng-view></div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h2>DETAIL</h2> | |
| <table width="100%" class="table table-hover"> | |
| <tr><td width="200px">Nama:</td><td>{{user.fullname}}</td></tr> | |
| <tr><td>Email:</td><td>{{user.email}}</td></tr> | |
| <tr><td>Password:</td><td>{{user.password}}</td></tr> | |
| </table> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <form role="form" class="form-horizontal"> | |
| <legend>Data Baru</legend> | |
| <div class="form-group"><label for="inputfullname" class="col-lg-4 control-label">Nama</label><div class="col-lg-8"><input type="text" class="form-control" id="inputfullname" placeholder="Nama" ng-model="newFullname"></div></div> | |
| <div class="form-group"><label for="inputemail" class="col-lg-4 control-label">Email</label><div class="col-lg-8"><input type="text" class="form-control" id="inputemail" placeholder="Email" ng-model="newEmail"></div></div> | |
| <div class="form-group"><label for="inputpassword" class="col-lg-4 control-label">Password</label><div class="col-lg-8"><input type="password" class="form-control" id="inputpassword" placeholder="Password" ng-model="newPassword"></div></div> | |
| <div class="form-group"> | |
| <div class="col-lg-offset-4 col-lg-8"> | |
| <button type="reset" class="btn btn-warning btn-large">Reset <b class="glyphicon glyphicon-refresh"></b></button> | |
| <button type="button" class="btn btn-default" ng-click="insertSubmit()">Submit »</button> | |
| </div> | |
| </div> | |
| </form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h2>LIST</h2> | |
| <table width="100%" class="table table-hover"> | |
| <thead> | |
| <tr><th width="50px">No</th><th>Data</th><th>Aksi</th></tr> | |
| </thead> | |
| <tbody> | |
| <tr ng-repeat="user in users | orderBy:'fullname'"> | |
| <td>{{$index+1}}</td> | |
| <td>Nama: <span>{{user.fullname}}</span></td> | |
| <td><a class="btn btn-primary btn-mini" href="#/detail/{{user._id}}">Detail <b class="glyphicon glyphicon-search"></b></a></td> | |
| </tr> | |
| </tbody> | |
| </table> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment