-
Notifications
You must be signed in to change notification settings - Fork 0
/
mean-advance-crud
108 lines (85 loc) · 3.65 KB
/
mean-advance-crud
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
Put
in order to implement a put rest route. The followings are required to be done:
1. In model -> add a change method to GuestSchema
2. In index.js -> create a router.put method.
a) if use guests/:guest/change. Then require a middleware router.param
b) if use guests/:id/change. Then no need middleware but need to write functions such as:
{_id: req.params.id}
{$set: {key: req.body.key}}
3. In AngularApp.js -> Create a function o.change within app.factory
o.change = function(guest){
return $http.put('/guests/'+ guest._id + '/change')
}
4. In the same file -> Create a function within app.controller
$scope.changeGuest = function(guest){
guestsFactory.change(guest)
}
5. In index.ejs -> Create elements to bind the controller function
<span ng-click="ChangeGuest(guest)">+ </span>
Display One
in order to implement a seperate page to display a specific item from get, please do:
1. In index.js -> Create a router.get method
router.get('/guests/:id', function(req, res){
Guest.findOne({_id: req.params.id})
.exec(function(err, guest){
res.json(guest);
})
})
2. In angularApp -> Create a $stateProvider.state
.state('guestDetails',{
url: '/guests/{id}',
templateUrl: '/guest_details.html',
controller: 'GuestCtrl',
resolve:{ //note I call this guestb to show that this can be injected
guestb: ['$stateParams', 'guestsFactory', function($stateParams, guests){
return guests.get($stateParams.id);
}]
}
})
3. Create a new controller
app.controller('GuestCtrl',[
'$scope',
'$stateParams',
'guestsFactory',
'guestb',
function($scope, $stateParams, guestsFactory, guestb){
$scope.guest = guestb;
}
])
4. In index.ejs -> Create a link
<a href="#/guests/{{guest._id}}"> text </a>
5. In index.ejs -> Create another script
<script type = "text/ng-template" id= "/guest_details.html">
<input type="text" ng-model="guest.name">
</script>
Update
To update, here are the steps:
1. index.js -> Create a put route
it is important to use $set to identify the values to change.
2. angularApp -> add a update function under guestsFactory
it is important to give it the parameters guest-> for identifying the guest id and data1 -> for passing json object
3. Under GuestCtrl -> create a updateGuest function
again, passs the information from ng-model using $scope.guset.name
4. index.ejs -> use a form and bind it with ng-submit to the updateGuest()
Authentication
For authentication to work, use passport, passport-local, jsonwebtoken, jwt-express and crypto
1. Create User model with function setPassword(), validPassword(), generateJWT()
2. Express Routes
a) Under routes, set var auth = jwt({secret: 'SECRET', userProperty:'payload'}).
b) Call on auth as middleware. i.e. router.get('url', auth, function(){...})
c) use req.payload._id to find user.
//at this point, we still need a authInterceptor at the front end to pass the payload to the header.
3. Angular Ctrl and Routes
a) create an authFactory for register and login. When either are performed, save token under $window.localStorage['name-of-token']
b) Create an authInterceptor to pass Authorization into the header.
return {
headers: {Authorization: 'Bearer' + authFactory.getToken()}
}
c) Call upon the authInterceptor when performing crud so that the header will always contain the token.
// This complete the cycle between front end and backend.
UIB Modal
Common issue is faced when the angularjs is a outdated version.
1. link the angular-ui library in the html
2. inject uib modal into the controller.
3. open modal by using $uib.open({ ... parameters... })
4. Create a controller ModalInstanceCtrl to handle the logic inside the modal window.