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 就能够检察所做的修改了

中文文档

英文文档