ngularAMD是做者 marcoslin 使用 RequireJS + AngularJS開發的前端mvvm
框架,所以你能夠使用它快速建立一款Web App.他特別適合快速開發SPA
應用,適當的和更簡單的方式。javascript
咱們整合AngularJS和RequireJS不該該是複雜的,它不是angularAMD。在行動中看到它,檢測本網站顯示的狀況下,關鍵功能。確保加載你最喜歡的開發工具看到按需加載*.js
文件做爲您切換標籤。html
定義main.js
組件和依賴項:前端
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文件vue
<script data-main="js/main.js" src="require.js"></script>
使用RequireJS定義語句建立app.js
:java
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
建立控制器node
define(['app'], function (app) { app.controller('HomeCtrl', function ($scope) { $scope.message = "Message from HomeCtrl"; }); });
點擊這裏查看一個簡單的示例,你能夠在這裏查看到詳細的幫助文檔。git
bower install angularAMD
npm install angular-amd
//cdn.jsdelivr.net/angular.amd/0.2/angularAMD.min.js
咱們定義main.js
做爲項目的入口文件,在這裏能夠定義咱們的組件以及組件的依賴項;而後在deps
裏設置咱們的項目主文件 app.js
github
// 定義入口文件 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'] });
當全部的組件依賴項所有被定義完成,那麼app.js做爲 Angular 項目的入口文件,將開始執行啓動程序.web
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)
將會取代程序啓動。npm
經過使用 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
就能夠查看所作的修改了