AngularJS起头前端接触angular.js+ionic框架,作者那样做好呢?

题材:angular.js+ionic框架,要适于分裂手提式有线话机头部与内容的惊人 

从前并未有接触过angular.js,认为那么些框架Vue一样,上手还相比较简单,后来,在实际的做事个中,笔者才理解本身想的太简单了。

第一回在iphone上付出的App的时候,将content离ion-header-bar中度调至十px,从UI上刚刚达到了设计师的要求,等切换成了安卓手提式有线电话机观察,才察觉后边的10px中度居然变成了30px中度,然后本人又在Html少校中度增添20px,结果到了Motorola手提式有线电话机,content与header居然有陆续,高度给的太少了。

自家是新手一枚,第壹遍参预项目耗费,蒙受这几个标题,来回折腾了多少呛。打算写js来判定它是iOS系统只怕android系统,不过又不领会从哪里出手。后来,在同事的扶植下,笔者才知晓,原来ionic框架已经把那个难点想好了,不用小编本身去写代码判断。

它自身就有三个$ ionPlatform方法,在控制器中得以判断。

于是乎,作者就在controllers.js 里开始展览判断:

  if (ionic.Platform.isIOS()) {  $scope.position_headbar_top=’106′; 
$scope.content_top=’108px’;        }    else{
$scope.content_top=’88px’; $scope.position_headbar_top=’86’;         
}

然后在HTML里面 的 ion-content
写上content_AngularJS,top。来回切换数十二次,发现中度能够自适应iOS和android,这么些难点化解了,心里至极其乐融融,同时也多少不安。

因为ionic框架小编也从来不接触过,没有想到着框架这么便利,让小编不由得想要进一步去精通它。于是,笔者上网查了查Ionic,官网文书档案【http://www.ionic.wang/js\_doc-index-id-21.html】上这样介绍:

Ionic既是二个CSS框架也是贰个Javascript
UI库。许多零部件须要Javascript才能生出神奇的功力,就算平时组件不需求编码,通过框架扩大能够很简单地应用。Ionic服从视图控制方式,通俗的明亮和
Cocoa
触摸框架相似。在视图控制方式中,大家将界面包车型大巴分歧部分分成子视图或含有别的视图的子视图控制器。然后视图控制器“驱动”内部视图来提供相互和UI作用。三个很好的例子便是标签栏(Tab
Bar)视图控制器处理点击标签栏在1多元可视化面板间切换。Ionic
是时下最有潜力的一款 HTML伍 手提式有线电话机应用开发框架。通过 SASS 营造应用程序,它
提供了比比皆是 UI 组件来赞助开发者开发强大的采纳。 它采取 JavaScript MVVM
框架和 AngularJS 来增进应用。提供数据的双向绑定,使用它变成 Web
和活动开发者的联手选拔。

下一场从头初始精晓那些框架,于是,笔者就起来写那几个笔记,来记下团结在干活以及学习中相见的难题,分享出去,让投机学以致用。

相关文章