前几天想用phonegap开发一些HTML5应用,选择了ionic框架,觉得ionic框架的感觉很舒服,不想是用bootstrap开发的应用似的手机网站的感觉。
ionic是基于Angular.js开发的,我对前端的认识也不是很深刻,还是停留在Node.js的认知,虽然听说过Angular.js也没有精力去研究一下,这次写一下Angular.js的学习过程。共勉。
通常我们会有HTML来构建静态的应用,会有两种形式来做HTML的动态效果
1、类库:例如jQuery可以调用一些接口,然后我们来确定什么时候来使用该类库
2、框架:这是已经实现了的一些功能的应用,我们在使用时只需要提供填充业务逻辑即可。
Angular.js通过使用标识符的结构来使浏览器识别更多的语法,包括:
使用DOM控制结构来实现迭代或者隐藏DOM片段;
支持表单和表单的验证;
能将逻辑代码关联到相关的DOM元素上;
能将HTML分组成可重用的组件。
第一个例子就是Hello World实例 (其实我下载Angular也打不开官网,回家有mac挂VPN下载再说...给共享一下)
<!doctype html>
<html ng-app>
<head>
<script src="js/angular.min.js"></script>
</head>
<body>
Hello {{'World'}}!
</body>
</html>
哎,<html ng-app>是什么意思?不是<html lang="en">么?
这个ng-app的意思是使用angular.js处理整个页面并且引导应用,那么这个页面就是angular.js处理中的文件了。
<script src="js/angular.min.js"></script>
这里是载入angular.js脚本,接下来
Hello {{'World'}}!
{{}}内部的是绑定的表达式,这个表达式是就是‘world’。
那么这些已经了解了就可以创建更复杂的Hello World了,例如:
<!doctype html>
<html ng-app>
<head>
<script src="js/angular.min.js"></script>
</head>
<body>
Your name: <input type="text" ng-model="yourname" placeholder="World">
<hr>
Hello {{yourname || 'World'}}!
</body>
</html>
此时就不需要注册一个监听或者事件处理程序了。
angular.js的应用的模板(template)即可以使用我们自己的HTML模板,而且在逻辑结构上也与普通的AJAX有所差异以及不需要绑定任何监听事件。