Angular AMD 快速入门

最新推荐文章于 2024-08-26 08:12:28 发布

转载最新推荐文章于 2024-08-26 08:12:28 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000004617414

文章标签：

#javascript #前端 #git #ViewUI

AngularAMD是一款结合RequireJS和AngularJS的前端MVVM框架，适用于快速开发SPA应用。本文档介绍了如何使用AngularAMD来构建WebApp，包括安装、配置require.js入口文件及启动AngularJS等步骤。

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

Angular AMD 快速入门

angularAMD是作者@ marcoslin使用 RequireJS ＋ AngularJS开发的前端mvvm框架,因此你可以使用它快速创建一款Web App.它特别适合快速开发SPA应用。

参考文档

安装

bower

bower install angularAMD

node

npm install angular-amd

外链

//cdn.jsdelivr.net/angular.amd/0.2/angularAMD.min.js

使用种子

git clone  https://github.com/Vanthink-UED/AngularAMD-Tutorial

npm install

gulp

访问 http://localhost:8360/#/home

定义require.js 入口文件

我们定义main.js 作为项目的入口文件,在这里可以定义我们的组件以及组件的依赖项;然后在deps里设置我们的项目主文件
app.js

// 定义入口文件

require.config({
        baseUrl: "./js/",
        urlArgs:  'v=' + (new Date()).getTime() + Math.random() * 10000,
        paths: {
            'angular': './lib/angular.min',
            'angular-route': './lib/angular-route',
            'angularAMD': './lib/angularAMD.min',
            'ngload' : './lib/' + 'ngload.min',
            'ng-progress': './lib/ngprogress.min',
            'vued.cat': './directive/cat',
        },
        shim: {
                'angularAMD': ['angular'],
                'angular-route': ['angular'],
                'ng-progress': ['angular'],
        },
        deps: ['app']
});

启动 AngularJS

当所有的组件依赖项全部被定义完成，那么app.js作为 Angular 项目的入口文件,将开始执行启动程序.

define(['angularAMD'], function (angularAMD) {
    var app = angular.module(app_name, ['webapp']);
    ... // Setup app here. E.g.: run .config with $routeProvider
    return angularAMD.bootstrap(app);
});

如果引导程序被触发，那么原有 ng-app就不应该被放置在 HTML中. angularAMD.bootstrap(app)将会取代程序启动。

配置路由

通过使用 angularAMD.route 我们可以动态配置所需要加载的 controllers;

app.config(function ($routeProvider) {
    $routeProvider.when(
        "/home",
        angularAMD.route({
            templateUrl: 'views/home.html',
            controller: 'HomeController',
            controllerUrl: './js/controller/home'
        })
    );
});

angularAMD.route 主要目的是去设置 require.js 中 resolve 去进行惰性加载 controller 以及 view,无论
你传入什么样的参数值进去，都会被返回。

这样访问 index.html#/home 就可以查看所做的修改了

中文文档

英文文档