AngularJs+RequireJs+angularAMD快速搭建项目步骤

最新推荐文章于 2018-09-05 00:00:00 发布

zhu jun~

最新推荐文章于 2018-09-05 00:00:00 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： angularjs requirejs angularAMD

本文链接：https://blog.youkuaiyun.com/zhujun_xiaoxin/article/details/79017566

本文详细介绍如何将AngularJS与RequireJS结合使用，包括配置RequireJS加载AngularJS及其相关插件，通过AngularAMD进行路由设置及控制器注册的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤一

在main.js中定义模块和依赖：

require.config({
    baseUrl: "js",    
    paths: {
        'angular': '.../angular.min',
        'angular-route': '.../angular-route.min',
        'angularAMD': '.../angularAMD.min'
    },
    shim: { 'angularAMD': ['angular'], 'angular-route': ['angular'] },
    deps: ['app']
});

在index.html中加载且仅加载require.js:

<head>
    <script data-main="js/main.js" src=".../require.js"></script>
</head>

步骤二

用requirejs的define语句创建app.js

define(['angularAMD', 'angular-route'], function (angularAMD) {
    var app = angular.module("webapp", ['ngRoute']);
    app.config(function ($routeProvider) {
        $routeProvider.when("/home", angularAMD.route({
            templateUrl: 'views/home.html', controller: 'HomeCtrl',
            controllerUrl: 'ctrl/home'
        }))
    });
    return angularAMD.bootstrap(app);
});

步骤三

用app.register方法创建controller:

define(['app'], function (app) {
    app.controller('HomeCtrl', function ($scope) {
        $scope.message = "Message from HomeCtrl"; 
    });
});