关于node、angular的一个练手项目

100 阅读 0 评论 66 点赞

我是靠谱客的博主冷酷小蝴蝶，这篇文章主要介绍关于node、angular的一个练手项目，现在分享给大家，希望可以做个参考。

这是完成的效果，可以创建内容并且传到后台在localhost：3000端口在这里插入图片描述
这是index.html的内容

复制代码

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>practice angular node</title>
    <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    
    <div class="jumbotron" style="text-align:center">
        <h1>Note book</h1>
        <p>angular &&node &&bootstrap</p>
    </div>
    
    <div ng-controller="EditorController">
        <div class="row">
            
            <div class="col-sm-4">
                <div class="panel panel-default">
                    
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <button class="btn btn-primary btn-xs pull-right" ng-click="create()">New note</button>Note
                        </h3>
                    </div>
                   
                   <div class="panel-body">
                        <p ng-if="!note.length">no notes</p>
                        <ul class="list-group">
                            <li class="list-group-item"ng-repeat="note in notes" ng-click="view($index)" ng-class="{actice:note.id==contend.id}">{{note.title}}<br>
                            <small>{{note.date|date:'short'}}</small>
                            </li>
                        </ul>
                   </div>
                </div>
            </div>
            
               <div class="col-sm-8">
                   
                   <div class="panel panel-default" ng-hide="editing">
                       <div class="panel-heading">
                           <h3 class="panel-title">{{content.title}}
                               <button class="btn btn-primary btn-xs pull-right" ng-click="editing=true">Edit</button>
                           </h3>
                       </div>
                       <div class="panel-body" markdown="{{content.content}}"></div>
                       <div class="panel-footer">{{content.date|date:'short'}}</div>
                   </div>
                   
                   <form name="editor" class="panel panel-default" ng-show="editing">
                       <div class="panel-heading">
                           <h3 class="panel-title">
                               <input type="text" class="form-control" ng-model="content.title" placeholder="WRITE YOUR NEW NOTE" required>
                           </h3>
                       </div>
                       
                       <div class="panel-body">
                           <div class="row">
                               <div class="col-sm-6">
                               <h3>editor</h3>
                               <textarea class="form-control editor"   rows="10" ng-model="content.content" placeholder="Note Content" required>

preview

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
 <!--write by sevencute 2018-11-8-->
 <!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>practice angular node</title>
    <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!--top-->
    <div class="jumbotron" style="text-align:center">
        <h1>Note book</h1>
        <p>angular &&node &&bootstrap</p>
    </div>
    <!--body-->
    <div ng-controller="EditorController">
        <div class="row">
            <!--left-->
            <div class="col-sm-4">
                <div class="panel panel-default">
                    <!--heading-->
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            <button class="btn btn-primary btn-xs pull-right" ng-click="create()">New note</button>Note
                        </h3>
                    </div>
                   <!--panel body-->
                   <div class="panel-body">
                        <p ng-if="!note.length">no notes</p>
                        <ul class="list-group">
                            <li class="list-group-item"ng-repeat="note in notes" ng-click="view($index)" ng-class="{actice:note.id==contend.id}">{{note.title}}<br>
                            <small>{{note.date|date:'short'}}</small>
                            </li>
                        </ul>
                   </div>
                </div>
            </div>
            <!--right-->
               <div class="col-sm-8">
                   <!--编辑区-->
                   <div class="panel panel-default" ng-hide="editing">
                       <div class="panel-heading">
                           <h3 class="panel-title">{{content.title}}
                               <button class="btn btn-primary btn-xs pull-right" ng-click="editing=true">Edit</button>
                           </h3>
                       </div>
                       <div class="panel-body" markdown="{{content.content}}"></div>
                       <div class="panel-footer">{{content.date|date:'short'}}</div>
                   </div>
                   <!--show-->
                   <form name="editor" class="panel panel-default" ng-show="editing">
                       <div class="panel-heading">
                           <h3 class="panel-title">
                               <input type="text" class="form-control" ng-model="content.title" placeholder="WRITE YOUR NEW NOTE" required>
                           </h3>
                       </div>
                       <!--body-->
                       <div class="panel-body">
                           <div class="row">
                               <div class="col-sm-6">
                               <h3>editor</h3>
                               <textarea class="form-control editor"   rows="10" ng-model="content.content" placeholder="Note Content" required></textarea>
                               </div>
                               <div class="col-sm-6">
                                   <h3>preview</h3>
                                   <div class="preview" markdown="{{content.content}}"></div>
                               </div>
                           </div>
                       </div>
                       <!--foot-->
                       <div class="panel-footer">
                           <button class="btn btn-primary" ng-click="save()" ng-disabled="editor.$invalid">Save</button>
                           <button class="btn btn-danger pull-right" ng-click="remove()"ng-if="content.id">Delete</button> 
                       </div>
                   </form>
               </div>
        </div>
    </div>
   <script src="./bower_components/angular/angular.min.js"></script>
   <script src="./bower_components/showdown/compressed/showdown.js"></script>
   <script src="./js/app.js"></script>
   <script src="./js/editor.js"></script>
</body>
</html>

这是edit.js的内容

复制代码

angular.module('App').controller('EditorController', function ($scope, $http) {
    $scope.editing = true;//初始化编辑界面隐藏
    $scope.view = function (index) {
        $scope.content = $scope.notes[index];//Notes是后台拉的notes.JSON
    };

$scope.create = function () {
        $scope.editing = true;
        $scope.content = {
            title: '',
            content: ''
        };
    };
    //save
    $scope.save = function () {
        $scope.content.date = new Date();
        if ($scope.content.id) {
            $http.put('/notes/' + $scope.content.id, $scope.content).success(function (data) {
                $scope.editing = false;
            }).error(function (err) {
                $scope.error = 'cannot update note';
            });
        } else {
            $scope.content.id = Date.now();//是否定义id
            $scope.post('/notes', $scope.content).success(function (data) {
                $scope.notes.push($scope.content);
                $scope.editing = false;
            }).error(function (err) {
                $scope.error = 'cannot updata note';
            });
        }
    };
    //remove
    $scope.remove = function () {
        $http.delete('/notes/' + $scope.content.id).success(function (data) {
            var found = -1;
            angular.forEach($scope.notes, function (note, index) {
                if (note.id === $scope.content.id) {
                    found = index;
                }
            });
            if (found >= 0) {
                $scope.notes.splice(found, 1);
            }
            $scope.content = {
                title: '',
                content: ''
            };
        }).error(function (err) {
            $scope.error = 'connot delete note'
        });
    };

$http.get('/notes')
    .success(function (data) {
        $scope.notes = data;
    })
    .error(function (err) {
        $scope.error = '无法加载';
    });

});

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
angular.module('App').controller('EditorController', function ($scope, $http) {
    $scope.editing = true;//初始化编辑界面隐藏
    $scope.view = function (index) {
        $scope.content = $scope.notes[index];//Notes是后台拉的notes.JSON
    };

    $scope.create = function () {
        $scope.editing = true;
        $scope.content = {
            title: '',
            content: ''
        };
    };
    //save
    $scope.save = function () {
        $scope.content.date = new Date();
        if ($scope.content.id) {
            $http.put('/notes/' + $scope.content.id, $scope.content).success(function (data) {
                $scope.editing = false;
            }).error(function (err) {
                $scope.error = 'cannot update note';
            });
        } else {
            $scope.content.id = Date.now();//是否定义id
            $scope.post('/notes', $scope.content).success(function (data) {
                $scope.notes.push($scope.content);
                $scope.editing = false;
            }).error(function (err) {
                $scope.error = 'cannot updata note';
            });
        }
    };
    //remove
    $scope.remove = function () {
        $http.delete('/notes/' + $scope.content.id).success(function (data) {
            var found = -1;
            angular.forEach($scope.notes, function (note, index) {
                if (note.id === $scope.content.id) {
                    found = index;
                }
            });
            if (found >= 0) {
                $scope.notes.splice(found, 1);
            }
            $scope.content = {
                title: '',
                content: ''
            };
        }).error(function (err) {
            $scope.error = 'connot delete note'
        });
    };

    $http.get('/notes')
    .success(function (data) {
        $scope.notes = data;
    })
    .error(function (err) {
        $scope.error = '无法加载';
    });

});