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

中文文檔

英文文檔