热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

这是完成的效果 ,可以创建内容 并且传到后台 在localhost:3000端口关于node、angular的一个练手项目
这是index.html的内容

 
 


    
    
    
    
    
    


    
    

Note book

angular &&node &&bootstrap

Note

no notes

  • {{note.title}}
    {{note.date|date:'short'}}

{{content.title}}

editor

preview

这是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 = '无法加载';
    });

});

还有server.js等部分 这是我的码云 代码已经上传
https://gitee.com/cuteSeven/myPracticeForNodeAngular.git


推荐阅读
  • 本文介绍了MVP架构模式及其在国庆技术博客中的应用。MVP架构模式是一种演变自MVC架构的新模式,其中View和Model之间的通信通过Presenter进行。相比MVC架构,MVP架构将交互逻辑放在Presenter内部,而View直接从Model中读取数据而不是通过Controller。本文还探讨了MVP架构在国庆技术博客中的具体应用。 ... [详细]
  • Nginx使用(server参数配置)
    本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
  • 如何自行分析定位SAP BSP错误
    The“BSPtag”Imentionedintheblogtitlemeansforexamplethetagchtmlb:configCelleratorbelowwhichi ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文介绍了如何找到并终止在8080端口上运行的进程的方法,通过使用终端命令lsof -i :8080可以获取在该端口上运行的所有进程的输出,并使用kill命令终止指定进程的运行。 ... [详细]
  • 本文讨论了如何在不使用SearchBar display controller的情况下,单独使用SearchBar并捕获其textChange事件。作者介绍了实际状况,即左侧SliderMenu中的SearchBar需要在主页TableView中显示搜索结果。然后,作者提供了解决方案和步骤,帮助读者实现这一功能。 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 自动轮播,反转播放的ViewPagerAdapter的使用方法和效果展示
    本文介绍了如何使用自动轮播、反转播放的ViewPagerAdapter,并展示了其效果。该ViewPagerAdapter支持无限循环、触摸暂停、切换缩放等功能。同时提供了使用GIF.gif的示例和github地址。通过LoopFragmentPagerAdapter类的getActualCount、getActualItem和getActualPagerTitle方法可以实现自定义的循环效果和标题展示。 ... [详细]
  • Android开发实现的计时器功能示例
    本文分享了Android开发实现的计时器功能示例,包括效果图、布局和按钮的使用。通过使用Chronometer控件,可以实现计时器功能。该示例适用于Android平台,供开发者参考。 ... [详细]
  • 本文介绍了django中视图函数的使用方法,包括如何接收Web请求并返回Web响应,以及如何处理GET请求和POST请求。同时还介绍了urls.py和views.py文件的配置方式。 ... [详细]
  • iOS Swift中如何实现自动登录?
    本文介绍了在iOS Swift中如何实现自动登录的方法,包括使用故事板、SWRevealViewController等技术,以及解决用户注销后重新登录自动跳转到主页的问题。 ... [详细]
  • Asp.net Mvc Framework 七 (Filter及其执行顺序) 的应用示例
    本文介绍了在Asp.net Mvc中应用Filter功能进行登录判断、用户权限控制、输出缓存、防盗链、防蜘蛛、本地化设置等操作的示例,并解释了Filter的执行顺序。通过示例代码,详细说明了如何使用Filter来实现这些功能。 ... [详细]
  • Centos7搭建ELK(Elasticsearch、Logstash、Kibana)教程及注意事项
    本文介绍了在Centos7上搭建ELK(Elasticsearch、Logstash、Kibana)的详细步骤,包括下载安装包、安装Elasticsearch、创建用户、修改配置文件等。同时提供了使用华为镜像站下载安装包的方法,并强调了保证版本一致的重要性。 ... [详细]
author-avatar
黄河豚
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有