• 使用requirejs来管理angularJS依赖示例

    有关requirejs是什么在这里不做解释，只用纯代码实战让你感受requirejs依赖管理的强大。

    一、首先要先下载require.js,然后整一个入口文件main.js包括了对其他js的引用。

    [javascript] view plain copy print?
    1. //配置依赖  
    2. require.config({  
    3.     paths: {  
    4.       "angular":"angular"  
    5.     },  
    6.     shim:{  
    7.         "angular": {  
    8.             "deps":[],  
    9.             "exports": "angular"  
    10.         }  
    11.     }  
    12.   });  
    13.   
    14. //定义模块  
    15. define([  
    16.     'angular',  
    17.     'controller'  
    18.     ], function (angular) {      
    19.     
    20.     angular.module('HelloModel', ['HelloCtrls']);  
    21.   
    22.     return {  
    23.         angularModules: [ 'HelloModel' ]  
    24.     };      
    25.       
    26. });  



    二、定义angular中的控制器模块controller.js

    [javascript] view plain copy print?
    1. define([ 'angular' ], function(angular) {  
    2.   
    3.     var componentCtrls = angular.module('HelloCtrls', []);  
    4.   
    5.      componentCtrls.controller('helloCtrl', [ '$scope', function($scope) {  
    6.         $scope.greet = "hello world";  
    7.       } ]);  
    8.   
    9.     return componentCtrls;  
    10. });  



    三、新建一个index.html文件测试

    [html] view plain copy print?
    1. <!DOCTYPE html>  
    2. <html ng-app="HelloModel">  
    3. <head>  
    4. <meta charset="UTF-8">  
    5. <title>Insert title here</title>  
    6.   
    7. <script src="js/require.js" data-main="js/main" defer async="true" ></script>  
    8. </head>  
    9. <body ng-controller="helloCtrl">  
    10.   
    11. {{greet}}  
    12.   
    13. </body>  
    14. </html>  



    四、文件组织结构

        

  • 相关阅读:
    控制器的设计与实现（五）
    综述（一）
    需求分析与数据库设计（二）
    对MVC架构简单概述设计（三）
    排球计分规则——记分员
    Java程序员必看书籍
    java面试必背知识点
    深入浅出UML
    从svn检出的项目缺少.project和.classpath文件解决办法
    打印函数 lodop
  • 原文地址：https://www.cnblogs.com/huangshikun/p/7149890.html
Copyright © 2020-2023  润新知