The ionic documentation is very frustrating. First of all I can't install it via the method described on the site, on my Mac or PC I get a "Your version of Cordova is too old. Please reinstall." error and despite following instructions I can't fix it.
Tbh I'm not a huge fan of installing things on the command line if I can just download the files (a la jQuery mobile) and get on with it. So I got the latest Ionic beta and I've been trying to build some tests with it. The todo app on the Ionic site pretty much works (though the project list text is white when you Phonegap Build it).
Anyway, my question is this: Which elements am I supposed to use for building - the CSS ones or the JavaScript ones?
I'm hoping I'm missing something really obvious but I've used the docs here: http://ionicframework.com/docs/components/ and here: http://ionicframework.com/docs/api/
Let's take headers. The CSS page says you can build them like this:
<div class="bar bar-header bar-light">
<h1 class="title">bar-light</h1>
</div>
and the JavaScript page says like this:
<ion-header-bar class="bar-light">
<h1 class="title">bar-light</h1>
</ion-header-bar>
Both work for me, locally at least. So which is it? The CSS elements aren't all mirrored in the Javascript page. I'm just baffled by this and I don't want to use the slower, less efficient or less flexible method.
Essentially, Ionic is both a css framework and a javascript framework.
You could theoretically use just the css class and build an app that way.
But since Ionic is built on top of angular, it allows us to create simple elements that already have those classes applied to them. So let's look at an example.
Classes
<ul class="list>
<li class="item" ng-repeat="item in items">
{{item.name}}
</li>
<ul>
Directive
<ion-list>
<ion-item ng-repeat="item in items">
{{item.name}}
</ion-item>
<ion-list>
Both of these two blocks will render the exact same thing. A element with a class of list and some items inside that with a class of item.
The difference is, if you wanted to add some functionality with the lists (reorder the items, swipe option buttons) you would want to use the directives. Because we're using directives, we can use the pre-defined functionality and not have to have a user wire that logic up themselves (like you would for a jQuery plugin).
Now this example is quite tame, but you can imagine this in the context of our Sidemenu component. While you could technically build out the sidemenu using classes, you would have to wire up the logic yourself, which is not ideal.
Hopefully this explains things a bit better.
You can have pretty good examples from website codepen.io/ionic/
Always try to use the latest versions of library (as of now it is 0.9 beta), latest version are more faster and efficient.
I have used Phonegap build, and referred only ionic library and css files, it was cool.
You can use either the JS or the CSS method. I personally prefer the CSS method.
You do not need to use the CLI to install Ionic. Simply download all of the files here on Ionic's GitHub to your project and use the references here from Ionic's guide in your index.html. Your app will be able to use all of Ionic and Angular.js!
Related
I like the component based method of creating different folders for different components.
So I currently have:
- components/
- heading/
- heading.css
- heading.js
- heading.html
I want my html to look like the code below for the heading (includes both bootstrap and custom css classes):
<body>
<div class="container text-white">
<div class="position-relative pb-5">
<h1 class="position-absolute top-0 start-50 translate-middle-x display-1">HEADING</h1>
</div>
</body>
How do I achieve this? Should I import this html into js (I am using webpack) or should I add these classes manually in js after creating and appending the two divs to the body?
I know the second option is tedious but I don't think the first option will make the heading reusable for other pages. Is there a better way that I have not mentioned?
Your question is difficult to answer because what can be "the better way" depend of your project and what you are targeting to do with.
But i think that you start coding, so you maybe want to import your Javascript code inside your html heading.html page, and same for your css file (using Bootstrap is not an obligation, if you learn something, use CSS directly should be better and efficient).
Webpack will just follow what you do and the way you will setup it to do to provide one or any bundled files to use by your server. It is not related to your project the way you configure it. I mean, you can just build your project and care about webpack at the end or directly configure Webpack and go for your project (if you want some splited files for CSS you can also config Webpack for that, and also for dynamic update of your bundle's files.But this has nothing to do with your question.
If your question is "how to import a html file (let's said: the header's one) inside the main one", then you can do it from Javascript code. You can then select the html tag for that, or use an id.
As i told you, for me it is difficult to help you more with vague question, because it can be many different way to practice to be "the best way" (and also "best" can be an opinion).
Hope this would help you a bit.
This is my short problem, in my page I have an old version of Materialize, and I have seen in the last version of it that they have added the class "xl" to define grid's sizes.
If I upgrade all files, my page will break, because for example, in my JS file I open the modals with the function "leanModal()" and in the new version they use "modal()" and if I upgrade it, is a lot of time!!.
My questions is the next:
If I only need the class "xl" can I upgrade only the CSS File? If I would make it, would have a problem in the future with the JS File?
My version of Materialize: v0.97.7 (2014-2015)
The actual version of Materialize: v0.98.1 (2017-Now)
I'm not all that familiar with Materialize but I believe it has components that are implemented with a mix of CSS, HTML and JS. If you are using any of these components then yes, there's a possibility that other things might break. Typically these components will be expecting a certain HTML structure and CSS classes to be available/used. If the name of something has changed in one area of the framework then it's reasonable that something else could have changed elsewhere. You'd have to verify that yourself.
Yes, You will have problems because the JavaScript calls specific classes in the CSS for that version.
I have downloaded a html5 template named Codester. It works on top of Bootstrap 2.
But as of now the current version of Bootstrap is 3. And I am quite familiar with that so I want a method with which I would be able to work in bootstrap 3 but have that template run in bootstrap 2.
Or is there any simple process which will convert that template to bootstrap 3?
You can do this yourself. Download the template, and update it using this information:
http://getbootstrap.com/migration
http://www.bootply.com/bootstrap-3-migration-guide
There are tools that can help:
http://upgrade-bootstrap.bootply.com
http://code.divshot.com/bootstrap3_upgrader
http://twitterbootstrapmigrator.w3masters.nl
But given that you need a template, I don't think this is what you want. It's probably not easy enough, as there are always problems that need a deeper level of knowledge to solve.
Tip: Ask the author of the template! (I cannot find contact details)
First of all I warn you i am new in HTML development...
I am creating a website using Bootstrap. I have some buttons on the left as you can see in the screenshot and I want to content on the right to change without having to load the whole page.
Any help here? Thanks a lot!
You'll need to use JavaScript, which is the standard programming language that ships with all modern web browsers. In JavaScript, there is an API called the DOM (Document Object Model) which represents the current page as an object. You can use that API to change the text contained in the div tag.
Here is the W3Schools page on the DOM.
There are a few JavaScript libraries that try to abstract and simplify DOM manipulation. The most famous is jQuery.
You can try using AngularJS or any MVC framework/library. These might be a little heavy-handed for something simple, but they'll help achieve what you're looking for. Pretty good to learn these anyway as they're in high demand.
Here's AngularJS's homepage with docs and tutorials. You'd want to look at information on routing view templates using the ngView module, or you can use ui-router, created by Angular's UI team (my personal favorite) for nested views.
PS: Stay away from W3Schools
http://www.w3fools.com/
I would like to create a angularjs widget that can be embedded in third-party websites with minimal code such as
<script src=mywidget.js type=...></script>
<div id="mywidgetContainer"></div>
or similar.
I found some resources such as this article for developing a widget using jquery http://alexmarandon.com/articles/web_widget_jquery/.
How would it be done using Angularjs? In what clever ways can angular features such as directives/views etc. be harnessed to this purpose? What are the gotcha's if any? Your thoughts/suggestions/opinions/experiences, please.
You should also keep in mind the possibility that the 3rd party website also uses angular,
and potentially a different version.
Check Multiple versions of AngularJS in one page
This is what seems to have worked for me. In the script I set the innerHTML property of the Container div to the angular view markup code. The key point is to use angular.$bootstrap to manually bootstrap the app after the page load. I did not see any particular value in creating a directive. A directive would need to be part of the view code that would still need to be assigned to the container using innerHTML.