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的作用是 添加字符串修饰。

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

      程序的运行结果如下:

     
  • 相关阅读:
    宿主机无法访问CentOS7上Jenkins服务的解决办法
    415. Add Strings
    367. Valid Perfect Square
    326. Power of Three
    258. Add Digits
    231. Power of Two
    204. Count Primes
    202. Happy Number
    172. Factorial Trailing Zeroes
    171. Excel Sheet Column Number
  • 原文地址:https://www.cnblogs.com/feng18/p/5137169.html
Copyright © 2011-2022 走看看