Angular AMD 快速入门

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 就能够查看所作的修改了

中文文档

英文文档