Hello again guys, after exploring ionic framework for several times, now let’s discuss about ionic 1 and ionic 2 (which is now is still in beta version, current beta 8).
I’ve been learing for the last 2 months (o my good, may be it took so long) *or because no progress on my project, i learn about ionic, both ioinic 1 and 2 (beta). I have 2 projects, at first, both using ionic 2, but at the end, my senior said the project would be in ionic 1 (stable) for development because we don’t have so much time and we need stable version that have everythings work well. As we know, in beta version some function still can’t be used (read, http://blog.ionic.io/ ) and may be we don’t think much about migration.
As for my second project, until this time i still make it in ionic 2. Because we still have time to build, and we don’t need some complex function right now, we still develop from the very beginning. Have enough time to wait about ionic 2 issues. And with current beta version, we still had enaugh. Based on what i’ve read here.
Ionic 1 using angular 1, ionic 2 using angular 2. Here’s good article for you to read : http://www.joshmorony.com/7-reasons-why-ionic-2-is-better-than-ionic-1/
I’ll write some for you :
- Organization and Structure
In Ionic 2, every page or component in your application has its own folder with its own class file, template file and style file. If I have two pages in my application, Home and About, I would have the following structure :- home
-
- home.js
-
- home.html
-
- home.scss
- about
-
- about.js
-
- about.html
-
- about.scss
While ionic 1 project collect all html files in templates folder, and all js files in js folder, but you can still organized your ionic project file just like the structure above, but it’s not the default style that was used. It would require prior knowledge and motivation to achieve a sensible and scalable structure like this in Ionic 1.
- Tooling
ionic g page mypageyou run it from CLI, and you would have MyPage folder with the following :
- mypage
-
- mypage.js
-
- mypage.html
-
- mypage.scss
With the Ionic 2 CLI you can automatically generate pages, providers, tabs, pipes, components and directives and it will set up all the files you need and some boiler plate code for you.
- Navigation
with ionic 1 you need to define $stateProvider like this$stateProvider.state('intro', {url:'/',templateUrl:'templates/mypage.html',controller:'IntroCtrl'})and for ionic 2 , you can do it just like this
this.nav.push(mypage);
you can push a page onto the navigation stack to make it the current page, and you can pop a page to remove it from the navigation stack and go back to the previous page. Just like pushing and popping an array. - Template syntax
Ionic 1:1<imgng-src="{{photo.image}}"/>Ionic 2:
1<img[src]="photo.image" />The difference here is inconsequential really, but the second code block certainly looks cleaner. Here’s another example:
Ionic 1:
1<buttonng-click="doSomething()">Ionic 2:
1<button(click)="doSomething()"> - Building
In Ionic 2 almost all of your coding will be done inside of the app folder, which is completely separate to the www folder which contains the code that is actually served to the browser. When you run an Ionic 2 application, the code in the app folder is automatically transpiled and bundled into a single Javascript file which is copied into the www folder and served. For the most part, you don’t have to touch your index.html file at all.Of course, you can read more about it here : http://www.joshmorony.com/7-reasons-why-ionic-2-is-better-than-ionic-1/ and Josh Morony also provide a good e-book for us to learn about ionic 2, it’s so helpful. You can also buy it here : https://www.joshmorony.com/building-mobile-apps-with-ionic-2/?utm_source=homepage&utm_medium=banner&utm_campaign=incontent#buy
Also, if you already have ionic 1 project, may be you want to read about ionic 2 migration here : http://ionicframework.com/docs/v2/getting-started/migration/
Thanks for visiting my blog! Cheers ^^,
Live, Laugh, Love ~~ My Code 