Angular 基础 - 第 3 部分

大家好，由于我最近忙于搬到新城市并适应新环境，所以耽搁了，这里是 Angular 基础的下一部分。

到目前为止，我们对 Angular 的注入方式以及如何从 Angular 控制器将数据传递到视图有了一个很好的了解。 让我们继续看看如何使用 MVC 从 Angular 控制器获取/发布数据。

为了解释一下我们要做什么，我们将创建一个员工列表并以表格形式显示，我们还将创建一个新的 student。

1. 首先，让我们添加一个名为 student 的新类。由于我们正在使用 MVC 模板，让我们将此类添加到 Models 文件夹下，并添加一些属性。 下面的代码片段显示了我的类现在的样子。

   

2. 接下来，让我们创建一个新的控制器，并将其命名为 StudentController。只需右键单击 controller 文件夹，选择 添加->控制器。 如果您使用的是 VS 2015，您将获得多个选项，例如空控制器、带有读/写操作的控制器等。只需选择空控制器，在接下来的博客中，我们将看到如何使用这些模板。
3. 将控制器命名为 StudentController，然后单击确定，现在您有了您的控制器，并且如果您注意到，在 Views 文件夹下创建了一个新的 Student 文件夹，如果没有，让我们创建一个新的文件夹。 下面是我们的解决方案现在的结构

   

4. 现在我们大多数人都熟悉 N 层架构，我遵循相同的架构，但为了简单起见，我们在这里不使用 N 层架构，但随着我们继续前进并实现 DataAccess 层，将使用相同的架构。 目前，让我们添加一个名为 Services 的文件夹，它将充当我们的虚拟 DataAccesss 层。
5. 右键单击解决方案并选择 添加-> 新建文件夹， 并将其命名为 Service，让我们添加一个名为 StudentService. 的新文件。
6. 现在让我们在这个服务下添加一些方法，我们将有 2 个方法：GetStudentList() 和 CreateNewStudent()。 这就是您的服务现在的样子，由于这是一个虚拟服务，我们手动传递数据。

   

7. 让我们在我们的 StudentController 中使用该服务，我们已经创建了它，我们将在 StudentController 中创建 2 个操作，GetStudent() 和 SaveStudentData()。
8. 为了获取数据，我们将添加一个新方法 GetStudentList()，它将返回 jsondata，在其中我们将调用服务的 GetStudentList() 方法。 为了保存数据，我们将有一个操作方法 SaveStudentData()，它将调用服务的 CreateNewStudent() 方法，并将返回 employeeid。

   

9. 现在我们将在我们的视图上显示 student 数据，在 student 文件夹中添加一个名为 Index.cshtml 的视图，要添加，右键单击 student 文件夹 添加->视图。
10. 让我们从我们创建的 angularController 调用我们的操作，我们将使用 Angular 的 $http 服务。 我们将在 load 事件上调用相同的服务。 我们将把值分配给名为 StudentList 的作用域变量。 已经使用过 $ajax 的开发人员，它类似于我们在 Jquery 中调用我们的 API 或控制器时所做的事情，下面是代码。

    

11. 如果我们注意到，类似于 $ajax，它会返回成功和错误，在错误中，我们有一个作用域变量，我们将在其中设置 error= true，我们在我们的索引视图上放置了一个 div，以便在发生错误时显示它。 下面是我们的视图现在的样子

    

12. 现在让我们按 F5 键查看结果。

    

13. 太棒了，我们已经显示了我们的数据，现在让我们继续添加一个新记录。 首先，我们将添加一个名为 AddStudent.cshtml 的视图，右键单击 Student 文件夹 添加->视图。
14. 为了显示视图，我们还将添加一个操作来呈现我们的视图。 下面是 action 方法。

    

15. 现在，我们将在 Index 页面上添加一个链接，将用户重定向到 AddStudent 视图。 在最后一行添加此代码 @Html.ActionLink(“添加学生”, “AddStudent”)，它将创建一个链接。 此外，让我们修改 AddStudent 视图以创建一个表单。

    

16. 现在让我们按 F5 键查看结果。

    

    

     

17. 如果您注意到，我们使用了 ng-click，如果您正在思考它的含义，它是一个指令，您可以在单击按钮事件触发时触发该函数。 并且 ng-model 是一个指令，我们可以在其中将数据从视图传递到控制器。 让我们也修改我们的视图，并添加成功和错误 div 以在成功和错误的情况下显示。

    

18. 现在让我们在我们的 angular 控制器中编写代码来保存它。

    

19. 现在让我们按 F5 键并查看结果。 保存数据后，我们将得到这样的结果

    

我们现在已经完成了基础知识。 如果您有任何疑问或问题，可以通过电子邮件与我联系，地址是 santosh.yadav198613@gmail.com。

在我的下一篇博客中，我们将进入高级级别，我们将使用 EF 6.0 和 HTML 页面而不是 Razor 视图。 我们还将使用 ui-router 涵盖路由。

请继续阅读我的博客以获取更多信息，请分享和点赞。