在Cordova里,Angular

分享于 

19分钟阅读

Web开发

  繁體 雙語

介绍

Web开发从来没有这么有趣过。 在最近 10年中,移动计算领域的大量变化。 我们必须刷新数据才能在浏览器中看到,或者在我们的口袋里带一个大的in集。

这是一个新的十年,在这种情况下,更多的将会改变。 特别是有一种技术使所有其他语言过时。 它已经开始执行,或者在未来几年内进行替换。 在人们开始看到变化之前,它只是一个选择和适应性和可以用性问题。

这项技术是 它有可能改变我们今天所知道的一切。 在Microsoft或者IE9中,我看到很多人仍然看到一些东西,或者在他们自己的环境中,以自己的方式。学习或者隐藏他们无法适应的重大。

我只是想提醒大家我每天读的一行。

"蛇必须Cast它的皮肤,否则它必须 Die。"

这篇文章不是给他们的。 但是,请你随时阅读。

但对于那些相信有更大的东西,比IE7或者IE8或者人们知道或者梦想这些技术在不久的将来能做什么大的多。 也许我们不知道,但我们仍然使用的大部分是以为代价的应用程序。

这个帖子给所有人收费。

这是从哪里来的。

应用程序不是网站,而是完全成熟的网络应用程序/应用程序,用网络语言编写并移植到多个操作系统。 所以有人可能会说,如何在不同的环境中运行相同的应用程序。 用HTML5和cordova就可以了。 在我们进入cordova之前,让我告诉你带有一个脚本支持,我们称为 JavaScript。 它是把所有应用程序登录,工作流,甚至是连接在一起的UI元素粘合在一起的JavaScript。 这里的作用域不是理解 JavaScript。 你可能会引用一些它的他链接来详细解释 JavaScript,但是稍后可以清晰地将技术耦合在一起。

你知道,JavaScript是最大的语言,它跨设备。pc。专用硬件或者高性能的Servers(nodejs) 运行。 所以忽略JavaScript不是一个好的选择。

一路上又出现了另一个开创性的技术( 实际框架),它叫做 AngularJS。 Angular JS mimicks设计 Pattern,帮助用户创建 SPA。 Angular 基本原则是使用声明性编程来构造UI和连接其他软件组件。 Angularjs实际上扩展了HTML词汇表并引入了两种数据绑定方式。 如果你不知道双向数据绑定,那么请参考JavaScript中的Observe。 它是最新推出 对象。 ob 服务器 。)。

背景

要开始本教程,至少需要了解 JavaScript。HTML5和Angularjs的基本知识。

请安装以下安装或者使用 Intel XDK:

是构建混合应用的最佳工具之一。

要求

Snap.js and Snap.js Angular https://github.com/jakiestfu/Snap.js/http://jtrussell.github.io/angular-snap.js/

( 请参考文档。)

Intel XDK提供了最好的模拟器,尽管它并没有完全提供设备级的API模拟,但是仍然是最好的工具。 它也有自己的项目管理系统。

IDE

sublime text http://www.sublimetext.com/

Atom.io https://atom.io/

Android开发设置( 如果不能这样做,那么下载 XDK )

+ Ant/java sdk/grunt,配置了所有路径。 如果没有,请参考 below 链接。

Cordova/Phonegap ( 我在用 Cordova ) http://https://cordova.apache.org/

带Android的手机

为Ubuntu用户设置安卓环境

为用户设置安卓环境的代价为

了解基础知识

让我们创建一个基本的HTML页面并添加对Angularjs和其他依赖项的引用。

这里的代码演示了如何使用构造基本 UI。 我们要做的就是使用 Angular,Bootstrap 和 Snap.js. Snap.js 构建一个 Facebook,这是一个创建滑动菜单的工具。 大多数混合应用开发人员在构建菜单时都面临着。 尽管 Bootstrap CSS容易创建响应上下降菜单,但在大多数情况下,菜单是免费的。

请参考下面的图片来描述我如何管理我的文件夹结构。 你可以随意使用任何结构,但是为了便于学习,请为这里教程使用这里结构。

请下载我提到过的所有相关 3rd 方文件,并将它的放置在 inside 插件中。

创建控制器和模板。

请看下面的文件夹结构,我们必须创建 "文件夹"单词表示实际文件夹,只有名字,插件,等等。

app- Root>
controllers Folder-> Contains all the controllersplugins Folder -> contains all 3 rd party API and framework with there version number on folderstemplates Folder -> contains all html templatesstyle Folder -> contains all custom css services Folder -> contains servicesinit.js Folder -> this is from we would init or start or appimages Folder -> Contains all reference to images,sprites etcindex.html Folder -> the main index file which contains all the references

below 是基本的HTML5标记,具有所有依赖项和引用。 这是基本索引 file:

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="plugins/bootstrap-3.3.4/css/bootstrap.min.css"rel="stylesheet"><linkhref="style/init.css"type="text/css"rel="stylesheet"/><linkhref="plugins/font-awesome-4.3.0/css/font-awesome.min.css"rel="stylesheet"/><linkhref="plugins/Snap.js-develop/snap.css"rel="stylesheet"/><!-- Load AngularJS Snap --><linkhref="plugins/angular-snap.js-bower-master/angular-snap-only.min.css"rel="stylesheet"/></head><bodyng-controller="globalCtrl"><divclass="snapDrawer"snap-drawer="left"></div><divclass="snapContent"snap-contentsnap-options="snapOptions"><divng-include="'templates/topMenu.html'"></div><divng-view></div></div></body><scripttype="text/javascript"src="plugins/angular/angular.min.js"></script><scripttype="text/javascript"src="plugins/angular/angular-route.min.js"></script><scripttype="text/javascript"src="plugins/angular/angular-animate.min.js"></script><!-- Load JQuery --><scripttype="text/javascript"src="plugins/jquery-1.11.3.min.js"></script><scripttype="text/javascript"src="plugins/bootstrap-3.3.4/js/bootstrap.min.js"></script><!-- Load Snap.js --><scripttype="text/javascript"src="plugins/Snap.js-develop/snap.min.js"></script><!-- Load Snap.js Angularjs--><scripttype="text/javascript"src="plugins/angular-snap.js-bower-master/angular-snap.min.js"></script><scripttype="text/javascript"src="plugins/ui.bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script><scripttype="text/javascript"src="init.js"></script><!-- Load Controllers --><scripttype="text/javascript"src="controllers/landingCtrl.js"></script><scripttype="text/javascript"src="controllers/globalCtrl.js"></script><scripttype="text/javascript"src="controllers/clusterInfoCtrl.js"></script><!-- Modal Controller --><scripttype="text/javascript"src="modals/addCluster/addClusterModalCtrl.js"></script><scripttype="text/javascript"src="modals/contextGraph/contextGraphCtrl.js"></script></html>

如果查看这个 index.html,你将看到我没有使用初始化我的应用程序。

因为我们的应用程序需要 Bootstrap,因为一个onto需要" 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的日志,因为我不喜欢总是使用 console.log。 你可以使用这里绑定来映射其他的。

我们在这里使用 window.onload。 在这里使用 window.onload的原因是我们在 index.html 中没有定义 ng-app。 由于ccr首先寻找 ng-app 来初始化本身,但是这里我们将手工进行,以便它可以基于我们的输入。

angular.bootstrap(document,["myApp"]);

实际上 angular.bootstrap 告诉angularjs将" myApp"绑定到文档。 所以基本上我们要告诉angularjs把" myApp"绑定到文档。 由于它不是自动完成的,因这里我们将特权添加到页面加载( 页面加载成功) 中的" myApp"( 从位于位置的。 这给了我们 GREATER 灵活性和控制。 我们还可以使用多个 angular.bootstrap 来在这里进行其他应用。

因为我们已经指示wince在页加载后进行初始化,它的另一部分将不会在网页加载之前执行。

var app = angular.module('myApp', ["ngRoute","ui.bootstrap","snap"]);

执行 angular.bootstrap 之后执行一次,然后将映射路由。

请看我的核心依赖是 ngRouteui.bootstrapsnap。 所有这些都增加了 index.html。

请在本地系统中使用任何服务器 WAMP/XAMPP 和打开控制台来查找任何错误。

现在请仔细看一下 index.html。 你将看到在正文之间编写的几行代码。

<divclass="snapDrawer"snap-drawer="left"></div><divclass="snapContent"snap-contentsnap-options="snapOptions"><divng-include="'templates/topMenu.html'"></div><divng-view></div></div>

这里做什么来创建一个滑动菜单。 如果你可以记住facebook应用程序上的滑动菜单,你会看到一个菜单幻灯片,body 也会。

实现这种滑动的基本布局是使用 Snap.js and和 Snap.js Angular。

<divsnap-drawer="left"></div><divsnap-contentsnap-options="snapOptions"></div>

具有和没有自定义类的基本布局如下所示:

<divclass="snapDrawer"snap-drawer="left"></div><divclass="snapContent"snap-contentsnap-options="snapOptions"></div>

这是实现滑动菜单的基本代码。 snap-drawer 包含所有的超链接,它的中幻灯片和 snap-content 包含了我们常用的body 元素和UI元素。 我在这里添加了自定义类并更改了它们的背景。

iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 snap-drawer="left" OR snap-drawer="right" 将确保从左侧或者右侧发生幻灯片。 在这种情况下,它是从左边。

snap-content 中,我们可以放置想要显示的所有UI元素。 snap-content 具有 snap-options ( 请参考 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。 使用自定义类覆盖抽屉和内容的background 颜色。

注意: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 应用程序的事件初始化一个 Angular 应用程序。

现在打开nodejs并创建一个基本的cordova应用程序:

root :> cordova create myApp myApp.com.app myApp

使用命令行创建一个带有的cordova应用程序,其中包含 myApp.com.app ( 重要的),应用程序 NAME 作为 myApp

现在转到 myApp:

root :> cordova platform add android

这条线实际上为这个项目增加了一个安卓操作系统支持。 你将看到下载Android相关文件的下载。 在 下,你将看到多个文件夹。 最重要的是 www文件夹。

继续,我们把所有的东西都 inside www www www folder文件夹和复制粘贴的文件夹,以及我们所创建的文件夹。

请确保 index.html 中引用的任何内容都应该映射。 现在,我们已经创建了 inside www www文件夹,复制/粘贴我们已经创建或者下载的内容,并将所有内容 inside的内容粘贴到www文件夹

root :> cordova build android

现在运行 上面 命令来构建这个应用程序。 如果你使用 模拟器,则:

root :> cordova emulate android

或者,如果要在设备上测试这里应用程序,请运行:

root :> cordova run android

这将在你的实际设备上运行该应用程序。 确保你的设备被检测到。 输入:

root :> adb devices 

这将列出你的设备。 确保在设备上启用了USB调试。

欢迎使用 cordova/angularjs和html5的Android美好世界。

Points of Interest

请给cordova读一下。 ionic是一个很好的框架,可以消除所有这些麻烦,但对我来说,我喜欢更多的控制代码。 请让我知道你喜欢这个项目,或者有什么错误。


相关文章