Angular AMD 快速入門

Tychio 發布于2019-08-19 17:51 / 2410人閱讀

摘要：快速入門是作者使用開發的前端框架因此你可以使用它快速創建一款它特別適合快速開發應用。配置路由通過使用我們可以動態配置所需要加載的主要目的是去設置中去進行惰性加載以及無論你傳入什么樣的參數值進去，都會被返回。

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

中文文檔

英文文檔

GPU云服務器云服務器前端快速入門云計算快速入門 css快速入門 html快速入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78904.html

前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
讓 Angular 1.x 跟上時代的步伐

摘要：所以說的模塊機制沒有解決文件依賴關系和文件異步加載的問題。大部分團隊還是停留在第二第三階段，每個階段的實現都有很多種選擇。希望這篇文章能夠激起大家永遠保持積極向前追求完美代碼的心，不僅對自己的成長也會對公司帶來無限的價值。本篇技術博客來自有著化腐朽為神奇能力的，Worktile 技術牛人Web 總監 @徐海峰大神的分享~滿滿的干貨，你值得擁有！ Worktile 的前端構建之路 2...

李增田 2019-07-25 10:41 評論0 收藏0
前端面試，從入門到放棄

摘要：其中經歷了入門到放棄系列的火熱，想起了此題目，可直到其熱度褪去依然沒有開寫。再之前的實習也是上午面試下午入職的。這是前幾篇前端面試文章的結尾，是很多個月前就該寫下的事情。其中經歷了入門到放棄系列的火熱，想起了此題目，可直到其熱度褪去依然沒有開寫。不能再拖了，否則事情估計都快忘光了。面試過程依然是某金融集團的外包，這次換了一個外包公司。首先是電話面試，還是還是些常見的前端問題，自己...

fantix 2019-08-20 11:30 評論0 收藏0
vue.js快速入門

摘要：但是，今天我要寫一個快速入門，本人覺得還是有一點用處，因為，我不可能在一天之內精通某種東西，卻可以在一兩小時入門。不知道還要不要再來一個快速入門，發展得挺快，東西也像類似的全家。以前看到多少天學習系列，我都深感煩躁，短短幾天怎么可以精通，那是對于他們而言。但是，今天我要寫一個快速入門，本人覺得還是有一點用處，因為，我不可能在一天之內精通某種東西，卻可以在一兩小時入門。回到vue本身...

MkkHou 2019-08-20 10:45 評論0 收藏0