3.2 配置构建Angular应用——简单的笔记存储应用

  本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性。这个应用用到的特性有:

  1. 在JSON文件中存储笔记
  2. 展示、创建、修改和删除笔记
  3. 在笔记中使用Markdown格式
  4. 同步编辑和预览Markdown

  本应用已经包含了基础的HTML和CSS代码,还有一个用Node写的简单的RESTful服务器,用于管理笔记,这样我们就可以专注于Angular而不是API。我们学习的重点是如何把Angular加入其中并学习它的重要特性。

  3.2.1 获取项目文件

  首先,我们需要来获取一下该项目的文件,可以通过git来获取,执行如下命令:

    $ git clone https://github.com/ionic-in-action/chapter3.git(克隆chapter3仓库)

    $ cd chapter3(切换到chapter3目录)

    $ git checkout step1(检出step1标签)

  (如果你不想使用git,可以直接下载文件:https://github.com/ionic-in-action/chapter3/archive/step1.zip)

  3.2.2 启动开发服务器

  由于这个项目搭载的是RESTful服务器,需要你掌握一些NodeJS的知识。在项目server.js文件中可以看到一个简单的RESTful服务器,它是基于Express.js框架开发的,这样做的原因是你需要长期管理笔记,通过RESTful API可以让应用阅读、创建、编辑和删除列表中的笔记。服务器还可以通过HTTP请求把文件载入浏览器,ionic serve就是通过这种方式来运行你的Ionic应用的。

  需要注意的是:

  • 服务器运行在3000端口上;
  • 服务器会接受请求,根据URL和HTTP方法来修改列表中的笔记;
  • 服务器使用JSON文件来作为数据库(data/notes.json),你可以根据自己的情况使用其他的数据库;

  如果服务器不能运行,则说明你缺少一些必备的node包,解决方法,在终端中进入项目目录,运行$ npm install,npm会检查依赖列表并下载依赖。

  然后输入命令$ node server来启动服务器,如果需要终止服务器可以按Ctrl+S或者直接关闭命令窗口。

时间: 2024-12-14 23:32:31

3.2 配置构建Angular应用——简单的笔记存储应用的相关文章

零开始构建Angular项目----之路由配置 和 nav导航条

效果 接着上次 零开始构建Angular项目继续扯路由配置 和 nav导航条 1.增加about页面 about.component.html <!-- Docs nav ================================================== --> <div class="row"> <!-- <div class="col-md-3 "> <div class="bc-sid

android studio+grade配置构建

Android 构建系统编译应用资源和源代码,然后将它们打包成可供您测试.部署.签署和分发的 APK.android Studio 使用 Gradle 这一高级构建工具包来自动化执行和管理构建流程,同时也允许您定义灵活的自定义构建配置.每个构建配置均可自行定义一组代码和资源,同时对所有应用版本共有的部分加以重复利用.Android Plugin for Gradle 与这个构建工具包协作,共同提供专用于构建和测试 Android 应用的流程和可配置设置. Gradle 和 Android 插件独

OpenAI Gym 入门与提高(一) Gym环境构建与最简单的RL agent

Openai gym是一个用于开发和比较RL算法的工具包,与其他的数值计算库兼容,如tensorflow或者theano库.现在主要支持的是python语言,以后将支持其他语言.gym文档在https://gym.openai.com/docs. Openai gym包含2部分: 1.gym开源库:包含一个测试问题集,每个问题成为环境(environment),可以用于自己的RL算法开发.这些环境有共享的接口,允许用户设计通用的算法.其包含了deep mind 使用的Atari游戏测试床. 2.

在IIS中配置PHP运行环境简单步骤-注意事项

在IIS中配置PHP运行环境简单步骤 安装 IIS 7.0 打开 Control Panel\Programs\Programs and Features\Turn Windows features on or off, 在打开的对话框中勾选上这两个选项: 单击OK等待片刻, IIS就安装完成了. 安装 PHP 5.2.6 1. 下载: PHP 5.2.6 ;  其它版本的 PHP 下载. 2. 将压缩包解压, 放到一个目录中, 比如 D:\php 3. 将 php.ini-dist 复制到 C

关于目录分隔符和配置相对目录最简单明了的解惑,值得看一下

对程序了解一点都会知道目录分隔符,就是这个目录分隔符,我们是不是用着感觉很简单,可是遇到相对目录又很头疼呢?现在呢,看过我这篇文章你会豁然开朗的,觉得原来是这样的,废话不说进入正题. 我们最常用和目录相关的命令就是 cd 命令了,如 cd .cd /.cd..cd...cd./.cd../,其实这些命令都很简单,大家只要敲下都会通过观察结果而理解的.要明白理解这些命令不难,难是在离开这些命令,你可以随意去配置相对目录.要像随意配置,就要明白这些"/".".",带表着

构建了一个简单的时间序列数据集来说明索引功能

数据索引和选取 pandas对象中的轴标签信息有很多作用: 使用已知指示来确定数据(即提供元数据),这对于分析.可视化以及交互式控制台的显示都十分重要 使能够实现自动和显式的数据对齐 允许直观地获取和设置数据集的子集 在这一部分,我们将致力于最终的目的:即如何切片,切丁以及一般地获取和设置pandas对象的子集.文章将主要集中在Series和DataFrame上,因为它们潜力很大.希望未来在高维数据结构(包括panel)上投入更多的精力,尤其是在基于标签的高级索引方面. 提示:Python和bu

C# 构建XML(简单示例)

C# 构建XML的简单示例: 1 var pars = new Dictionary<string, string> 2 { 3 {"url","https://www.baidu.com/"}, 4 {"name","jack"}, 5 {"sex","0"}, 6 }; 7 StringWriter sw = new StringWriter(); 8 XmlTextWr

win2008系统:iis配置备份和还原简单操作

(2013-09-26 16:33:22) 转载▼   分类: 开发类 当我们电脑系统有大量的站点和虚拟目录的时候,电脑因为种种原因需要重做系统,那么重装系统后这些站点我们是否只能一个一个的添加,如果有成百上千个站点呢,任务量可想而知,本文将介绍如何备份和还原win7系统IIS下的站点,重装系统后配置IIS站点将是一件非常轻松的事.笔记本电脑用的WIn7,从买电脑到现在用了有一年多了,一年下来装的软件又多又杂,而且很多软件都被病毒吞噬过,严重的影响开机速度和使用,现在准备重装系统,还我一个清爽的

【超简单】MySQL存储引擎的选择与配置

[超简单]MySQL存储引擎的选择与配置 存储引擎简介 MySQL中的数据用各种不同的技术存储在文件(或内存)中.每一种技术都使用不同的存储机构,索引技巧,锁定水平并且最终提供广泛的不同的功能和能力.通过选择不同的技术,能够获得额外的速度或者功能,从而改善应用的整体功能.这些不同的技术以及配套的相关功能在MySQL中被称为存储引擎. 下面就为大家介绍两种MySQL中比较常见的两种存储引擎:MyISAM和InnoDB MyISAM存储引擎 MyISAM存储引擎是MySQL关系数据库系统5.5版本之