使用requirejs來管理angularJS依賴樣本,requirejsangularjs

來源:互聯網
上載者:User

使用requirejs來管理angularJS依賴樣本,requirejsangularjs

  有關requirejs是什麼在這裡不做解釋,只用純程式碼實戰讓你感受requirejs依賴管理的強大。

一、首先要先下載require.js,然後整一個入口檔案main.js包括了對其他js的引用。

//配置依賴require.config({    paths: {      "angular":"angular"    },    shim:{        "angular": {            "deps":[],            "exports": "angular"        }    }  });//定義模組define([    'angular',    'controller'    ], function (angular) {          angular.module('HelloModel', ['HelloCtrls']);    return {        angularModules: [ 'HelloModel' ]    };        });


二、定義angular中的控制器模組controller.js

define([ 'angular' ], function(angular) {    var componentCtrls = angular.module('HelloCtrls', []);     componentCtrls.controller('helloCtrl', [ '$scope', function($scope) {        $scope.greet = "hello world";      } ]);    return componentCtrls;});


三、建立一個index.html檔案測試

<!DOCTYPE html><html ng-app="HelloModel"><head><meta charset="UTF-8"><title>Insert title here</title><script src="js/require.js" data-main="js/main" defer async="true" ></script></head><body ng-controller="helloCtrl">{{greet}}</body></html>


四、檔案組織圖

    


       最簡單的demo樣本,有用你就點個贊吧!後期可能會修改,也歡迎大家提意見O(∩_∩)O~


聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.