AngularJS教程–第1课

最新推荐文章于 2023-07-22 02:39:11 发布

cukeoumuqian0413

最新推荐文章于 2023-07-22 02:39:11 发布

阅读量167

点赞数

文章标签： java python javascript js mvc ViewUI

原文链接：https://www.script-tutorials.com/angularjs-tutorial-lesson-1/

版权

AngularJS is one of the fastest growing javascript framework. And it is not surprising – we may use MVC and MVVM design patterns that are essential to build modern websites at the present time. This framework let us use such features as data binding, controller, deep linking, form validation, communication with server, directives, localization and so on. Today I decided to start a new series of articles on AngularJS. This is our first lesson.

AngularJS是发展最快的javascript框架之一。不足为奇–我们可能会使用MVC和MVVM设计模式，这对于当前构建现代网站至关重要。这个框架让我们使用诸如数据绑定，控制器，深层链接，表单验证，与服务器通信，指令，本地化等功能。今天，我决定在AngularJS上开始一系列新文章。这是我们的第一课。

AngularJS的MVC和MVVM设计模式 (MVC and MVVM design patterns with AngularJS)

MVC –模型-视图-控制器 (MVC – Model-View-Controller)

The Model-View-Controller design pattern defines objects in an application one of three roles: Model, View, or Controller. The pattern defines not only the roles objects play in the web application, it defines the way objects communicate with each other. Each of the three types of objects is separated from the others by abstract boundaries with objects of the other types across those boundaries. In short: the Model is data, the View represents this data, the Controller is link between the Model and View.

“模型-视图-控制器”设计模式在应用程序中定义对象，这是三个角色之一：模型，视图或控制器。该模式不仅定义了对象在Web应用程序中扮演的角色，还定义了对象之间进行通信的方式。三种类型的对象中的每一种都通过抽象边界与其他类型的对象分开，抽象边界跨越这些边界。简而言之：模型是数据，视图代表此数据，控制器是模型和视图之间的链接。

MVVM –模型－视图－视图模型 (MVVM – Model-View-View Model)

MVVM is refinement of the MVC design and the ViewModel in MVVM is used for simplification of Presentation Separation. In the MVVM, the logic is stored in the presenter and the View is completely isolated from the Model. While the presenter isn’t aware of the View, the View is aware of the presenter – the presenter in MVVM is used to represent an abstract view of the user interface. A passive view means that the View doesn’t have any knowledge of the Model. In the MVVM design pattern, the View is active and contains behaviors, events and data binding information. Note that the view in MVVM is not responsible for managing the state information – the view is rather synchronized with the View Model. The ViewModel in MVVM is responsible for presentation separation and exposes methods and commands to manage the state of a view and manipulate the Model.

MVVM是MVC设计的改进，而MVVM中的ViewModel用于简化表示分离。在MVVM中，逻辑存储在演示者中，视图与模型完全隔离。当演示者不知道该视图时，该视图也知道该演示者– MVVM中的演示者用于表示用户界面的抽象视图。被动视图意味着视图不了解模型。在MVVM设计模式中，视图处于活动状态，并且包含行为，事件和数据绑定信息。请注意，MVVM中的视图不负责管理状态信息-该视图与视图模型同步。 MVVM中的ViewModel负责表示分离，并公开用于管理视图状态和操纵Model的方法和命令。

从理论到实践 (From theory to practice)

In order to easier understand the material, many people prefer to study practical tasks in parallel with the theory. We will do also. I also want to note that AngularJS is often used in conjunction with Bootstrap framework. The reason is that native AngularJS directives are based on Bootstrap’s markup and CSS. As a result no dependency on jQuery or Bootstrap’s JavaScript is required. At the same time, we can easily create the html markup for our pages using the Bootstrap.

为了更容易理解材料，许多人喜欢与理论并行地研究实际任务。我们也会做。我还想指出，AngularJS通常与Bootstrap框架结合使用。原因是本地AngularJS指令基于Bootstrap的标记和CSS。因此，不需要依赖jQuery或BootstrapJavaScript。同时，我们可以使用Bootstrap轻松为页面创建html标记。

AngularJS安装 (AngularJS installation)

In order to use the AngularJS in our web application, first we need to download it (angular.min.js (v1.5.0)). Next, we’ll just connect this library in our code:

为了在我们的Web应用程序中使用AngularJS，首先我们需要下载它( angular.min.js(v1.5.0) )。接下来，我们将在我们的代码中连接此库：


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
or
<script src="js/angular.min.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
or
<script src="js/angular.min.js"></script>

AngularJS初始化 (AngularJS initialization)

ngApp directive is used to declare a root of our angular application. It can be placed in any HTML tag of BODY, in case if we need only a part of our page be considered as Angular-application. But usually we declare it in HTML tag:

ngApp指令用于声明我们的角度应用程序的根。可以将其放在BODY的任何HTML标记中，以防万一我们只需要将页面的一部分视为Angular应用程序。但是通常我们在HTML标签中声明它：


<html ng-app>


<html ng-app>

This initialization is called – automatic initialization. After the page is loaded, Angular looks for the ngApp directive (which indicates root of your application). If the ngApp directive is found then Angular will: load the module associated with the directive, create the application injector and compile the DOM treating the ngApp directive as the root of the compilation. In addition to automatic initialization, there is also manual initialization (in case if you need to have more control over the initialization process). Below is example of manual initialization:

这种初始化称为–自动初始化。加载页面后，Angular查找ngApp指令(指示您的应用程序的根目录)。如果找到了ngApp指令，则Angular将：加载与该指令关联的模块，创建应用程序注入程序，并编译ngApp指令作为编译根。除了自动初始化之外，还有手动初始化(以防您需要对初始化过程进行更多控制)。以下是手动初始化的示例：


<!doctype html>
<html>
<body>
  <div ng-controller="ExampleController">
    10 + 5 = {{exampleSum}}
  </div>
  <script src="js/angular.min.js"></script>
  <script>
    angular.module('exampleApplication', [])
      .controller('ExampleController', ['$scope', function ($scope) {
        $scope.exampleSum = 10 + 5;
      }]);
    angular.element(document).ready(function() {
      angular.bootstrap(document, ['exampleApplication']);
    });
  </script>
</body>
</html>


<!doctype html>
<html>
<body>
  <div ng-controller="ExampleController">
    10 + 5 = {{exampleSum}}
  </div>
  <script src="js/angular.min.js"></script>
  <script>
    angular.module('exampleApplication', [])
      .controller('ExampleController', ['$scope', function ($scope) {
        $scope.exampleSum = 10 + 5;
      }]);
    angular.element(document).ready(function() {
      angular.bootstrap(document, ['exampleApplication']);
    });
  </script>
</body>
</html>

We recommend to link all javascript libraries in the end of page, it decreases page load time, because HTML loading is not blocked by loading of the javascript files. Now, after the initialization, we can write more complex example:

我们建议在页面末尾链接所有javascript库，因为它不会由于加载javascript文件而阻止HTML加载，所以可以减少页面加载时间。现在，在初始化之后，我们可以编写更复杂的示例：


<!doctype html>
<html lang="en" ng-app>
<head>
  <title>AngularJS Example 1 | Script Tutorials</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
      <h1>AngularJS Example 1</h1>
    </div>
    <p class="lead">Concatenation: {{'Hello' + 'World '+'!'}}</p>
    <p class="lead">Math actions: {{10 + 5 - 7}}</p>
    <p class="lead">List:</p>
    <ul>
      <li ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">{{i}}</li>
    </ul>
    <p class="lead">Name: <input ng-model="name" type="text"/> = {{name}}</p>
  </div>
  <script src="js/angular.min.js"></script>
</body>
</html>


<!doctype html>
<html lang="en" ng-app>
<head>
  <title>AngularJS Example 1 | Script Tutorials</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
      <h1>AngularJS Example 1</h1>
    </div>
    <p class="lead">Concatenation: {{'Hello' + 'World '+'!'}}</p>
    <p class="lead">Math actions: {{10 + 5 - 7}}</p>
    <p class="lead">List:</p>
    <ul>
      <li ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">{{i}}</li>
    </ul>
    <p class="lead">Name: <input ng-model="name" type="text"/> = {{name}}</p>
  </div>
  <script src="js/angular.min.js"></script>
</body>
</html>

In this example, we have demonstrated the basic uses of constants and variables. As you can see, we can use basic actions like concatenation and math actions. All Angular expressions are usually wrapped by double-curlies. The ng-repeat="... in ..." attribute is Angular repeater directive. The repeater tells Angular to do something for each element of the list. Lastly, there is example of basic data binding: data-binding in Angular apps is the automatic synchronization of data between the model and view components. In our example, it will repeat all the text you entered.

在此示例中，我们演示了常量和变量的基本用法。如您所见，我们可以使用基本操作，例如串联和数学操作。通常所有的Angular表达式都由double-curlies包裹。 ng-repeat="... in ..."属性是Angular转发器指令。中继器告诉Angular对列表的每个元素进行操作。最后，有一个基本数据绑定的示例：Angular应用程序中的数据绑定是模型和视图组件之间的数据自动同步。在我们的示例中，它将重复您输入的所有文本。

In the next tutorial we will continue to explore of AngularJS.

在下一个教程中，我们将继续探索AngularJS。