未加星标

angular.js和ionic框架搭建一个webApp angularjs webApp

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

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

AngularJS有五个主要核心特性,如下介绍:

双向数据绑定—— 实现了把model与view完全绑定在一起,model变化,view也变化,反之亦然。

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

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

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

指令—— 可以用来创建自定义的标签,也可以用来装饰元素或者操作DOM属性

ionic简介:ionic是一个强大的_混合式/hybrid_html5移动开发框架,特点是使用标准的HTML、 CSS和javascript,开发跨平台(目前支持:Android、iOS,计划支持:windows Phone、Firefox OS) 的原生App应用。


angular.js和ionic框架搭建一个webApp angularjs webApp
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)


angular.js和ionic框架搭建一个webApp angularjs webApp
上述图片

我现在创建一个空白的项目 ionic start myApp blank


angular.js和ionic框架搭建一个webApp angularjs webApp
cmd窗口

然后我们看到有myApp项目生成。如下目录


angular.js和ionic框架搭建一个webApp angularjs webApp
然后打开index就能运行项目了

然后我们用浏览器打开index就可以看的如下图的东西了。


angular.js和ionic框架搭建一个webApp angularjs webApp
index.html

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


angular.js和ionic框架搭建一个webApp angularjs webApp
项目结构

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

下面先从app.js说起
angular.js和ionic框架搭建一个webApp angularjs webApp
app.js

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


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

把6个文件包合成一个了,你可以分别百度看看各是什么包,留给你们思考。

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

上述是ui-router的基本用法,详情用法可以去查看官方文档。

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

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


angular.js和ionic框架搭建一个webApp angularjs webApp
homeCtrl

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

angular.module(‘myApp’) 就是载入刚才创建的模块,然后设置一个叫做homeCtrl的controller,

格式一般都是angular.module(‘myApp’).controller(name, [params, function(params) {}])。

创建完成homeCtrl之后呢,在index.html中引用,如下图:


angular.js和ionic框架搭建一个webApp angularjs webApp
记得在app.js下面引用

好了,我们根据刚才配置的路由创建完了controller,现在就差模板了。

创建home模板

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

如下图:


angular.js和ionic框架搭建一个webApp angularjs webApp
home.html
在项目中我们这样写着,凡是带有都是ionic框架自带的。这是一个指令,如果你还不明白指令什么意思,没关系。你就当做一个带有某些功能的自定义标签。
创建home.html模板和homeCtrl.js之后。我们试着启动,在浏览器中打开index.html这个文件,这个文件作为一个项目的入口。ion-view就是这个页面的顶层,所有内容都在这个view中,ion-header就是那个头部,ion-content就是内容。这些都不是必须的,但是我建议这样写,因为ionic有些组件是需要在这些标签里面才能起作用的。然后看到如下图:
angular.js和ionic框架搭建一个webApp angularjs webApp
index.html

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

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

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

1、创建一个app.js,首先能启动项目,然后配置路由。其中路由需要模板和controller那么问题来了,接着看2、3、步。

2、然后创建模板,XXX.html模板。

3、最后创建XXXCtrl.js的controller。

编写控制器与模板

下面来点有意思的吧,先来个轮播图。那就用ionic框架自带的吧,具体查文档即可,如下图:


angular.js和ionic框架搭建一个webApp angularjs webApp
添加如下html

刷新浏览器如下图:


angular.js和ionic框架搭建一个webApp angularjs webApp
多了banner

好了,这证明我们成功了,可以滑动,可以自带切换。其实还有很多功能,可以查阅文档尝试。一般由于手机网站banner都是从后台读取数据的,那么我们来改写。在controller获取数据,然后赋值给scope变量,由于页面和对应controller的scope有关联,所以对应页面上的属性也会变好,是不是还是不太明白,那么来看代码吧。homeCtrl如下:


angular.js和ionic框架搭建一个webApp angularjs webApp
homeCtrl
angular.js和ionic框架搭建一个webApp angularjs webApp
home.html

我们把代码改成

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

2、之前由
angular.js和ionic框架搭建一个webApp angularjs webApp
这种变成
angular.js和ionic框架搭建一个webApp angularjs webApp
从服务器获取数据

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:angular.js和ionic框架搭建一个webApp angularjs webApp
本站链接:http://www.codesec.net/view/534540.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(75)