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"则是定义了控制器的作用区域。

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

      

  • 相关阅读:
    Javascript加载执行问题探索
    CentOS搭建WordPress
    ORACLE创建表空间,用户及授权
    ApacheCommonsDbutils 学习笔记
    Android SSL BKS证书生成, 以及PFX与JKS证书的转换
    VirtualBox虚拟机CentOS中安装增强插件失败,解决方法
    ORACLE %TYPE与%ROWTYPE
    Java代码调用C#实现的Web服务
    常用的Git命令
    js手机号正则表达式验证
  • 原文地址:https://www.cnblogs.com/happylinjie/p/4471651.html
Copyright © 2011-2022 走看看