Angular JS解析（三）——MVC

来源：互联网发布：jpg转矢量图软件编辑：程序博客网时间：2024/05/21 17:53

之前我们了解到Angular支持MVC应用设计。在MVC设计模式中：

模板（Model）包含了一个代表应用当前状态的数据。

视图（Vidw）则是这个模板数据的直观显示。

控制器（Controller）则管理模板与视图之间的关系。

在创建模板（Model）时可以使用对象的属性或者原始类型来包含你的数据。对于模板变量没有任何的特殊之处。如果你想将一些文本呈现给用户，你可以利用字符串来进行处理，方式如下：

var someText = "You have started your journey.";

通过将HTML网页模板（template）的形式来形成视图，并且将模板（Model）中的数据融合在HTML网页模板中来将数据进行呈现。就像我们之前所用的那样，我们再DOM中插入一个占位符，并将该占位符的文本设置如下：

<p>{{ someText }}</p>

我们称之为双卷插值，因为他将新的文本内容插入到现存的模板（template）中。

控制器（Controller）就我们所编写的一些类或类型，用来告知Angular哪一个对象或元素组成了用户所用的模板（Model）。一般我们通过$scope对象来将这些类或类型传递给控制器（Controller）。如下面的一个控制器函数：

function TextController($scope){

$scope.someText = someText;

}

我们将上述分析代码组合在一起可得一个完整的Angular js应用，如下所示：

<html ng-app><body ng-controller="Text Controller"><p>{{someText }}</p>    <script><span style="white-space:pre"></span>src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">    </script>    <script><span style="white-space:pre"></span>function Text Controller($scope) {<span style="white-space:pre"></span>    $scope.someText = 'You have started your journey.';<span style="white-space:pre"></span>}    </script></body></html >

这样将在浏览器中得到相应的字符串显示：You hava started your journey.

尽管这个原始模型的模板在简单的案例中正常工作，但是对于绝大多数的应用而言，用户希望创建一个包含用户对象的模板（Model）对象。通过创建一个模板（Model）对象，并将字符串存放在该模板对象中，于是可以将上述代码函数改写如下：

var someText = "You hava started your journey. "

var messages = {};

messages.someText = someText;

function TextController($scope){

$scope.messages = message;

}

同时在模板（template）中利用该修改，如下所示：

<p>{{ message.someText }}</p>

在上述例子中我们再全局socpe中创建了一个控制器(Controller)。尽管这样做不会出现问题，但正确定义一个控制器方式是作为一个模块（Module）的一部分。这个模块为你应用的请他部分提供了一个命名空间。于是更新后的代码如下所示：

<html ng-app><body ng-controller="Text Controller"><p>{{someText }}</p>    <script>src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">    </script>    <script><span style="white-space:pre"></span>var myAppModule = angular.module("myApp",[]);<pre name="code" class="javascript">myAppModule.controller("TextController",<span style="font-family: Arial, Helvetica, sans-serif;">function ($scope) {</span>

$scope.someText = 'You have started your journey.';}); </script></body></html >

这样我们就告诉ng-app元素我们模块的名称——myApp。这样我们就可以直接利用Angular对象去创建一个名为myApp的模块，同时传递控制器函数到一个响应中，用这个响应来触发模块控制器函数。

注意，要记住Keeping things out of the global namespace is a good thing and that modules are the mechanism we use to do so.

0 0