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
就可以查看所做的修改了
相关链接
- 项目地址:http://marcoslin.github.io/angularAMD/#/home
angularAMD快速入门相关推荐
- Shiro第一个程序:官方快速入门程序Qucickstart详解教程
目录 一.下载解压 二.第一个Shiro程序 1. 导入依赖 2. 配置shiro配置文件 3. Quickstart.java 4. 启动测试 三.shiro.ini分析 四.Quickstart. ...
- 计算机入门新人必学,异世修真人怎么玩?新手快速入门必备技巧
异世修真人怎么快速入门?最近新出来的一款文字修仙游戏,很多萌新不知道怎么玩?进小编给大家带来了游戏新手快速入门技巧攻略,希望可以帮到大家. 新手快速入门攻略 1.开局出来往下找婆婆,交互给点钱,旁边有 ...
- Spring Boot 2 快速教程:WebFlux 快速入门(二)
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘 ...
- Apache Hive 快速入门 (CentOS 7.3 + Hadoop-2.8 + Hive-2.1.1)
2019独角兽企业重金招聘Python工程师标准>>> 本文节选自<Netkiller Database 手札> 第 63 章 Apache Hive 目录 63.1. ...
- 《iOS9开发快速入门》——导读
本节书摘来自异步社区<iOS9开发快速入门>一书中的目录,作者 刘丽霞 , 邱晓华,更多章节内容可以访问云栖社区"异步社区"公众号查看 目 录 前 言 第1章 iOS ...
- BIML 101 - ETL数据清洗 系列 - BIML 快速入门教程 - 序
BIML 101 - BIML 快速入门教程 做大数据的项目,最花时间的就是数据清洗. 没有一个相对可靠的数据,数据分析就是无木之舟,无水之源. 如果你已经进了ETL这个坑,而且预算有限,并且有大量的 ...
- python scrapy菜鸟教程_scrapy学习笔记(一)快速入门
安装Scrapy Scrapy是一个高级的Python爬虫框架,它不仅包含了爬虫的特性,还可以方便的将爬虫数据保存到csv.json等文件中. 首先我们安装Scrapy. pip install sc ...
- OpenStack快速入门
OpenStack云计算快速入门(1) 该教程基于Ubuntu12.04版,它将帮助读者建立起一份OpenStack最小化安装.我是五岳之巅,翻译中多采用意译法,所以个别词与原版有出入,请大家谅解.我 ...
- Expression Blend实例中文教程(2) - 界面快速入门
上一篇主要介绍Expression系列产品,另外概述了Blend的强大功能,本篇将用Blend 3创建一个新Silverlight项目,通过创建的过程,对Blend进行快速入门学习. 在开始使用Ble ...
最新文章
- CUDA 7 Stream流简化并发性
- Boost C++ 库
- 《Hadoop与大数据挖掘》一2.3.5 动手实践:运行MapReduce任务
- Android:如何添加一个页面,如何跳转页面
- Java-利用Spring提供的Resource/ResourceLoader接口操作资源文件
- javascript中的运算符号
- FTP服务器配置与管理(4) 服务器端的常用配置及FTP命令
- 随机模拟_随机模拟可帮助您掌握统计概念
- DB2 常用操作命令集合
- JAVA类,变量的赋值一个小细节,以及static标注变量的意义
- .NetCore 利用反射处理RESTful的更新自动赋值
- python rarfile_Python中zipfile压缩文件模块的基本使用教程
- 汽车电子:下一个苹果产业链
- AC A2C A3C
- 没有产权证的车库能不能随时拆掉
- [android]so easy实现根据viewpager、edittext、时间使背景动态渐变色效果~
- android 钉钉考勤日历,Flutter仿钉钉考勤日历
- 移远NBIOT模块选型指南
- 第三回 无处不在的计算
- 360搜索推出致敬女性专题 董卿咪蒙领衔十大杰出女性