当前位置：首页 > 资讯 > 技术文档

Angularjs基础知识及示例汇总

时间：2020-12-05 17:39 编辑：来源：阅读：
扫一扫，手机访问

摘要：Angularjs基础知识及示例汇总

angularjs是google开发的一款高大上的前端mvc开发框架。 Angularjs官网：[url=https://angularjs.org/]https://angularjs.org/[/url] 官网有demo,访问可能需要FQ Angularjs中国社区：[url=http://www.angularjs.cn/]http://www.angularjs.cn/[/url] 适合初学者引用文件：[url=https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js]https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js[/url] [b]使用angular注意[/b] 引用angularjs库：[url=https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1]https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1[/url].... 可以在本节示例的github上下载需要在你使用的区域加上ng-app="appName",或者直接ng-app（全局）。设置控制器 ng-controller="Ctrl"。测试一下示例请注意以下几点需要在head之前引入angularjs代码,作者使用的是angular-1.0.1.min.js，请注意版本区别。所有小示例都是在以下区域运行，记得在作用区域加上 ng-app。下面通过一些小的案例来说明angularjs默认的常见的指令和用法。 [b]hello world程序(双数据绑定)[/b] 使用ng-model={{name}}来绑定数据

[url=http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html]http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html[/url] [b]事件绑定使用小案例[/b]

[url= [url=http://2.liteng.sinaapp.com/angularjsTest/event-bind.html]http://2.liteng.sinaapp.com/angularjsTest/event-bind.html[/url] [b]ng-init:可默认指定属性值[/b]

[url=http://2.liteng.sinaapp.com/angularjsTest/ng-init.html]http://2.liteng.sinaapp.com/angularjsTest/ng-init.html[/url] [b]ng-repeat:用于迭代数据类似于js中的 i for info[/b]

[url=http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html]http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html[/url] [b]ng-click:dom的点击事件[/b]

[url=http://2.liteng.sinaapp.com/angularjsTest/ng-click.html]http://2.liteng.sinaapp.com/angularjsTest/ng-click.html[/url] [b]ng-show:设置元素显示[/b] 注：ng-show="!xx":在属性值前面加！表示确定显示,如果不加！表示不确定则不显示

[url=http://2.liteng.sinaapp.com/angularjsTest/ng-show.html]http://2.liteng.sinaapp.com/angularjsTest/ng-show.html[/url] [b]ng-hide:设置元素隐藏[/b]

[url=http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html]http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html[/url] [b]运用ng-show制作toggle效果[/b]

[url=http://liteng.org/sites/default/files/logo.png]http://liteng.org/sites/default/files/logo.png[/url]" alt=""> </div>

[url=http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html]http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html[/url] [b]ng-style:和默认style类似[/b] 这里请注意书写格式：字符串需要用引号包含

[url=http://2.liteng.sinaapp.com/angularjsTest/ng-style.html]http://2.liteng.sinaapp.com/angularjsTest/ng-style.html[/url] [b]filter:过滤字段[/b]

[url=http://2.liteng.sinaapp.com/angularjsTest/filter.html]http://2.liteng.sinaapp.com/angularjsTest/filter.html[/url] [b]ng-template:可以加载模板[/b]

[url=http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html]http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html[/url] [b]$http:一个类似ajax的方法很管用[/b]

[url=http://www.1sucai.cn/article/60212.htm]url:'json/date.json'[/url] }); p.success(function(response,status,headers,config){ $scope.names=response; }); p.error(function(status){ console.log(status); }); } //方法2 function TestCtrl2($scope,$http){ $http.get('json/yiqi_article.json').success(function(response){ $scope.info=response; }); } </script>