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

来源：互联网发布：网络与新媒体和传播学编辑：程序博客网时间：2024/05/11 02:54

来自《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 = '无法加载笔记';  });});

Git源码

github地址：https://github.com/zgfang1993/notebook

1 0