利用Angular2 + Ionic3开发IOS应用实例教程

前端之家收集整理的这篇文章主要介绍了利用Angular2 + Ionic3开发IOS应用实例教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

从 Angular1 到 Angular2

Angular2 作为著名前端 MVVM 架构 Angular1 的继承者,从一定程度上说,引领了新一代 Web 前端开发技术的革新。从最新版的 ember.js,react.js,vue.js 中,可以看到这几种技术相互借鉴,取长补短,最终向一种技术方向演进。

组件化技术的崛起

Angular1 也有组件,叫另外一个名字:指令。在 Angular1 中,指令是 DOM 元素紧密结合的一段包含控制逻辑、数据管理的代码。在指令中,我们可以清楚的看到 Angular1 对于 Jquery/DOM 技术的使用,以及手动对 Angular 组件进行生命周期的管理。要知道,这些在一般的 Angular 控制器/页面模板的开发中,是不用被关心的。

Angular2 把组件扩大化,使这种类似于指令化的开发应用到页面开发中。这样有什么好处呢?

  • 增加了开发人员页面开发的灵活性
  • 使用新的文件引用技术,这点我们在 Webpack 的革新中具体阐述
  • css 的分离化管理

如果了解其他的开发技术,可以发现组件化渐渐的统治了前端开发领域。从 ember.js,vue.js,到 React.js,组件化技术都被广泛应用。

从 grunt/gulp 到 Webpack 的技术革新

Task runner,从最早的 grunt,到 gulp,是服务于应用程序的一些控制程序。有帮助开发人员进行开发、运行单元集成测试、帮助产品发布等等一系列功能,一般我们依赖于第三方的程序来实现,例如 gulp。但是 npm 本身就有 task runner 的功能,如清单 1,scripts 中包含了可以运行的 ionic 任务。使用类似 npm run clean 就可以运行任务,不需要其他依赖。

清单 1. Npm 配置提供 task runner 功能

这就有一个问题了,为什么有 npm task runner,还要使用三方的 gulp 来完成此项功能呢?因为 npm task runner 太简单了,从字面上看,只是一条 shell 命令。但是 gulp 能做什么呢?如清单 2 是一段用 gulp 向 index.html 中注入相应的 bower_components 的任务。可以看出,gulp 任务复杂,需要写代码

清单 2. Gulp 配置注入 index.html 相关的 js 文件

Webpack 代替了 grunt/gulp。为什么这么说?因为,Webpack 通过插件提供的能力,可以完成打包、扰码、开发、调试及 css 处理等任务。这块和 grunt/gulp 的功能重复了。事实上,也可以使用 gulp 来运行 Webpack,但是这种设计冗余了,gulp 的存在完全没有必要。

此外,Webpack 还有一项重要的功能,它改变了代码之间依赖的表示方法。上面的 gulp task 中 wiredep 用来在 index.html 中注入项目中所有的 bower 依赖,如清单 3。可以看出,通过浏览器的支持,js 之间可以相互引用,相互依赖。

清单 3. Wiredep 注入引用的 js 文件

猜你在找的JavaScript相关文章