-
Notifications
You must be signed in to change notification settings - Fork 7
Expand file tree
/
Copy pathgetting-started.html
More file actions
243 lines (239 loc) · 16.8 KB
/
getting-started.html
File metadata and controls
243 lines (239 loc) · 16.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting Started - AngularGap</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- site css -->
<link rel="stylesheet" href="css/site.min.css">
<!-- angulargap css -->
<link rel="stylesheet" href="angulargap/css/angulargap.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/site.min.js"></script>
</head>
<body data-spy="scroll" data-target=".aside-menu">
<div class="docs-header">
<!--nav-->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="50"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="nav-link current" href="getting-started.html">Getting Started</a></li>
<li><a class="nav-link" href="documentation.html">Documentation</a></li>
<li><a class="nav-link" href="angularicons.html">Icon Fonts</a></li>
<!-- <li><a class="nav-link" href="examples/">Examples</a></li> -->
</ul>
</div>
</div>
</nav>
<!--header-->
<div class="topic">
<div class="container">
<h3>Getting Started with AngularGap Framework</h3>
<h4>An overview of AngularGap, why we built it, how to use it, and what you should know along the way.</h4>
<!-- <div class="advertisement">
<span class="advertisement-image">
<img src="" title="bootflat" alt="bootflat" border="0" height="90">
</span>
<p class="advertisement-text"></p>
</div> -->
</div>
<div class="topic__infos">
<div class="container">
Getting started With AngularGap is easy. Whether you are a master of Sass, building a new app, we've got you covered.
</div>
</div>
</div>
</div>
<!--documents-->
<div class="container documents">
<div class="row">
<!--menu-->
<div class="col-md-2 col-sm-3">
<div class="aside-menu">
<!-- components -->
<ul class="nav aside-menu__lists">
<li class="aside-menu__title"><a href="getting-started.html">Getting Started</a></li>
<li data-target="overview"><a href="#overview">Overview</a></li>
<li data-target="download"><a href="#download">Download</a></li>
<li data-target="included"><a href="#included">What's included</a></li>
<li data-target="css-sass"><a href="#css-sass">CSS/SASS</a></li>
<!-- <li data-target="angularjs"><a href="#angularjs">AngularJS</a></li> -->
<!-- <li data-target="phonegap"><a href="#phonegap">Phonegap</a></li> -->
<li data-target="browser-support"><a href="#browser-support">Browser Support</a></li>
<li data-target="examples"><a href="#examples">Examples</a></li>
<li data-target="licensing"><a href="#licensing">Licensing</a></li>
<li data-target="about"><a href="#about">About AngularGap</a></li>
<li class="aside-menu__title"><a href="documentation.html">Components</a></li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-9">
<!-- Overview
================================================== -->
<div class="docs-article docs--start" id="overview">
<h3>Overview</h3>
<!-- <p>Welcome! AngularGap is a powerful HTML5 native app development framework that helps you build native-feeling mobile apps all with web technologies like HTML, CSS, and Javascript.</p> -->
<p>Welcome! AngularGap is a powerful HTML5 native app development framework that helps you build native-feeling mobile apps all with web technologies like HTML, CSS.</p>
<!-- <p>AngularGap is focused mainly on the look and feel, and UI interaction of your app. That means we aren't a replacement for <a href="http://phonegap.com/">PhoneGap</a> or your favorite Javascript framework. Instead, AngularGap simply fits in well with these projects in order to simplify one big part of your app: the front end. </p> -->
<p>AngularGap is focused mainly on the look and feel, and UI interaction of your app. Instead, AngularGap simply fits in well with these projects in order to simplify one big part of your app: the front end. </p>
<!-- <p><b>AngularGap currently requires AngularJS</b> in order to work at its full potential. While you can still use the CSS portion of the framework, you'll miss out on powerful UI interactions, gestures, animations, and other things. In the future we'd like to expand beyond Angular to support other frameworks.</p> -->
<p>While you can still use the CSS portion of the framework, you'll miss out on powerful UI interactions, gestures, animations, and other things. In the future we'd like to expand beyond Angular to support other frameworks.</p>
</div>
<!-- Download
================================================== -->
<div class="docs-article docs--start" id="download">
<h3>Download</h3>
<p>Download the latest official release of AngularGap and get started!</p>
<ul class="item__infos">
<li>Version 0.9.0 "Alpha Jaguar"</li>
<li>Released December 18th, 2013</li>
</ul>
<p><a class="btn btn-info" href="https://github.com/angulargap/angulargap.github.io/archive/master.zip">Download v0.9.0 "Alpha Jaguar"</a></p>
<p>You can also <a href="https://github.com/angulargap/angulargap.github.io">clone it on GitHub</a> to get the bleeding edge release. </p>
</div>
<!-- What's included
================================================== -->
<div class="docs-article docs--start" id="included">
<h3>What's included</h3>
<p>AngularGap comes with compiled Javascript and CSS for your app, optional SASS files and JS Framework extensions, along with a great <a href="angularicons.html" target="_blank">icon pack</a>.</p>
<p>The project structure is organized as follows:</p>
<ul class="item__infos">
<!-- <li><code>example/</code> - examples of full-featured AngularGap projects. Feel free to copy these and base your next project on them.</li> -->
<li><code>angulargap/css/</code> - the Css code for the project and any framework extensions (like AngularJS) that we have provided.</li>
<li><code>angulargap/scss/</code> - the raw SCSS files that can be used to integrate the AngularGap SCSS into your own project. Or you can use the compiled CSS in the dist folder above.</li>
<li><code>angulargap/fonts/</code> - font files for the AngularGap icon pack.</li>
<!-- <li><code>test/</code> - Unit tests for the Javascript files, along with visual tests of components.</li>
<li><code>tools/</code> - Tools for creating and administering AngularGap projects.</li> -->
</ul>
</div>
<!-- CSS/SASS
================================================== -->
<div class="docs-article docs--start" id="css-sass">
<h3>CSS/SASS</h3>
<p>The CSS can stand on its own, but it is also built to be enhanced by the developer. For simplicity you can always just add in your own CSS and override default properties. And for even more power and flexibility, the core is written with <a href="http://sass-lang.com/">SASS</a> and includes easily customized variables and mixins. While the default design is similar to iOS, we feel we’ve left the CSS in a state which can be easily extended to get your own look and feel.</p>
</div>
<!-- AngularJS
================================================== -->
<!-- <div class="docs-article docs--start" id="angularjs">
<h3>AngularJS</h3>
<p>AngularGap ships with some great <a href="http://angularjs.org/">AngularJS</a> extensions by default. This makes it easy to use Angular directives instead of the raw HTML/CSS markup, and also makes it easy to use common AngularGap services in your controllers and directives.</p>
<p>To use the AngularJS extensions, copy <code>dist/js/AngularGap-angular.js</code> and include it after <code>dist/js/AngularGap.js</code> in your app. See the Angular doc section for more details on using the extensions.</p>
<p>AngularGap-Angular relies on Angular 1.2.4, and includes ngAnimate, ngTouch, ngSanitize, ngRoute, and ngResource by default.</p>
</div> -->
<!-- Phonegap
================================================== -->
<!-- <div class="docs-article docs--start" id="phonegap">
<h3>PhoneGap/Cordova/Trigger.io</h3>
<p>Our examples were tested on Cordova 3.1.0, but should work for any version since we aren't shipping plugins (yet). To add AngularGap to your <a href="http://phonegap.com/">PhoneGap</a>, <a href="http://cordova.apache.org/">Cordova</a>, or <a href="https://trigger.io/">Trigger.io</a> project, just reference the AngularGap CSS and JS files from the web root of your app.</p>
</div> -->
<!-- Browser Support
================================================== -->
<div class="docs-article docs--start" id="browser-support">
<h3>Browser Support</h3>
<p>AngularGap is focused on building <strong>native/hybrid</strong> mobile apps rather than mobile websites.</p>
<p>As such, our browser support tends to be whatever Web View API is available to native apps on a given platform. For AngularGap v0.9.0 "Alpha Fox", that means UIWebView for iOS 6 and 7, and Android 4.1+.</p>
</div>
<!-- Examples
================================================== -->
<!-- <div class="docs-article docs--start" id="examples">
<h3>Examples</h3>
<p>We have plenty of starter templates, live apps, and other examples to get you started. To view our AngularGap examples, take a look at the <a href="/examples/">Examples</a> page. </p>
</div> -->
<!-- Licensing
================================================== -->
<div class="docs-article docs--start" id="licensing">
<h3>Licensing</h3>
<p>AngularGap is an open source framework released under a permisive <a href="http://opensource.org/licenses/MIT">MIT</a> license. This means you can use AngularGap in your own personal or commercial projects for free. MIT is the same license used by such popular projects as jQuery and Ruby on Rails.</p>
</div>
<!-- About AngularGap
================================================== -->
<div class="docs-article docs--start" id="about">
<h3>About AngularGap</h3>
<p>AngularGap was built to take HTML5 on mobile into the future. We wanted a mobile framework that not only looked and worked great, but was also powerful enough to build the amazing apps the best developers were creating. HTML5's time has arrived. AngularGap is the framework that proves it.</p>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="footer">
<div class="container">
<div class="download">
<span class="download__infos">You simply have to <b>try it</b>.</span>
<a class="btn btn-info" href="https://github.com/angulargap/angulargap.github.io/archive/master.zip">Download AngularGap</a>
<a class="btn" href="documentation.html">Read the Documentation</a>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-4">
<h3>Get involved</h3>
<p>AngularGap is hosted on <a href="https://github.com/angulargap/angulargap.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
</div>
<div class="col-md-4">
<h3>Contribute</h3>
<p>You want to help us and participate in the development or the documentation? Just fork AngularGap on <a href="https://github.com/angulargap/angulargap.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
</div>
<div class="col-md-4">
<h3>Found a bug?</h3>
<p>Open a <a href="https://github.com/angulargap/angulargap.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
</div>
</div>
<hr class="dashed" />
<div class="row">
<div class="col-md-6">
<h3>Talk to us</h3>
<ul>
<li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a> Email us at <span class="connect">info@flathemes.com</span></li>
<li>
<a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon=""></i></a>
<a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon=""></i></a>
<a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon=""></i></a>
<a title="Github" href="https://github.com/angulargap/angulargap.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon=""></i></a>
</li>
</ul>
</div>
<div class="col-md-6">
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<h3 style="margin-bottom: 15px;">Newsletter</h3>
<form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-info"></span>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
<hr class="dashed" />
<div class="copyright clearfix">
<p><b>AngularGap</b> <a href="getting-started.html">Getting Started</a> • <a href="documentation.html">Documentation</a> • <a href="angularicons.html">Icon Fonts</a><!-- • <a href="examples/">Examples</a> --></p>
<p>© 2014 FLATHEMES, Inc. All rights reserved. Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48011661-1', 'angulargap.github.io');
ga('send', 'pageview');
</script>
</body>
</html>