65.9K
CodeProject 正在变化。 阅读更多。
Home

AngularJS // BootStrap / typescript / TypeLite / Font awesone / ASP.NET Web API 2

mbruchet
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.50/5 (4投票s)

2016年2月20日

CPOL

8分钟阅读

viewsIcon

22815

如何使用 AngularJS // BootStrap / typescript / TypeLite / Font awesone 创建一个多平台兼容的移动用户界面。

Components

jQuery - 版本 2.2

jQuery JavaScript 库是一个免费的、跨平台的库，旨在简化网页 HTML 代码中的客户端脚本编写。

Bootstrap v3.3.6

Bootstrap 是用于创建网站和 Web 应用程序的有用工具集。它包含 HTML 和 CSS 代码、表单、按钮、导航和其他交互式元素，以及可选的 JavaScript 扩展。

Police are-awesome

Font Awesome 是一个在线矢量图标工具包。它允许我们快速轻松地在自己的网站上添加图标。以下是一些图标：

AngularJS

AngularJS 是围绕关键概念构建的。要理解这一点，Shyam Seshadri 在创建 Angular 时并没有发明任何新东西。他只是明智地运用了当今 Web 开发世界中至关重要的概念和最佳实践。

  • MVC (模型-视图-控制器) 架构：如果您了解开发，您可能听说过这种架构，它本质上是在数据 (Model)、数据呈现 (View) 和可对数据执行的操作 (Controller) 之间进行严格分离。
  • 数据绑定：通过这个概念，您的 HTML 和 JavaScript 之间的连接将更加牢固。
  • .
  • 依赖注入：与 MVC 架构一样，当我们谈论依赖注入时，我们是在谈论所有开发中的一个领先概念。通过它，您开发的模块将不必担心实例化它们的依赖项。
  • 通过指令进行 DOM 操作：DOM 操作经常导致创建易于维护和易于测试的代码。我们将看到，使用 Angular，情况并非如此！

typescript

用于开发大规模 Web 应用程序的平台。它允许

  • 静态类型，允许为函数的返回值指定类型。
  • 类和作为接口的声明文件。
  • 支持 ECMAScript 6 的功能。
  • 与 JavaScript 完全兼容

TypeLite

TypeLite 是一个从 .NET 类生成 TypeScript 脚本的实用工具。

Books STPVideoPlayer.DataLayer

提供类以允许实体与 Web API 通信层进行通信。此库是通过 TypeLite 自动生成的。

stpvideoplayer

TypeScript 应用程序，用于生成所需的 AngularJS 应用程序。该应用程序包括

  • 指南 (HTML 界面)
  • 实现指令所需行为所需的控制器
  • DataService 服务，用于通过 API Web 通信层访问数据。

项目类型

文件夹树

  • Controllers：包含提供我们所需 API 服务的类的文件夹。
  • fonts 包含字体文件。
  • js / app：包含应用程序。
  • Scripts：包含基本脚本文件，如 angular、bootstrap、jquery。
  • Scripts / TypeLite.Net4.tt 包含我们映射所需的语句。

js / app

js / app 包含应用程序所需的所有 TypeScript 文件。它包含以下子文件夹：

  • Controllers：接收所有指南控制器。
  • Guidelines：AngularJS 下的指令，用于加载 HTML 模板，将其与控制器关联，并提供所需的基本行为。此文件夹将包含应用程序所需的所有指令。
  • Services 类，用于提供不同控制器可重用的服务。
  • Templates 包含我们的指令使用的 HTML 模板。
  • Interfaces 包含服务和控制器公开的接口。

最低限度实现

虽然 AngularJS 没有强制要求，但我们建议您拥有以下组件：

Scope 对象

一个允许在应用程序或 $rootScope 到控制器 $scope 之间共享数据的对象。Scope 不影响 DOM，并且可以附加到它。

  • 属性
  • 方法
  • 事件

应用程序作用域是唯一的 $rootScope 应用程序。有关更多信息：https://docs.angularjs.org/guide/scope

接口化 Scope

虽然不是强制性的，因为默认的 AngularJS 类型是 Scope: any，但建议通过接口对作用域进行强类型化。此接口将存储在 interfaces 目录中，并命名为 <Application>_iScope。

rootScope 中的默认变量
  • Url：web api 的 url。
  • $servicename：数据访问服务的实例。

文件引用 _references.ts

_references.ts 引用文件用于声明要导入到所有 ts 文件中的文件，而无需每次都声明。我们建议使用区域分隔您的文件引用。

#region and #endregion
// # Region "global"
...
// # Endregion "global"

数据访问服务

Interface <Application>_Idataservice.ts

建议使用接口来描述服务公开的方法。此接口将存储在 js/app/interfaces 中，并命名为 <Application>_I<Service>.ts。

服务类 <Application>_dataservice.ts

dataService.ts 服务提供数据访问。它为应用程序提供 CRUD 功能。

  • 如果有多个类，我们将命名如下：
    : <Application>_Dataservice_<Object>.ts
    例如：app_Dataservice_order.ts 用于订单管理，app_Dataservice_customer.ts 用于管理客户。
  • 否则：<Application>_dataservice.ts 例如 stpvideoplayer_dataservice.ts
事件

您可以使用 $rootScope 的 $broadcast 或 $emit 方法传播与 $rootScope 相关联的事件，请参阅上文。
我们将使用事件来允许 videoReceived 通知接收到视频。

从服务创建事件
  • $broadcast - 将事件传播到所有子作用域。
  • $emit - 在尊重作用域层级的情况下传播事件。
$apply 和 $digest

$apply 用于手动启动 $digest 循环。如果您直接在作用域中更改变量，则无需使用此方法。AngularJS 将直接检测到更改，因为它就是这样设计的。如果您在框架外更改变量，则不会。例如，jQuery 的 Ajax 请求中的更改将不会被框架检测到。这时就需要使用 $apply。$apply 启动框架的 $digest 循环，并允许集成由非框架管理的方法所做的更改。

调用 Web 服务 API

要调用 Web 服务 API，必须使用 **$http: ng.IHttpService** 服务。
该服务公开两个方法：

  • Get 用于调用 http get 方法。
  • Post 用于通过 http post 方法提交表单。

这两个方法都是异步调用的，并返回一个 IPromise。其中 T 是预期的类型。
$q 可用于确保与 DOM 的绑定接口能够正常进行同步。
使用方法如下：

在服务中
this.GetGeneric = (): ng.IPromise <Any> => {
var = this wsurl $ rootScope.url + "/ videoPlayerServer / GetGeneric".
var = $ q.defer deferred ();
return $ http.get (wsurl) .then (
function (response) {
deferred.resolve (response.data);
deferred.promise return;
}, Function (response) {
deferred.reject (response);
deferred.promise return;
});
};
在控制器中
this. $ stpvideoplayer_dataservice.GetGeneric (). then (function (result) {

$ Timeout (function () {
$ Scope. $ Apply (function () {
$ Scope.video = result;
$ $ RootScope broadcast ( "videochanged", result).
});
}, 0);

}, Function (error) {
$ Log.error (error.statusText);
});

指令容器

任何应用程序的基本指令，它不是 AngularJS 的强制要求，但我强烈建议您使用。这是在 index.html 文件中用于嵌入应用程序的指令。我建议将其与 HTML 模板文件 main.tpl.html 和控制器 <Application>mainCtrl.ts 关联。

**提示** 要订阅文档对象的 ready 事件并在文档准备就绪时执行方法，您可以：

angular.element(document).ready(function() {});


示例

var ctrl = this;

angular.element (document) .ready (function () {
ctrl.getnextvideo ();
});

要计算持续时间，jQuery 不提供任何功能，但您可以在应用程序中实现一个方法并将其附加到 $rootScope。

关联指令和控制器

在报告指令时，我们可以关联控制器和指令，为此我们使用 **controller** 属性。

关联控制器和模板

为了允许我们从 HTML 模板访问我们的控制器，我们需要给它一个别名，该别名将在我们的模板中使用。为此，我们使用 controllerAs 属性。

管理控制器和指令的作用域

我们可以告诉 AngularJS 是否为指令创建一个作用域。为此，我们将使用 **scope: true** 或 **scope: false**。
当要求创建一个新的作用域时，AngularJS 会创建一个继承自父级的新作用域。
有关更多信息：http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

扩展我们的主要对象

要为基本项（如通过 TypeLite 序列化的实体）添加某些属性，可能需要扩展我们的基本实体对象。AngularJS 为此提供了 extend 方法。此方法需要两个参数：

  • 属性名
  • 对重载的主题

使用示例

angular.extend(result, {duration: duration});

Application.ts

每个应用程序都必须有一个名为 **Application.ts** 的 ts 文件，该文件将引用要使用的服务、控制器和指令。

声明对象

按以下顺序声明对象：
 

  1. 服务
  2. 控制器 (Controller)
  3. 说明
run() 方法

Run() 块 - 在注入器创建后执行，用于启动应用程序。只有实例和常量可以注入到已利用的块中。这是为了防止在应用程序执行期间进一步进行系统配置。
我们可以将 Run() 块与 .NET 控制台程序的 main() 方法进行比较。

ng-switch：根据要显示的数据条件化其模板。

**switch-ng** 是一种条件结构，类型为 switch，可直接在模板中使用。它可以根据其评估的表达式的值显示特定元素。
为什么使用 ng-switch？

  • 根据用户的状态 (管理员/贡献者/访客) 提供不同的界面。
  • 但这并不能阻止它在服务器端进行免费检查。
  • 管理 Webapp 的不同显示模式 (全屏/紧凑模式/...)。
  • 总的来说，根据上下文呈现不同的视觉效果。

**用法** Ng-switch 以属性形式用于 div。
示例

<div ng-switch = "someVar">
<div ng-switch-when = "hey">
</ div>
<div ng-switch-when = "hi">
</ div>
<div ng-switch-default>
</ div>
</ div>

额外提示 有时可能需要在不向 DOM 添加 div 的情况下使用 switch-ng，在这种情况下，它可以直接用作组件。

 

  

<ng-switch on = "video.type">
<localplayer ng-switch-when = "local"> </ localplayer>
</ ng-switch>

 

© . All rights reserved.