03、AngularJs的模块与控制器

  大部分的应用程序都有一个主方法(main)来组织,实例化,启动应用程序。而AngularJs应用是没有主方法的,它是通过模块来声明应用应该如何启动的。同时,模块允许声明来描述应用中依赖关系,以及如何进行组装和启动:

  1、AngularJs的模块是组织业务的一个框架,在一个模块中定义多个服务。当引入一个模块的时候,就可以使用这个模块提供的一种或者多种服务。

  2、AngularJs本身的一个默认的模块是ng,ng模块提供了$http,$scope等等的服务。

  3、服务只是AngularJs提供的多种机制中的一种,其他的还有指令(directive),过滤器(filer)以及其他的配置信息。

  4、在AngularJs中,也可以在已有的模块中定义一个服务,也可以先定义一个模块,然后在新模块中定义新的服务。

  5、在AngularJs中,服务是需要显示的声明依赖(引入)关系的,让ng自动引入服务中。

  

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-app="ngApp">
<div ng-controller="firstController">
    <input type="text" ng-model="name"/>
    {{name}}
</div>
</body>
<script type="text/javascript" src="../public/javascripts/lib/angular.js"></script>

<script type="text/javascript">
    angular.module(‘ngApp‘, []).controller("firstController",function($scope){
        $scope.name="xixi";
    });
</script>

</html>

  上面是模块跟控制器的定义方式。我们使用augularjs的module方法定义一个模块 ngApp,中括号[]表示该模块没有依赖,如果有依赖的话会在中括号写上依赖的模块名字。

我们使用augularjs的controller方法定义一个控制器firstController。在html页面中ng-app="ngApp"是定义了这个模块的控制位置,而ng-controller="firstController"则是定义了控制器的作用区域。

  本篇中的示例代码运行的结果如下:

  技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。