Angular.js学习笔记

前几天想用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>


在文本输入框绑定到一个叫"yourname"的模型变量中,再用{{}}添加到问候文本语中。

此时就不需要注册一个监听或者事件处理程序了。


angular.js的应用的模板(template)即可以使用我们自己的HTML模板,而且在逻辑结构上也与普通的AJAX有所差异以及不需要绑定任何监听事件。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章