ionic应用构造
来源:互联网 发布:java视频教程百度网盘 编辑:程序博客网 时间:2024/05/17 08:46
ionic应用构造
欢迎大家到我的博客关注我学习Ionic 1和Ionic 2的历程,共同学习,共同进步。
注:本篇乃是译文,难免会有疏漏,欢迎大家批评指正,大家也可移步原文。
如果你从没有接触过ionic或angular, ionic的构造对你来说是一个新事物。对我来说,jQuery的学习曲线有些陡峭,但是一旦你理解了其概念,对你来说那就成为了很有用的工具。
首先要理解的是Angular使用的是MVC模式,这是Angular的核心,这就意味着如果你如果曾接接触过MVC模式,那其基本概念对于Angular来说同样是适用的。
在本文中,我会向大家讲解一些ionic应用的构造以及ionic是怎样组织其各个模块的。
前言
每个Ionic应用基本都可以被分解为5个组成部分:Views、Controllers、Data(Services和Factories)、App Configuration以及Directives。前三个Views、Controllers以及Data就是组成MVC架构的三要素。
Views
Ionic中Views可以理解为视图层,经常被存放在/templates文件夹中,而且每个单独的视图存放在一个单独的.html文件中。视图是“页面”或者用Ionic的概念来说称之为“状态”(state)的安身之所。在Ionic中,这些.html文件和下面类似:
<ion-view title="About"> <ion-content> My super cool content here! </ion-content></ion-view>
这里的title
属性是用于Ionic其他Directives中的,最常用的就是ion-nav-bar了。
Views中可以使用数据绑定:
<ion-view title="About"> <ion-content> My super cool content here! My name is {{name}} </ion-content></ion-view>
{{name}}
可能是在Controllers中定义在$scope
内的变量,如:
$scope.name = "Andrew";
当Views所表示的页面被加载时,页面上将显示“My super cool content here! My name is Andrew”。
当然,在Views中还可以使用Ionic Directives、Angular逻辑表达式,如if语句,循环等等。
Controllers
Controllers是应用的中枢,因为在Controllers中定义了程序的逻辑结构并且处理了数据。当你在Angular中跳转到某个页面,其实背后需要Controller的支持。Controller从Data(Services或Factories)层中获取数据并将其绑定到View层。Controller将数据分配给$scope
变量作为其内容,然后可以像上节展示地那样将数据绑定到View上,从而显示出来。
例如,我要跳转到应用中的/#mySuperPage
路径,这将会调用对应的Controller(很可能命名为mySuperPageCtrl
)。假设mySuperPageCtrl
使用的页面superpage.html如下所示:
<ion-view title="About"> <ion-content> My super cool content here! My name is {{user.name}}. </ion-content></ion-view>
mySuperPageCtrl
需要调用Service awesomeService
得到代表用户的变量,然后将其分配给$scope
对象:
.controller('MainCtrl', function($scope, $stateParams, awesomeService) { $scope.user = awesomeService.getUser();})
我们假设Service awesomeService
的getUser()
方法将返回一个包含了”name”属性的对象:
var user = { name:'Andrew';};
当应用跳转到/#mySuperPage
路径时,mySuperPageCtrl
会被调用,获得user
变量并将其分配给$scope
对象,从而绑定到View中,View中获取$scope.user.name
的值并显示:
<ion-view title="About"> <ion-content> My super cool content here! My name is Andrew. </ion-content></ion-view>
Data(Factories/Services)
Ionic应用的Data层为整个应用提供数据,通常是通过后台或网络服务获取。Controllers层从Data层获取数据,并将其绑定到Views层。Data层通常使用Factories或Services。这里介绍了他们之间的区别。不过现在只需要理解他们或多或少都有相同的目的,为了简单起见,我们将他们统称为“数据源”。
“数据源”通常会执行http调用并返回promise
,当promise
被resolve
时能够获取数据,关于promise
请看“JavaScript Promises和AngularJS $q Service”Part 1 (基础篇)以及“JavaScript Promises和AngularJS $q Service”Part 2 (教程篇)。Angular使用$http module进行http调用,看起来和jQuery很相似:
$http.get("some url here");
如果想在Controllers从Data中获取数据之前对数据进行处理,可以使用如下处理方式:
$http.get("some url here").then(function(response){ //Do stuff here return response;});
所以,一个“数据源”就可能被定义成这样:
.factory('awesomeService', function($http) { return { GetUser: function() { return $http.get("some url here").then(function(response) { //Process Stuff Here return response; }); }, }})
在Controllers中使用时可能会像这样:
.controller('MainCtrl', function($scope, $stateParams, awesomeService) { awesomeService.getUser().then(function(response){ $scope.user = response; });})
App Configuration
App Configuration定义了应用的states/routes,并将Views和Controllers关联,还定义了应用默认的route。就像ionic-starter-tabs project中的.config方法中定义的:
.config(function($stateProvider, $urlRouterProvider) { $stateProvider // setup an abstract state for the tabs directive .state('tab', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html" }) .state('tab.dash', { url: '/dash', views: { 'tab-dash': { templateUrl: 'templates/tab-dash.html', controller: 'DashCtrl' } } }) // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/tab/dash');});
最简单的情况下,就像上面的代码中展示的那样,使用$stateProvider
将指定的页面或者说Views与指定的Controllers对应起来。
Directives
Directives官方文档告诉我们:Directives是DOM元素的标记(如属性、元素名、注释或是CSS类),这些标记可以使AngularJS的HTML编译器($compile)为这些DOM元素绑定指定的行为。
简单来说,Directives可以是作用在DOM元素上的属性或CSS类,也可以是独立的DOM元素。例如,在Ionic中,所有类似ion-*的元素都是Ionic封装好的Directives,如:
<ion-list>
这里是Ionic封装ion-list
的源码:
IonicModule.directive('ionList', [ '$timeout',function($timeout) { return { restrict: 'E', require: ['ionList', '^?$ionicScroll'], controller: '$ionicList', compile: function($element, $attr) { //... etc ... } } }]);
上面的代码中有很多内容,不过有两处关键需要注意:
restrict: 'E',
restrict
的值指定了Directives的行为:作为属性、元素或是CSS类。
'A' 表示仅用作属性'E' 表示仅用作元素'C' 表示仅用作CSS类'AEC' 表示上述3者皆可使用
可以看出ion-list
只能用作元素。
这里要注意定义Directives的名字为ionList
,但使用时却需要使用ion-list
,这是Angular的规则,定义时需要使用驼峰规则,使用时使用”-“符号连接,并且全小写。
总结
在ionic应用中,Controllers层作为Data层和Views层的桥梁,符合MVC的思想;App Configuration是Controllers和Views的粘合剂;Directives增强了DOM元素的功能。
个人推荐
推荐一款个人使用了半年的理财产品:创建了6年的挖财,新人收益36%,7天18%,1年10%,注册送308元券
- ionic应用构造
- ionic中应用sass
- ionic复选框应用
- ionic应用发布
- 搭建Ionic应用框架
- Ionic打包Android应用签名
- ionic搭建应用模板框架
- ionic开发移动应用总结
- ionic2 @ionic-native/camera应用
- Ionic:HTML5移动应用界面框架
- ionic更改应用图标和启动画面
- ionic angularJS phoneGap(cordova) 搭建app应用
- angularjs,ionic,cordova简单应用示例
- 使ionic应用更加贴近原生
- 我的第一个ionic应用的
- 极光推送在ionic项目的应用
- ionic应用集成极光推送插件jpush
- ionic上拉下拉效果应用
- java学习小结 11.9
- Android源码学习(一)
- 阿里巴巴常考面试题及汇总答案
- OPENGL深度缓存精度问题及解决
- maven错误找不到jar包
- ionic应用构造
- Linux推荐书籍
- 一个menuconfig 配置引起的致命问题——一生难忘!
- 【好文收藏】理解python多线程
- poj 3126 强行BFS
- poj 2010 Moo University - Financial Aid 优先队列
- 正则表达式
- 在VC++中创建的项目中添加一个资源文件
- 如何学好C++语言