Angular in a Cordova
5.00/5 (3投票s)
如何在 Cordova 环境中使用 Angular 及其影响。
引言
Web 开发从未如此有趣。在过去十年中，移动计算领域发生了巨大的变化。我们不再需要刷新浏览器才能看到数据，也不再需要携带笨重的 N70 手机在口袋里了。
这是一个新的十年，在这个十年里，将会有更多的变化。有一项技术尤其会使所有其他语言过时。它已经开始这样做了，或者在未来几年内将取代其他语言。这仅仅是选择、适应和可重用性的问题，然后人们就会真正看到这种变化。
这项技术是 HTML5。 它有潜力改变我们今天所知的一切。我看到大多数人仍然从 Microsoft IE8 或 IE9 的角度看待事物，或者提出重大的安全顾虑，或者躲在他们无法适应、学习或活在自己狭小世界里的借口后面。
我只想提醒人们记住我每天都读到的一句话。
"蛇必须蜕皮，否则它必须死去"
这篇文章不适合他们。但即便如此，也请随时阅读。
但对于那些相信有更伟大的事物，比 IE7 或 IE8 更伟大的事物，或者那些知道或梦想着这些技术在不久的将来能做什么的人来说。也许我们不知道，但我们仍然使用着大多数围绕 HTML5 构建的应用程序。
这篇文章是为所有人准备的。
APP?????????
这是从哪里来的...????
应用程序不是网站，而是用 Web 语言编写并移植到多个操作系统上的完整 Web 应用程序/应用程序。所以有些人可能会问，怎么能让同一个 App 在不同的环境中运行呢？这都是通过 HTML5 和 cordova 实现的。在我们深入研究cordova之前，我想告诉您 HTML5 带有脚本支持，也就是我们所知的 JavaScript。正是 JavaScript 将所有的应用程序逻辑、工作流程甚至 UI 元素连接在一起。这里的范围不是要理解 JavaScript。您可以参考其他解释 JavaScript 细节的链接，然后回来，但要清楚地了解技术如何组合在一起并应用于做一些我们只能想象的伟大事情。
您知道吗，JavaScript 是运行在设备、PC、专用硬件上，甚至为高性能服务器 (nodejs) 提供动力的最大语言。所以忽略 JavaScript 不是一个好选择。
在此过程中，又出现了一项开创性的技术（实际上是一个框架），它被称为 AngularJS。Angular JS 模仿 MVC 设计模式，帮助用户创建 SPA。Angular JS 的基本原则是使用声明式编程来构建 UI 并连接其他软件组件。Angularjs 实际上扩展了 HTML 的词汇，并引入了双向数据绑定。（换句话说，如果您对双向数据绑定没有任何了解，请参考 JavaScript 中的观察者模式。这是新引入的 Object.observe）。请搜索一下。
背景
要开始本教程，至少需要具备 JavaScript、HTML5 和 Angularjs 的基本知识。
请安装以下软件以开始，或者使用 Intel XDK
Intel XDK 是构建混合应用程序的最佳工具之一。
要求
- Nodejs http://https://node.org.cn/
- Angularjs https://angularjs.org/
Snap.js 和 Snap.js Angular https://github.com/jakiestfu/Snap.js/ http://jtrussell.github.io/angular-snap.js/
（请参考文档。）
- Font-awesome http://fortawesome.github.io/Font-Awesome/
- Bootstrap https://bootstrap.ac.cn/
- ui.bootstrap (Angular 相关) https://angular-ui.github.io/bootstrap/
- Intel XDK (可选) https://software.intel.com/en-us/intel-xdk
Intel XDK 提供了最佳的模拟器，虽然它不完全提供设备级 API 仿真，但它仍然是即时构建混合应用程序 UI 的最佳工具之一。它还有自己的项目管理系统。
IDE
Sublime Text https://text.sublime.net.cn/
Atom.io https://atom.io/
Android 开发环境设置（如果无法完成，请下载 Intel XDK）
+ Ant/Java SDK/Grunt 并配置所有 PATH。如果不行，请参考以下链接。
Cordova /Phonegap (我使用的是 Cordova) http://https://cordova.net.cn/
一部装有 Android 的手机
为 Ubuntu 用户设置 Android 环境
- http://askubuntu.com/questions/318246/complete-installation-guide-for-android-sdk-adt-bundle-on-ubuntu
- http://forum.xda-developers.com/showthread.php?t=2302780
- http://www.unixmen.com/install-android-sdk-ubuntu-14-04/
为 Windows 用户设置 Android 环境
- http://www.androidcentral.com/installing-android-sdk-windows-mac-and-linux-tutorial
- http://www.android.gs/install-android-sdk-adb-windows/
- http://www.mikeplate.com/2010/11/01/install-android-development-environment-on-windows-7/
- http://www.techotopia.com/index.php/Setting_up_an_Android_Development_Environment
理解基础知识
让我们创建一个基本的 HTML 页面，并添加对 Angularjs 和其他依赖项的引用。
这里的代码演示了如何构建基本的 UI。我们将在这里使用 angular、bootstrap 和 Snap.js 来构建一个类似 Facebook 的 UI。Snap.js 是一个用于创建滑动菜单的工具。大多数混合应用程序开发人员在构建菜单时都面临一个艰难的选择。虽然 Bootstrap CSS 可以轻松创建响应式的顶部下拉菜单，但在很多情况下，菜单首选放在侧边，以便为其他 UI 组件腾出空间。
请参考以下图片，它们用于描述我如何管理我的文件夹结构。您可以自由使用任何想要的结构，但为了方便学习，请在本教程中使用此结构。
请下载我提到的所有相关的第三方文件，并将其放入 plugins 文件夹中。
创建控制器和模板。
请查看以下我们需要创建的文件夹结构，“Folder”单词表示实际的文件夹名称，例如 controllers、plugins 等。
app- Root>
controllers Folder-> Contains all the controllers
plugins Folder - > contains all 3 rd party API and framework with there version number on folders
templates Folder - > contains all html templates
style Folder - > contains all custom css
services Folder -> contains services
init.js Folder -> this is from we would init or start or app
images Folder -> Contains all reference to images,sprites etc
index.html Folder - > the main index file which contains all the references
下面是包含所有依赖项和引用的基本 HTML5 标记。这是基础的 index 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="plugins/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet" >
<link href="style/init.css" type="text/css" rel="stylesheet"/>
<link href="plugins/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="plugins/Snap.js-develop/snap.css" rel="stylesheet" />
<!-- Load AngularJS Snap -->
<link href="plugins/angular-snap.js-bower-master/angular-snap-only.min.css" rel="stylesheet" />
</head>
<body ng-controller="globalCtrl">
<div class="snapDrawer" snap-drawer="left">
</div>
<div class="snapContent" snap-content snap-options="snapOptions">
<div ng-include="'templates/topMenu.html'" ></div>
<div ng-view></div>
</div>
</body>
<script type="text/javascript" src="plugins/angular/angular.min.js" ></script>
<script type="text/javascript" src="plugins/angular/angular-route.min.js" ></script>
<script type="text/javascript" src="plugins/angular/angular-animate.min.js" ></script>
<!-- Load JQuery -->
<script type="text/javascript" src="plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="plugins/bootstrap-3.3.4/js/bootstrap.min.js"></script>
<!-- Load Snap.js -->
<script type="text/javascript" src="plugins/Snap.js-develop/snap.min.js"></script>
<!-- Load Snap.js Angularjs-->
<script type="text/javascript" src="plugins/angular-snap.js-bower-master/angular-snap.min.js"></script>
<script type="text/javascript" src="plugins/ui.bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script type="text/javascript" src="init.js" ></script>
<!-- Load Controllers -->
<script type="text/javascript" src="controllers/landingCtrl.js" ></script>
<script type="text/javascript" src="controllers/globalCtrl.js" ></script>
<script type="text/javascript" src="controllers/clusterInfoCtrl.js" ></script>
<!-- Modal Controller -->
<script type="text/javascript" src="modals/addCluster/addClusterModalCtrl.js" ></script>
<script type="text/javascript" src="modals/contextGraph/contextGraphCtrl.js" ></script>
</html>
如果您查看这个index.html，您会发现我没有立即使用 ng-app 来初始化我的应用程序。
这是因为我们将引导我们的应用程序，因为 cordova 应用程序需要“deviceready”事件，之后其他所有内容才会执行。但是，我们首先会检查它是否在浏览器中执行window.onload。 然后，我们将用deviceready 事件替换window.onload 。现在让我们打开init.js 并添加以下代码。
var log = console.log.bind(console);
window.onload = function()
{
angular.bootstrap(document,["myApp"]);
log("App Init.....Ready");
}
var app = angular.module('myApp', ["ngRoute","ui.bootstrap","snap"]);
app.config(function($routeProvider,snapRemoteProvider)
{
log("Routing Definition");
$routeProvider
.when("/",{
templateUrl : "templates/landing.html",
controller : "landingCtrl"
})
.otherwise({ redirectTo: '/' });
});
让我们看看init.js 以及我们在这里做了什么。
在第一行，我将 console.log 映射到一个使用 bind 的 log，因为我不想总是使用 console.log 。您也可以使用此 bind 来映射其他函数。
然后我们在这里使用 window.onload 。使用 window.onload 的原因是我们没有在 index.html 中定义 ng-app 。因为 angularjs 会首先查找 ng-app 来初始化自身，但在这里我们将手动完成，以便它能根据我们的输入工作并初始化。
angular.bootstrap(document,["myApp"]);
angular.bootstrap 实际上告诉 angularjs 将“myApp”绑定到文档。所以我们基本上是在告诉 angularjs 将“myApp”绑定到文档。由于不是自动完成的，我们在页面加载（页面加载成功）时手动添加“myApp”（angularjs 从那里初始化）。这给了我们更大的灵活性和控制力。我们还可以使用多个 angular.bootstrap 来在这里初始化其他应用程序。
由于我们指示 Angularjs 在页面加载后进行初始化，因此在页面加载之前，Angularjs 的其他部分将不会执行。
var app = angular.module('myApp', ["ngRoute","ui.bootstrap","snap"]);
这是在 angular.bootstrap 执行后运行的，然后它将映射路由。
请注意，我的核心依赖项是 ngRoute、ui.bootstrap 和 snap。所有这些都已在 index.html 中添加。
请使用任何服务器 WAMP/XAMPP 在您的本地系统上运行项目，并打开控制台查看是否有任何错误。
现在请仔细查看 index.html 。 您会看到正文之间有几行代码。
<div class="snapDrawer" snap-drawer="left">
</div>
<div class="snapContent" snap-content snap-options="snapOptions">
<div ng-include="'templates/topMenu.html'" ></div>
<div ng-view></div>
</div>
这里做了什么来创建一个滑动菜单。如果您还记得 Facebook 应用的滑动菜单，您会看到一个菜单滑入，主体也随之滑出。
要实现这种滑动的基本布局是使用 Snap.js 和 Snap.js Angular（两者都是必需的）。
<div snap-drawer="left"></div>
<div snap-content snap-options="snapOptions"></div>
基本布局（带自定义类和不带自定义类）如下所示。
<div class="snapDrawer" snap-drawer="left"></div>
<div class="snapContent" snap-content snap-options="snapOptions"></div>
这是实现滑动菜单的基本代码。snap-drawer 是包含所有超链接的元素，它会滑入；snap-content 包含主体元素和我们通常用来显示的 UI 元素。我在这里添加了自定义类并更改了它们的背景。
snap-drawer="left" 或 snap-drawer="right" 将确保滑动是从左侧或右侧发生。在本例中，是从左侧。
在 snap-content 中，我们可以放置所有我们想要显示的 UI 元素。snap-content 具有 snap-options （请参考snap.js 文档）。在这里，我们应用了 snap js 的基本配置，并告诉 snapjs 滑动如何发生，以及它应该滑动多少。我总是将应用级别的配置写在 globalCtrl.js 中。
app.controller('globalCtrl',function ($scope) {
/*Snap.js Global Settings*/
$scope.snapOptions = {
disable: 'none',
addBodyClasses: true,
hyperextensible: true,
resistance: 0.5,
flickThreshold: 50,
transitionSpeed: 0.3,
easing: 'ease',
maxPosition: 266,
minPosition: -340,
tapToClose: true,
touchToDrag: false,
slideIntent: 40,
minDragDistance: 5
};
});
在这种情况下，一旦应用程序初始化，snapOptions 将应用于 snap-content。 使用自定义类来覆盖抽屉和内容的背景颜色。
注意：www.zip 文件夹已作为完整应用程序附加在此。请使用本地机器的 xampp/lamp/wamp 进行解压和运行此应用程序。
由于这里的目标是为 cordova 创建一个基本的 angularjs 页面，让我们继续创建 cordova 应用程序。
所以让我们打开我们的 index.html 并添加一个引用。这应该是您 index.html 中的第一个引用。
<script src="cordova.js"></script>
然后，打开 init.js 并进行一些更改或添加完整的代码。它将在这两种情况下都能运行。
document.addEventListener("deviceready",function()
{
angular.bootstrap(document,["myApp"]);
log("App Init.....Ready");
},false);
上面的代码将确保一旦 cordova 初始化，这个事件就会被触发。在 init 之后，它将执行 angular。这样，我们就可以使用 deviceready 事件初始化一个 cordova 应用程序的 angular 应用。
现在打开 nodejs 并创建一个基本的 cordova App
root : > cordova create myApp myApp.com.app myApp
上面的命令会在 myApp 文件夹中创建一个 cordova 应用程序，命名空间为 myApp.com.app （这很重要），应用程序名称为 myApp。
现在进入 myApp
root : > cordova platform add android
此命令实际为该项目添加了 Android OS 支持。您将看到下载正在进行，以下载 Android 相关文件。在 myApp 下， 您将看到多个文件夹。最重要的文件夹是 www 文件夹。
现在删除 www 文件夹中的所有内容，然后复制粘贴 index.html 和我们创建的文件夹。
请确保 index.html 中引用的所有内容都已映射。现在在 www 文件夹中，复制/粘贴我们创建的内容，或者下载 www 文件夹并将所有内容粘贴到 www 文件夹中。
root : > cordova build android
现在运行上述命令来构建此应用程序。如果您使用模拟器，那么
root : > cordova emulate android
或者，如果您想在设备上测试此应用程序，请运行
root : > cordova run android
这将会在您的实际设备上运行该应用程序。请确保您的设备已被检测到。输入
root : > adb devices
这将列出您的设备。请确保您的设备上已启用 USB 调试。
欢迎来到 cordova/angularjs 和 html5 的 Android 美丽世界。
关注点
请阅读有关 cordova 的内容。ionic 是一个很棒的框架，可以消除所有这些麻烦，但对我来说，我坚持这种方式，因为我更喜欢控制我的代码。请告诉我您喜欢这个项目，或者是否有任何错误。