zoukankan      html  css  js  c++  java
  • 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"则是定义了控制器的作用区域。

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

      

  • 相关阅读:
    Show me the Template
    WPF中的Style(风格,样式)
    像苹果工具条一样平滑连续地缩放
    为窗体添加 "最大化","最小化","还原"等 事件
    [CHM]果壳中的XAML(XAML in a Nutshell)
    我的简约播放器
    很好玩的滚动效果
    项目经验分享(上)
    通过mongodb客户端samus代码研究解决问题
    记录数据库执行情况来分析数据库查询性能问题
  • 原文地址:https://www.cnblogs.com/happylinjie/p/4471651.html
Copyright © 2011-2022 走看看