当前位置:Gxlcms > JavaScript > Angularjs基础知识及示例汇总_AngularJS

Angularjs基础知识及示例汇总_AngularJS

时间:2021-07-01 10:21:17 帮助过:6人阅读

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

Angularjs官网:https://angularjs.org/ 官网有demo,访问可能需要FQ

Angularjs中国社区:http://www.angularjs.cn/ 适合初学者

引用文件:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

使用angular注意

引用angularjs库:https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1.... 可以在本节示例的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'}}

http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html

事件绑定使用小案例

代码如下:


单价:
数量:


总价:{{(price) * (quantity)}}

注:

涉及html5的input:http://www.w3school.com.cn/html5/att_input_type.asphttp://www.w3school.com.cn/html5/att_input_type.asp">http://www.w3school.com.cn/html5/att_input_type.asp

ng-init:设定初始值



http://2.liteng.sinaapp.com/angularjsTest/event-bind.html

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

代码如下:

{{value}}


http://2.liteng.sinaapp.com/angularjsTest/ng-init.html

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

代码如下:


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




  • [{{$index+1}}]:{{friend.name}}年龄为:{{friend.age}}


http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html

ng-click:dom的点击事件

代码如下: