Angularjs和Ionic框架搭建webApp

时间 2019-11-08

标签 angularjs ionic 框架搭建 webapp 栏目 AngularJS 繁體版

原文原文链接

本文原创版权归简书做者噜啦啦噜啦啦噜啦噜啦噜全部，转载请联系做者得到受权，并于文章开头标注原创做者及出处，以示尊重！html

文／噜啦啦噜啦啦噜啦噜啦噜（简书做者）
原文连接：http://www.jianshu.com/p/ea0dcf1d31c9
著做权归做者全部，转载请联系做者得到受权，并标注“简书做者”。前端

AngularJS简介：AngularJS 是一个为动态WEB应用设计的结构框架，提供给你们一种新的开发应用方式，这种方式可让你扩展HTML的语法，以弥补在构建动态WEB应用时静态文本的不足，从而在web应用程序中使用HTML声明动态内容。node

AngularJS有五个主要核心特性，以下介绍：android

双向数据绑定—— 实现了把model与view彻底绑定在一块儿，model变化，view也变化，反之亦然。ios

模板—— 在AngularJS中，模板至关于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当作DOM来操做，去生成一些指令来完成对view的数据绑定。angularjs

MVVM—— 吸取了传统的MVC设计模式针但又并不执行传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。web

依赖注入—— AngularJS拥有内建的依赖注入子系统，能够帮助开发人员更容易的开发，理解和测试应用。ajax

指令—— 能够用来建立自定义的标签，也能够用来装饰元素或者操做DOM属性apache

ionic简介： ionic是一个强大的_混合式/hybrid_HTML5移动开发框架，特色是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS）的原生App应用。npm

ionic简介

ionic主要包括三个部分：

CSS框架- 提供原生_App质感的CSS样式模拟_。ionic这部分的实现使用了ionicons图标样式库。

JavaScript框架- ionic基于AngularJS基础框架开发，遵循AngularJS的框架约束；主要提供了适应移动端UI的 AngularJS的扩展，主要包括指令和服务。此外，ionic使用AngularUI Router来实现前端路由。

命令行/CLI- 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova，依赖于平台SDK（Android & iOS）实现将移动web项目打包成原生app。

因为ionic使用了HTML5和CSS3的一些新规范，因此要求iOS7+/Android4.1+。在低于这些版本的手机上使用ionic开发的应用，有时会发生莫名其妙的问题。

安装ionic/Install Ionic

首先您须要安装Node.js. 其次, 安装最新版本的cordova 和 ioniccommand-line tools. 经过参考Android和iOS官方文档来安装.

npm install -g cordova ionic

经过Ionic建立一个项目

使用Ionic官方提供的现成的应用程序模板，或一个空白的项目建立一个Ionic应用。

ionic start myApp blank 建立一个空白的app项目（下图1）

ionic start myApp tabs 建立一个带有tabs项目（下图2）

ionic start myApp sidemenu 建立一个带有滑动的项目（下图3）

上述图片

我如今建立一个空白的项目 ionic start myApp blank

cmd窗口

而后咱们看到有myApp项目生成。以下目录

而后打开index就能运行项目了

而后咱们用浏览器打开index就能够看的以下图的东西了。

index.html

接着下一步，咱们用编辑器打开index.html。观察里面所引入的文件，个人习惯把跟项目无关的文件删除了。你能够不删除，我也改动了部分文件的位置，之因此叫你观察里面引入的文件，就是怕你删错了，项目启动不了。改动完结构以下：

项目结构

其中配置文件，controller，driectives，filter,services,文件都是我新建的。

下面先从app.js提及

app.js

这个myApp须要在根节点启动。一个项目建议一个这样的模块。

上述路由config配置是基于ui-router,由于在index.html已经引入了ionic.bundle.min.js文件，这个文件把angular.js和ui-router及ionic所需的组件都帮咱们打包好了，因此引用很方便。
打开这个ionic.bundle.min.js看一下就知道合成了什么东西了，如图：

把6个文件包合成一个了，你能够分别百度看看各是什么包，留给大家思考。

$stateProvider.state(name, {
url: '',
templateUrl:'', // 这个是模板位置
controller: '' // 这个是对应模板的controller名称！记住是名称不是位置
});

上述是ui-router的基本用法，详情用法能够去查看官方文档。

app.js配置完，下面就配置controller

刚才咱们配置完了app.js，咱们要新建一个名字叫homeCtrl的controller。命名我建议XXXCtrl或者XXXController，固然以大家项目为标准。

homeCtrl

采用闭包的模式建立controller，为了保险防止没必要要变量污染的错误。其中

angular.module('myApp') 就是载入刚才建立的模块，而后设置一个叫作homeCtrl的controller，

格式通常都是angular.module('myApp').controller(name, [params, function(params) {}])。

建立完成homeCtrl以后呢，在index.html中引用，以下图：

记得在app.js下面引用

好了，咱们根据刚才配置的路由建立完了controller，如今就差模板了。

建立home模板

在刚才建立文档template文件夹当中，新建一个home.html。也就是刚才配置app.js中的路由中写的路径和名字，忘记的回头看看app.js是怎样写的。在刚才建立的home.html，写上以上内容

以下图：

home.html

在项目中咱们这样写着，凡是带有<ion-xxx></ion-xxx>都是ionic框架自带的。这是一个指令，若是你还不明白指令什么意思，不要紧。你就当作一个带有某些功能的自定义标签。
建立home.html模板和homeCtrl.js以后。咱们试着启动，在浏览器中打开index.html这个文件，这个文件做为一个项目的入口。ion-view就是这个页面的顶层，全部内容都在这个view中，ion-header就是那个头部，ion-content就是内容。这些都不是必须的，可是我建议这样写，由于ionic有些组件是须要在这些标签里面才能起做用的。而后看到以下图：

index.html

当看到页面和控制台都出现“hello world”文字，证实咱们成功了，项目启动成功。

建立app.js和html模板及homeCtrl模板总结

其实咱们写项目的思路：举刚才那个例子

一、建立一个app.js，首先能启动项目，而后配置路由。其中路由须要模板和controller那么问题来了，接着看二、三、步。

二、而后建立模板，XXX.html模板。

三、最后建立XXXCtrl.js的controller。

编写控制器与模板

下面来点有意思的吧，先来个轮播图。那就用ionic框架自带的吧，具体查文档便可，以下图：

添加以下html

刷新浏览器以下图：

多了banner

好了，这证实咱们成功了，能够滑动，能够自带切换。其实还有不少功能，能够查阅文档尝试。通常因为手机网站banner都是从后台读取数据的，那么咱们来改写。在controller获取数据，而后赋值给$scope变量，因为页面和对应controller的$scope有关联，因此对应页面上的属性也会变好，是否是仍是不太明白，那么来看代码吧。homeCtrl以下:

homeCtrl

home.html

咱们把代码改为

一、ng-repeat="item in views.slideData track by $index"，意思就是从$scope.views.slideData数组遍历，item是数组里面的某一项，track by $index实际上是性能优化，后续会讲，你也能够不写直接ng-repeat="item in views.slideData"

二、以前由<img src="路径"> 这种变成 <img ng-src="{{item}}",其中ng-src是一个angular自带的指令，item是数组遍历出来的路径

从服务器获取数据

啰嗦的话不说了，直接上案例。如图：

获取数据，输出到列表

既然要数据，那么先建一个服务，使用 angular.module 的 factory API建立服务，是最多见也是最灵活的方式。其实还有几种

factory()

service()

constant()

value()

provider()

，具体详情查文档，不过多数项目用这种（factory）建立方法就知足需求了。举个简单例子

factory() 方法是建立和配置服务的最快捷方式。 factory() 函数能够接受两个参数。

name （字符串）

须要注册的服务名。

getFn （函数）

这个函数会在AngularJS建立服务实例时被调用。

angular.module('myApp')

.factory('myService', function() {

return {

'username': 'auser'

};

});

要上咱们真实的示例代码了哦，以下图：

这个文件是当初新建的servers。

有同窗以为奇怪了，怎么会是app.factory呢？其实app就是angular.module('myApp',[])，我在app.js文件里面把angular.module('myApp'，[])赋值给全局变量app了。见下图：

app.js

咱们建好了servers。在index.html里面引入哦：

index.html

好！建立好servers.js，还有在index中引入。那么怎么在controller中调用呢？那咱们来看看改写后的controller，如图：

homeCtrl

控制台

咱们建立services到调用services里面的ajax请求都成功了，如何在homeCtrl中获取数据呢？

那就先从services改写开始,以下图：

services

homeCtrl怎么获取数据？看下图：

homeCtrl

调用myFactory.getList()方法为何后面还跟着一个then的。其实咱们使用内置的 $http 服务直接同外部进行通讯。 $http 服务只是简单的封装了浏览器原生的 XMLHttpRequest 对象。$http 服务是只能接受一个参数的函数，这个参数是一个对象，包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象，因为 $http 方法返回一个promise对象，咱们能够在响应返回时用 then 方法来处理回调。若是使用 then 方法，会获得一个特殊的参数，它表明了相应对象的成功或失败信息，还能够接受两个可选的函数做为参数。或者可使用 success 和 error 回调代替，至于promise对象是什么，这里就不一一叙述了，写起来篇幅比较大，仍是留给大家查文档吧。

promise.then(function(resp){

// resp是一个响应对象

}, function(resp) {

// 带有错误信息的resp

});

// 或者使用success/error方法

promise.success(function(data, status, headers, config){

// 处理成功的响应

});

// 错误处理

promise.error(function(data, status, headers, config){

// 处理非成功的响应

});

而后看看控制台输出什么，仍是看图：

控制台显示调用接口成功

OK!大功告成，咱们能够把这些数据绑定在$scope上，而后渲染到页面。仍是看图：

homeCtrl

home.html

列表变化

总结：

一、建立services并写好里面的服务，而后在index.html引入services。

二、homeCtrl中注入依赖services里面的factory服务，调用里面的方法。

三、在homeCtrl调用factory服务方法，而后获取数据。再把数据赋值给$scope。因此模板也能获取$scope里面的数据，那么页面数据就更新了。

编写过滤器

上面已经教会你们如何创建一个services服务获取数据，可是有时候咱们获取数据回来的数据作进一步修改显示在页面，下面假如咱们有一个需求，我想把姓名所有变成大写。

一、首先建立一个filter。

二、在index.html引入filter。（这个不说了，请看上面services怎么引入的）

filter.js

在home.html页面中，姓名这样写。

姓名：{{item.Name | toUpperCaseText}}

变成大写了

那么我如今想把城市变成小写，怎么弄？留给大家一个做业吧。

正如前面所见，建立自定义过滤器很是容易。建立自定义过滤器须要将它放到本身的模块中。过滤器本质上是一个会把咱们输入的内容看成参数传入进去的函数。上面只是一个简单的例子，其实就是把数据获取进来，数据进来了，你想怎样处理数据就怎样处理。至关于你小时候，你骗你爸爸妈妈零用钱的时候，钱到你口袋了，至于钱怎么用了，那是你本身的事。当你爸爸妈妈问你拿去干什么的时候，你告诉他了，那就至关于把数据处理完渲染在页面了。过滤器其实内置有不少很好用的，须要的时候时不时的查看文档就好了。用法就是这么简单。

过滤器总结

一、分析需求怎样的数据在页面，查阅内置过滤器是否知足需求。

二、假如需求内置过滤器不能知足，建立filter.js，编写处理数据逻辑。

三、在index.html引入过滤器。在须要用过滤器的加上“|”,例如：{{item.Name | toUpperCaseText}}

页面之间传递数据

当咱们写完home.html页面而且完成了homeCtrl，及经过services获取后台服务器的数据，展现到页面,证实咱们成功了一个小项目的大部分。你能够想象，一个项目都是获取数据，展现数据（至于怎样展现，点击展现仍是默认展现，这是交互性的东西），或者提交数据，提交数据本文并无说，可是咱们已经知道怎样获取了，提交还困难么。都是差很少的原理。本身翻阅文档看看$http的方法就能够解决了。咱们下面继续实现一个需求，点击刚才的某一项列表，跳到详情页。

新建一个详情页detail.html，新建一个detailCtrl的控制器，而且配置详情页路由。忘记了的能够看看前面新建home的步骤。（记得在index.html引入detailCtrl哦，不然会报下面的错，看图）

当咱们跳转detail路由时候，因为没引入对应的detailCtrl，会报错

下面展现路由配置及detail.html页面和detailCtrl.js

路由配置

detailCtrl

detail.html

咱们配置完路由和新建detail的页面及controller。咱们实现点击列表跳转到detail页面，并带上数据。我再啰嗦一次，本文带有<ion-xxx>都是ionic框架自带的，ion-view就是这个页面的顶层，全部内容都在这个view中，ion-header就是那个头部，ion-content就是内容。这些都不是必须的，可是我建议这样写，由于ionic有些组件是须要在这些标签里面才能起做用的。

那咱们点击列表

思路就是ng-click="views.goDetail(item)"; views.goDetail就是跳转到detail页面，跳转路由使用$state.go("XXX");XXX表明路由的名称，item就是你点击某一项的数据，看图：

ng-click,home.html中

homeCtrl

咱们点击列表的时候既能够，能够看到console把item的内容打印出来。

console.log(item)

如今需求要实现下面的详情图。

点击详情

如何实现从A页面==》B页面，而且把A页面的数据带到B页面。下面来探讨angular页面之间的传递数据方式。下面讲5种方法，可能有更多，可是我选经常使用的讲。

一、能够用$rootScope顶级做用域，从A页面赋值给$rootScope的某个属性，而后B页面获取数据赋值到页面。

homeCtrl

detailCtrl

detail.html

结果，如你们所愿详情页能实现刚才的效果了。

二、在A页面用$state.go("xxx", {obj});配置路由参数，而后在B页面用$stateParams对象获取url的参数。

homeCtrl,item是个对象来的，也能够是字符串

detailCtrl

使用这个方法从home页面传递过来的url

三、在services里面创建一个服务，在A页面把数据传递给这个服务，而后在B页面获取这个服务的值。为何能够这样作？由于services服务里面的方法是共享的，当项目初始化的时候services已经实例化了一次（服务是一个单例对象，在每一个应用中只会被实例化一次（被 $injector 实例化），而且是延迟加载的（须要时才会被建立）），因此不存在跳转页面就数据没了。（这个是最佳实践哦，不过也要看业务场景。这个是我最经常使用的）。

services.js

homeCtrl设置值

detailCtrl

detail.html

detail.html

页面之间的传递数据，以上是经常使用的3种。下面介绍没那么经常使用的：

利用localStorage、sessionStorage、cookie在A页面中存值，而后在B页面中获取值，这3个都是能够存储数据。他们之间的区别大家查文档吧，哈哈哈~~~~ 留给大家思考。

数据绑定

数据绑定，从刚一开始从服务获取数据，而后把数据绑定到$scope上，而后在页面输入{{}}花括号输出，这种就是数据绑定了。那咱们来个假设，如今有个输入框，输入框是多少，列表中的那我的的年龄是多少。

因为这个需求，就是双向数据绑定，能够ng-model用绑定一个变量，这个变量赋值给年龄，那么年龄也跟着变了。看下图：

detailCtrl.js

detail.html

页面显示

好啦好啦，初始化作完了。下面呢，咱们在input输入框值，改变一下input框里面的值，看看有什么变化。

改变了

输入框里面的值改变了，上面的年龄值也改变了。证实$scope.views.age的值改变了，这些就是数据绑定了。

数据绑定总结

当AngularJS认为某个值可能发生变化时，它会运行本身的事件循环来检查这个值是否变“脏”。若是该值从上次事件循环运行以后发生了变化，则该值被认为是“脏”值。这也是Angular能够跟踪和响应应用变化的方式。这个事件循环会调用$digest()循环（这个大家查查文档就能知道了）。这个过程被称做脏检查（dirty checking）。脏检查是检查数据模型变化的有效手段。当有潜在的变化存在时，AngularJS会在事件循环时执行脏检查（查阅文档）来保证数据的一致性。