angularJS实战之小案例--notebook笔记本

最新推荐文章于 2024-10-06 12:31:10 发布

一只小前端

最新推荐文章于 2024-10-06 12:31:10 发布

阅读量5.8k

点赞数 3

分类专栏： AngularJS ionic node

本文链接：https://blog.csdn.net/sinat_21274091/article/details/52740100

版权

AngularJS ionic 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

node

3 篇文章 0 订阅

订阅专栏

来自《ionic实战》一书中的小案例，修改了一下，并写了详细注释。后台数据处理用的是node，为了展示效果数据存在json文件中，可暂时不看这部分。这个小案例虽然简单，但算是一个完整的案例了，前后端的数据都走通了，很适合新手学习。

效果图

编辑/新建页

查看页

项目结构

Start

首先要安装node

1.npm install 下载node包，会检查依赖表，从github上下载依赖（要先进入该文件目录再执行）
2.node server 启动服务  Ctrl+S 终止服务
3.在http://localhost:3000

重点源码分析

html

<!DOCTYPE html>
<html lang="en" ng-app="App">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>My Notebook</title>

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

  </head>

  <body>
    <!--nav-->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand">My Notebook</a>
        </div>
      </div>
    </nav>
    <!--container-->
    <div class="container" ng-controller="EditorController">
      <div class="row">
        <!--左侧目录栏-->
        <div class="col-sm-3">
          <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</button> My Notes
              </h3>
            </div>
            <div class="panel-body">
              <p ng-if="!notes.length">No notes</p> <!--没有笔记时显示-->
              <ul class="list-group">
                <li class="list-group-item" ng-repeat="note in notes" ng-click="view($index)" ng-class="{active: note.id == content.id}">{{note.title}}<br />
                <small>{{note.date | date:'short'}}</small> <!--日期-->
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--右侧显示编辑栏-->
        <div class="col-sm-9">
          <!--编辑区-->
          <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="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></textarea>
                </div>
                <div class="col-sm-6">
                  <h3>Preview</h3>
                  <div class="preview" markdown="{{content.content}}"></div>
                </div>
              </div>
            </div>
            <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>

angular.module('App')
.controller('EditorController', function ($scope, $http) {
  $scope.editing = true;

  $scope.view = function (index) {
    $scope.editing = false;
    $scope.content = $scope.notes[index];
  };

  $scope.create = function () {
    $scope.editing = true;
    $scope.content = {
      title: '',
      content: ''
    };
  };

  $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 = 'Could not upate note';
      });
    } else {
      $scope.content.id = Date.now();
      $http.post('/notes', $scope.content).success(function (data) {
        $scope.notes.push($scope.content);
        $scope.editing = false;
      }).error(function (err) {
        $scope.error = 'Could not create note';
      });
    }
  };

  $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 = 'Could not delete note';
    });
  };

  $http.get('/notes')
  .success(function (data) {  //$http.get()加载笔记
    $scope.notes = data; //返回数据赋值给$scope.notes
  })
  .error(function (err) {
    $scope.error = '无法加载笔记';
  });

});