Breeze/Angular 模板

  • 项目

作者 ：Mads Kristensen

微风/Angular MVC 模板由 Ward Bell 编写

下载 Breeze/Angular MVC 模板

AngularJS 是 Google 开放源代码库，用于生成单页应用程序 (SPA) 。 它提供数据绑定、依赖项注入和屏幕管理。 将其与 BreezeJS（另一个用于数据建模和数据管理的开放源代码库）相结合，你拥有出色的 HTML/JavaScript 客户端应用的基本要素。

Breeze/Angular SPA 模板是包含在 ASP.NET 和 Web 工具 2012.2 更新中的 KnockoutJS SPA 模板的变体。 如果拥有 Visual Studio，则会在 60 秒内启动并运行示例 SPA。

从表面上看，应用程序看起来与 KnockoutJS SPA 模板非常相似。 但在幕后却大不相同。 KnockoutJS 模板使用 Knockout 进行数据绑定，使用原始 AJAX 进行数据访问。 Breeze/Angular模板使用 Angular 进行数据绑定，使用 Breeze 进行数据访问。 这些库支持其他功能，包括页面导航和历史记录。

应用程序的“关于”页显示当前用户会话期间正在运行的事件日志，包括：

  • 寻呼。 请注意创建 Todo 控制器。
  • 远程查询和本地缓存查询。
  • 保存新的和修改的实体。
  • 更改在客户端上验证，因此用户可以在将更改提交到数据库之前更正错误。

此模板中还有更多内容需要探索，包括：

  • 动态加载 HTML 视图模板。
  • 通过Angular“指令”进行自定义数据绑定。
  • 模块化和依赖项注入。
  • 查询筛选、排序、分页、投影和包含相关实体。
  • 跨多个屏幕共享数据。
  • 将多个更改保存为单个事务。
  • 验证规则自动从服务器传播到 JavaScript 客户端。

现在就开始吧。

创建 Breeze/Angular模板项目

单击上面的“下载”按钮，下载并安装模板。 模板打包为 Visual Studio 扩展 (VSIX) 文件。 可能需要重启 Visual Studio。

在“ 模板 ”窗格中，选择“ 已安装的模板 ”，然后展开 “Visual C# ”节点。 在 “Visual C#”下，选择“ Web”。 在项目模板列表中，选择 “ASP.NET MVC 4 Web 应用程序”。 给该项目命名，然后单击“确定”。

在“新建项目”向导中，选择“微风Angular SPA”。

按 Ctrl-F5 在不调试的情况下生成并运行应用程序，或按 F5 以通过调试运行。

应用程序首次运行时，会显示登录屏幕。 单击“注册”链接，新页面将滑入视图，可在其中输入用户名和密码。 (登录和注册页面是使用 ASP.NET MVC.) 提交注册表单时，服务器会为帐户生成包含两项的 TodoList。 然后，它会用黄色纸条呈现给你。

现在你在 SPA 的土地上。 操作 Todos 时看到和体验的所有内容都借助 Knockout 和 Breeze 在客户端上呈现和管理。 以用户身份浏览应用... 但与开发人员的眼睛。 使用浏览器中的开发人员工具捕获网络流量。 (在 Internet Explorer 中：按 F12，选择“ 网络 ”选项卡，然后单击“ 开始捕获”。) 现在请尝试以下操作：

  • 添加新的 Todo 项。
  • 单击标签并编辑“Todo”项标题
  • 选中一个复选框以将项目标记为已完成。 请注意，文本框已禁用，因此标题不再可编辑。
  • 单击标签右侧的“x”。 该项将消失，并从数据库中删除。
  • 选取另一项并清除其标题。 你将收到一个验证错误，指出游戏是必需的。 短暂暂停后，将还原上一个游戏。
  • 键入一个可笑的长标题。 你将收到不同的验证错误，即游戏太长。
  • 单击“添加 Todo List”按钮。 上一个列表的左侧将显示一个新列表。
  • 使用 TodoList 游戏，触发其所需的和长度验证。
  • 单击标题文本框中以清除错误消息。
  • 单击右上角圆圈中的“x”可删除 TodoList 及其待办事项。
  • 单击右上角的“关于”链接以查看这些活动的日志。

验证逻辑由 Breeze 在客户端执行。 服务器模型类上的验证属性将传播到客户端，并在客户端与服务器联系之前自动执行。

查看网络流量。 请注意，当 Breeze 检测到错误时，没有调用服务器。 每个有效更改都会导致对“/api/Todo/SaveChanges”发出 POST 请求。 Breeze 将更改捆绑在一起，并将其作为单个请求发送到 Web API 控制器的方法 SaveChanges 。 这与 KnockoutJS SPA 模板不同，后者分别为每个项发出 PUT、POST 和 DELETE 请求。

此外，请注意，在 TodoList 和 About 页面之间切换时，没有网络流量。 这是因为查询已限制为本地 Breeze 缓存。

查看内部

此应用程序具有客户端和服务器端。 客户端堆栈由一个小 HTML 和“应用”文件夹中 (的应用程序 JavaScript 模块) 以及“Scripts”文件夹中 (的第三方 JavaScript 库) 组成。

UI 体系结构将视图的 HTML 小组件与控制器中的支持演示代码分开。 Angular数据绑定系统协调视图和控制器，以便每个视图和控制器可以在不深入了解另一个视图和控制器的情况下完成其工作。

控制器要求数据上下文获取并保存模型实体。 数据上下文将大部分工作委托给 Breeze，后者从 JSON 查询结果构造自跟踪模型对象。

服务器端堆栈由一些开发人员代码和三个主体 .NET 库组成：Web API、实体框架和 Breeze.NET。

基本体系结构与 KnockoutJS SPA 模板相同。 但是，实现要简单得多：DTO 已删除，并且大部分实体框架详细信息已委托给 Breeze.NET。

后续步骤

我们建议你浏览代码，在微风网站上的客户端和服务器堆栈的广泛讨论的指导下。

可以尝试使用 Breeze 客户端查询;添加一些筛选器和排序。 可以添加更多模型属性和更多实体，以便更好地体验端到端 SPA 开发。 当你对设计有信心时，可以拆解 Todo 功能并将其替换为你自己的功能。

祝你编码愉快！