zoukankan      html  css  js  c++  java
  • 【AngularJS】—— 7 模块化

    AngularJS有几大特性,比如:

      1 MVC

      2 模块化

      3 指令系统

      4 双向数据绑定

    那么本篇就来看看AngularJS的模块化。

      首先先说一下为什么要实现模块化:

      1 增加了模块的可重用性

      2 通过定义模块,实现加载顺序的自定义

      3 在单元测试中,不必加载所有的内容

      之前做的几个例子,控制器的代码直接写在script标签里面,这样声明的函数都是全局的,显然不是一个最好的选择。

      下面看看如何进行模块化:

            <script type="text/javascript">
                var myAppModule = angular.module('myApp',[]);
                
                myAppModule.filter('test',function(){
                    return function(name){
                        return 'hello, '+name+'!';
                    };
                });
    
                myAppModule.controller('myAppCtrl',['$scope',function($scope){
                    $scope.name='xingoo';
                }]);
            </script>

      首先,通过全局变量angular创建模块myAppModule

    angular.module('myApp',[]);

      第一个参数是绑定的应用app名称,这个app标识了页面中angular的入口点,类似main函数的作用。

      第二个参数[]里面标识了依赖的模块。

      下面看看如何使用模块吧!

    <!doctype html>
    <html ng-app="myApp">
        <head>
             <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
             <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
        </head>
        <body>
            <div ng-controller="myAppCtrl">
                {{name | test }}
            </div>
            <script type="text/javascript">
                var myAppModule = angular.module('myApp',[]);
                
                myAppModule.filter('test',function(){
                    return function(name){
                        return 'hello, '+name+'!';
                    };
                });
    
                myAppModule.controller('myAppCtrl',['$scope',function($scope){
                    $scope.name='xingoo';
                }]);
            </script>
        </body>
    </html>

      直接绑定myApp到ng-app上,就可以了。

      在script中,我们通过模块创建了一个filter和一个控制器。

      filter的作用是 添加字符串修饰。

      控制器的作用则是初始化变量。

      程序的运行结果如下:

     
  • 相关阅读:
    QT资料大全
    网络协议及tcp协议详解
    QT和Java的跨平台
    QString转char *
    QT删除整个文件夹
    QT获取linux下的当前用户名
    std::map自定义类型key
    QT程序自启动
    linux下通过命令连接wifi
    Rsync实现文件的同步
  • 原文地址:https://www.cnblogs.com/feng18/p/5137169.html
Copyright © 2011-2022 走看看