angular4实战--简单的投票系统

项目地址：https://github.com/xu1260114313/angular.git

完成后：

1.通过node及npm安装angular-cli:

    npm install -g @angular/cli

2.检测angular-cli是否安装成功：

    

如果出现以上情况，则证明angular-cli创建成功！

3.通过angular-cli新建项目,ng new voteWeb(项目名称)

4.运行项目：

扫描二维码关注公众号，回复： 196277 查看本文章

    1）首先通过cd命令进入刚才创建的项目目录中

    

    2）使用命令 ng serve， 启动项目

    

    3）结尾出现如下状况，项目启动成功

    

    4）在浏览器输入localhost:4200, 4200是项目默认端口

    

5.将src/app/app.component.html中的内容替换成如下：

6.通过npm安装semantic-ui组件，安装完成，在src/style.css文件中通过@import + 路径的方式导入：

7.回到浏览器，查看semantic-ui是否被正确引入，如果引入，则页面是以下样式：（左右两边会有留白）

8.修改src/app/app.component.html中的结构，改成以下结构：

其中，<input type="text" name="title" #newTitle > 告诉angular把这个<input>绑定到变量newTitle上，其效果是让变量newTitle可用于该视图的所有表达式中。而后又将newTitle，newLink两个变量作为参数，传给了addArticle（）函数中。（click）这种方式，相当于html标签中的onclick事件。只不过是（click）在angular中代表点击的元素，所触发的事件。

9.修改src/style.css文件，然后，返回浏览器，查看样式：

浏览器如下所示：

10.在app.component.html中添加按钮事件addArticle():

11.创建文章组件，通过ng generate component 组件名称：

12.在src/app/article/article.html中,编辑视图模板：

13.在src/app/article/article.component.ts文件中：

    在@component装饰器中写入host , 并将class类"row"绑定到app-article组件中，创建三个变量，分别为votes（number类型）、title（string类型）、link（string类型），在构造函数中给三个变量分别初始化：

：

14.将article文章组件渲染到视图上，回到app.component.html中，在紧邻form表单的底下，引入<app-article></app-article>视图模板：

15.在article.component.ts文件中，添加voteUp()、vote()函数：

voteUp()、voteDown()函数的返回值类型为false；是为了阻止点击时候的冒泡，防止页面进行跳转。

16.在article文件夹下新建一个article.model.ts文件，目的是为了将数据抽离出来：

17.在article.component.ts文件中导入Article类，并在下方设置一个变量继承Article这个类：

在这个类中，我们用article的变量继承了导入的这个Article类，并对Article类进行了实例化，以便可以使用它。所以，之前存在的votes变量现在变成了this.article上的votes。

18.修改article.component.html视图模板，因为之前存在自身上的votes变量变成了存在article上的votes，所以：

将之前的votes的前面加上article.votes。

19.因为在article.model.ts模型中定义中的数据被外部的article.component.ts中的方法修改了，所以我们修改一下，让它看的完美起来：

我们从这个模型的里面定义了voteUp()、voteDown()方法，这样在外部调用这两个方法，就可以让article.model.ts这个文件从内部操作。调用的方式如下：

20.定义多个文章列表，在app.component.ts：

定义一个articles变量，变量类型是Article类型的数组，然后给这个数组设置数据，然后，在对应的app.component.html中，首先将这个数据中的内容通过ngFor指令进行循环渲染出来，然后通过输入属性@Input（）传给它的子组件：

其中，articles是定义的变量，也就是类型为Article的数组，article是每次循环得到的Article的实例，就是new出来的东西，然后，第二个"article"为这个组件自身也就是app.component.html中每次for循环出的数据,也就是父组件中每次循环出来的实例的值，第一个[article]为子组件，也就是article.component.ts文件中对应的article变量。然后，将article.component.ts文件修改成如下：

其中，之前在构造函数constructor中定义的数据被删除了，因为我们现在是通过父组件将值传递到子组件，然后让子组件使用。在angular核心模块core中引入了Input这个常量，在类中我们用@Input article: Article使用了这个常量Input，现在这个article变量就是我们之前在app.component.html中前面的这个[article]。

21.增加投票链接功能：

    在addArticle()函数中，添加this.articles.unshift(new Article(title.value,link.value,0)),给数组添加Article实例，它就可以自动的渲染数据了。

ps：若其中有些地方不够详细，欢迎大家在下方评论。