angularAMD快速入门


ngularAMD是作者 marcoslin 使用 RequireJS + AngularJS开发的前端mvvm框架,因此你可以使用它快速创建一款Web App.他特别适合快速开发SPA应用,适当的和更简单的方式。

 

我们整合AngularJS和RequireJS不应该是复杂的,它不是angularAMD。在行动中看到它,检测本网站显示的情况下,关键功能。确保加载你最喜欢的开发工具看到按需加载*.js文件作为您切换标签。

快速入门

定义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文件

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

使用RequireJS定义语句创建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创建控制器

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

点击这里查看一个简单的示例,你可以在这里查看到详细的帮助文档。

安装

bower

bower install angularAMD

node

npm install angular-amd 

外链

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

使用

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

相关链接

文章转载自  angularAMD使用RequireJS和AngularJS快速构建WebApp


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM