ngularAMD是作者 marcoslin 使用 RequireJS ＋ AngularJS開發(fā)的前端mvvm框架,因此你可以使用它快速創(chuàng)建一款Web App.他特別適合快速開發(fā)SPA應(yīng)用，適當(dāng)?shù)暮透唵蔚姆绞健?/p>

?

我們整合AngularJS和RequireJS不應(yīng)該是復(fù)雜的，它不是angularAMD。在行動(dòng)中看到它，檢測本網(wǎng)站顯示的情況下，關(guān)鍵功能。確保加載你最喜歡的開發(fā)工具看到按需加載*.js文件作為您切換標(biāo)簽。

快速入門

定義main.js組件和依賴項(xiàng)：

require.config({ baseUrl: "js", paths: { 'angular': '.../angular.min', 'angular-route': '.../angular-route.min', 'angularAMD': '.../angularAMD.min' }, shim: { 'angularAMD': ['angular'], 'angular-route': ['angular'] }, deps: ['app'] });

引入RequireJS文件

<script data-main="js/main.js" src="require.js"></script>

使用RequireJS定義語句創(chuàng)建app.js：

define(['angularAMD', 'angular-route'], function (angularAMD) { var app = angular.module("webapp", ['ngRoute']); app.config(function ($routeProvider) { $routeProvider.when("/home", angularAMD.route({ templateUrl: 'views/home.html', controller: 'HomeCtrl', controllerUrl: 'ctrl/home' })) }); return angularAMD.bootstrap(app); });

使用app.register創(chuàng)建控制器

define(['app'], function (app) { app.controller('HomeCtrl', function ($scope) { $scope.message = "Message from HomeCtrl"; }); });

點(diǎn)擊這里查看一個(gè)簡單的示例，你可以在這里查看到詳細(xì)的幫助文檔。

安裝

bower

bower install angularAMD

node

npm install angular-amd

外鏈

//cdn.jsdelivr.net/angular.amd/0.2/angularAMD.min.js

使用

定義require.js 入口文件

我們定義main.js?作為項(xiàng)目的入口文件,在這里可以定義我們的組件以及組件的依賴項(xiàng);然后在deps里設(shè)置我們的項(xiàng)目主文件?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'] });

啟動(dòng) AngularJS

當(dāng)所有的組件依賴項(xiàng)全部被定義完成，那么app.js作為 Angular 項(xiàng)目的入口文件,將開始執(zhí)行啟動(dòng)程序.

define(['angularAMD'], function (angularAMD) { var app = angular.module(app_name, ['webapp']); ... // Setup app here. E.g.: run .config with $routeProvider return angularAMD.bootstrap(app); });

如果引導(dǎo)程序被觸發(fā)，那么原有?ng-app就不應(yīng)該被放置在?HTML中.angularAMD.bootstrap(app)將會(huì)取代程序啟動(dòng)。

配置路由

通過使用?angularAMD.route?我們可以動(dòng)態(tài)配置所需要加載的?controllers;

app.config(function ($routeProvider) { $routeProvider.when( "/home", angularAMD.route({ templateUrl: 'views/home.html', controller: 'HomeController', controllerUrl: './js/controller/home' }) ); });

angularAMD.route?主要目的是去設(shè)置 require.js 中?resolve?去進(jìn)行惰性加載?controller?以及?view,無論 你傳入什么樣的參數(shù)值進(jìn)去，都會(huì)被返回。

這樣訪問?index.html#/home?就可以查看所做的修改了

相關(guān)鏈接

• 項(xiàng)目地址：http://marcoslin.github.io/angularAMD/#/home

文章轉(zhuǎn)載自?angularAMD使用RequireJS和AngularJS快速構(gòu)建WebApp

總結(jié)

以上是生活随笔為你收集整理的angularAMD快速入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。