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
就可以查看所做的修改了
相关链接
posted on 2016-08-18 22:55 ilinux_one 阅读(2625) 评论(0) 编辑 收藏 举报