股票场内基金交易,没时间盯盘?

   
使用优财助手电脑客户端记录下您的股票买入卖出数据,能帮您时刻盯盘,会根据您记录的未售出买入价计算上涨或下跌幅度,及时弹框通知您。想知道如何使用?快点击左方视频观看了解吧~~下载地址:http://youcaizhushou.com

本实例代码可参考我的 Github angular2-quickstart

See It Run!(运行效果)

运行 在线例子 能查看本 Demo 的效果。

会在浏览器显示 My First Angular 2 App

Demo文件结构:

Demo文件结构

当然我们并不会在线编写很多 app 。跟着以下步骤来编写 Angular 2 app :

  1. 搭建我们的开发环境
  2. 编写 app 的根组件
  3. 引导它去控制主页面
  4. 编写主页面

Development Environment(开发环境)

Create a new project folder(新建项目文件夹)

创建文件夹 angular2-quickstart 。

Configure TypeScript(配置TypeScript)

我们必须要通过特别的设置来引导 TypeScript 编译器。

在 angular2-quickstart 目录下创建并编辑 tsconfig.json 文件,文件内容如下:

compilerOptions 中的 noImplicitAny 设置为 false 时,如果 TypeScript 编译器不能根据变量的使用来推断变量的类型时,该变量直接默认为 any 类型。
其他的键的属性可以查阅 TypeScript wiki

TypeScript Typings(TypeScript 类型)

在未来越来越多的 JavaScript 库会继承 JavaScript 环境并成为标准,因为 TypeScript 编译器不能像原生 JavaScript 代码一样被识别。TypeScript type definition files 网址可以查看这些功能。

在 angular2-quickstart 目录下创建并编辑 typings.json 文件,文件内容如下:

Add the libraries we need(添加依赖库)

推荐使用 npm 来获取和管理我们开发工具库。

没有 npm 可以参考我的另一篇博客。npm 安装

在 angular2-quickstart 目录下创建并编辑 package.json 文件,文件内容如下:

在命令行内转到 angular2-quickstart 目录下,并执行 npm install 命令安装依赖模块。
(可以忽略命令行中的警告)

全部环境设置已经完成,下面来编写一些代码。

Our First Angular Component(我们的第一个 Angular 组件)

组件是 Angular 中一个很基本的概念。一个组件管理一个展现信息给用户视图或者一个用来响应用户的模块。

从技术上来说,一个组件是由一个类构成,用来控制一个视图模板。当我们构建 Angular app 时将会编写很多组件。这是我们的第一个尝试所以我们尽可能保持它的简洁性。

Create an application source sub-folder(创建一个应用程序源代码的目录)

在 angular2-quickstart 目录下创建 app 文件夹。

Add the component file(添加组件文件)

在 angular2-quickstart/app 目录下创建并编辑 app.component.ts 文件,文件内容如下:

让我们来 review 这个文件里面的细节,从定义一个最基础的类开始。

The Component class(组件类)

我们的组件名叫 AppComponent ,现在这个组件类没有任何功能因为在这个 QuickStart 中我们不需要这个类去做任何事,当我们编写真正的应用时,可以继承该组件。

Modules(模块)

Angular 应用是模块化的。它包含很多目的不同的文件。

很多应用 export 一样东西来作为组件。我们的 app.component 文件 export AppComponent 组件。

通常文件名就是模块名(没有继承关系),’app.component’ 就是我们的第一个模块名。

一个复杂的应用会从 AppComponent 派生出一个子组件,来生成一棵继承关系的树。一个更复杂的 app 会包含更多的文件和模块,至少和它所包含的组件一样多。

我们编写的 Demo 并不复杂;我们只需要一个组件。在这个 Demo 里由一个模块来负责最基本的事件组织规则。

当我们需要引用别的模块时,我们可以 import it 。

我们通过这行代码从当前目录里面导入 AppComponent 模块。

Angular 也是模块化的。它是一个模块库。每个模块自身由几个模块来构成,与起重要作用的模块有关。

Component Metadata(组件元数据)

Angular 组件由元数据组成,Angular 需要元数据来了解怎样去构建视图和与应用其他部分相互作用。

我们通过符号 @ 来修饰和引用上面定义的组件类。

Angular 自身已经通过 Component 函数定义了一个组件元数据。我们通过 import 从 Angular 基础库 angular2/core 来接入这个函数。

@Component 提示 Angular 这个类是一个 Angular 组件。
selector 指定一个 CSS 选择器来寻找 index.html 文件中的 my-app 元素,不管 my-app 元素是否存在,Angular 都会创建一个 AppComponent 组件类的实例。
template 的内容会替换 my-app 元素中的内容。

Bootstrap it(引导 AppComponent )

在 angular2-quickstart/app 目录下创建并编辑 main.ts 文件,文件内容如下:

我们需要两件事来启动我们的应用程序:
1. Angular 浏览器的 bootstrap 函数
2. 我们刚编写的根组件 app.component

我们全部导入。当我们调用 bootstrap 函数,会通过根组件类型来进入我们编写的 AppComponent 组件。

Add the index.html(添加 index.html 文件)

Angular 会通过一个特殊的路径执行 indes.html 文件来显示我们的应用。

在 angular2-quickstart 目录下创建并编辑 index.html 文件,文件内容如下:

这个文件由三个主要的部分组成:
1. 加载我们需要的脚本文件。
2. 我们配置了 System, 然后通过它来导入和加载我们刚刚编写的 main 启动文件。
3. 在 标记中添加了 , 这就是我们应用执行的位置!

当 Angular 调用 main.ts 中的 bootstrap 函数时,它会读取 AppComponent 中的元数据,找到 my-app 选择器,定位在 my-app 元素标签上,然后载入我们的应用在这个标签上。

Compile and run!(运行)

在命令行内转到 angular2-quickstart 目录下,并执行以下命令:

这行命令会打开两个并行的 node 进程:
1. 观测模式的 TypeScript 编译器
2. 一个名叫 lite-server 的静态服务器来通过浏览器打开 index.html 文件,当应用文件更改时刷新浏览器。

这时,浏览器会显示 My First Angular 2 App 。

Make some changes(更改内容)

我们可以更改 app.component.ts 文件中的 template 键,来显示不一样的东西。

TypeScript 编译器和 lite-server 正在处于观测状态。它们会探测这些改变,重新编译 TypeScript 到 JavaScript 文件,刷新浏览器来显示修改后的信息。

   

想获得去掉 5 元限制的证券账户吗?

证券交易股票基金的佣金,不足 5 元会按照 5 元收取。比如交易 1000 元的股票,按照普遍的证券佣金手续费率万 2.5,其交易佣金为 0.25 元,小于 5 元,实际会收取佣金 5 元,买卖两次需要支付 10 元佣金成本,1% 的利润就这样没了。

如果您想去掉最低交易佣金 5 元限制,使用微信扫描左边小程序二维码,访问微信小程序「优财助手」,点击底部菜单「福利」,阅读文章「通过优财开证券账户无最低交易佣金 5 元限制」,按照文章步骤操作即可获得免 5 元证券账户,股票基金交易手续费率万 2.5。

请注意,一定要按照文章描述严格操作,如错误开户是无法获得免 5 元证券账户的。

发表评论

电子邮件地址不会被公开。 必填项已用*标注