Angular AMD 快速入门

Tychio 发布于2019-08-19 17:51 / 2284人阅读

摘要：快速入门是作者使用开发的前端框架因此你可以使用它快速创建一款它特别适合快速开发应用。配置路由通过使用我们可以动态配置所需要加载的主要目的是去设置中去进行惰性加载以及无论你传入什么样的参数值进去，都会被返回。

Angular AMD 快速入门

angularAMD是作者@ marcoslin使用 RequireJS ＋ AngularJS开发的前端mvvm框架,因此你可以使用它快速创建一款Web App.它特别适合快速开发SPA应用。

参考文档

安装 bower

bower install angularAMD

node

npm install angular-amd

外链

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

使用种子

git clone  https://github.com/Vanthink-UED/AngularAMD-Tutorial

npm install

gulp

访问 http://localhost:8360/#/home

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

中文文档

英文文档

海外云主机服务器托管前端快速入门云计算快速入门 css快速入门 html快速入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78904.html

前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
让 Angular 1.x 跟上时代的步伐

摘要：所以说的模块机制没有解决文件依赖关系和文件异步加载的问题。大部分团队还是停留在第二第三阶段，每个阶段的实现都有很多种选择。希望这篇文章能够激起大家永远保持积极向前追求完美代码的心，不仅对自己的成长也会对公司带来无限的价值。本篇技术博客来自有着化腐朽为神奇能力的，Worktile 技术牛人Web 总监 @徐海峰大神的分享~满满的干货，你值得拥有！ Worktile 的前端构建之路 2...

李增田 2019-07-25 10:41 评论0 收藏0
前端面试，从入门到放弃

摘要：其中经历了入门到放弃系列的火热，想起了此题目，可直到其热度褪去依然没有开写。再之前的实习也是上午面试下午入职的。这是前几篇前端面试文章的结尾，是很多个月前就该写下的事情。其中经历了入门到放弃系列的火热，想起了此题目，可直到其热度褪去依然没有开写。不能再拖了，否则事情估计都快忘光了。面试过程依然是某金融集团的外包，这次换了一个外包公司。首先是电话面试，还是还是些常见的前端问题，自己...

fantix 2019-08-20 11:30 评论0 收藏0
vue.js快速入门

摘要：但是，今天我要写一个快速入门，本人觉得还是有一点用处，因为，我不可能在一天之内精通某种东西，却可以在一两小时入门。不知道还要不要再来一个快速入门，发展得挺快，东西也像类似的全家。以前看到多少天学习系列，我都深感烦躁，短短几天怎么可以精通，那是对于他们而言。但是，今天我要写一个快速入门，本人觉得还是有一点用处，因为，我不可能在一天之内精通某种东西，却可以在一两小时入门。回到vue本身...

MkkHou 2019-08-20 10:45 评论0 收藏0