Angular AMD 快速入門

weixin_33807284發表於2016-03-16
Angular

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 就可以檢視所做的修改了

中文文件

英文文件

相關文章