Angularjs基础知识及示例汇总

前端之家收集整理的这篇文章主要介绍了Angularjs基础知识及示例汇总前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

angularjs是google开发的一款高大上的前端mvc开发框架。

Angularjs官网: 官网有demo,访问可能需要FQ

Angularjs中国社区: 适合初学者

引用文件

使用angular注意

引用angularjs库:.... 可以在本节示例的github上下载 需要在你使用的区域加上ng-app="appName",或者直接ng-app(全局)。 设置控制器 ng-controller="Ctrl"。 测试一下示例请注意以下几点

需要在head之前引入angularjs代码,作者使用的是angular-1.0.1.min.js,请注意版本区别。 所有小示例都是在以下区域运行,记得在作用区域加上 ng-app。 下面通过一些小的案例来说明angularjs默认的常见的指令和用法

hello world程序(双数据绑定)

使用ng-model={{name}}来绑定数据

代码如下:
hello:{{name || 'liteng'}}

事件绑定使用小案例

代码如下:
单价:数量: 总价:{{(price) * (quantity)}}
注:
涉及html5的input:http://www.w3school.com.cn/html5/att_input_type.asp>
ng-init:设定初始值

ng-init:可默认指定属性值

代码如下:

ng-repeat:用于迭代数据类似于js中的 i for info

代码如下:

我有{{friends.length}} 朋友.他们是

ng-click:dom的点击事件

代码如下:
{{a}}

ng-show:设置元素显示

注:ng-show="!xx":在属性值前面加!表示确定显示,如果不加!表示不确定则不显示

代码如下:

ng-template:可以加载模板

代码如下:

tpl.html

代码如下:
hello

$http:一个类似ajax的方法很管用

代码如下:
HTTP请求-方法1

方法2

  • 以上所有的code:https://github.com/litengdesign/angularjsTest

    实现的demo:http://2.liteng.sinaapp.com/angularjsTest/index.html

    至于angularjs的路由(router)和指令(directive)下次本人将单独拿出来讲。

    猜你在找的JavaScript相关文章