您的位置:首页 > Web前端 > AngularJS

AngularJS基本知识

2017-01-05 23:16 246 查看
1.AngularJS是一个JavaScript框架,可通过script标签添加脚本或者本地文件。

2.AngularJS中数字,字符串,对象,数组都如同JavaScript。

3.AngularJS指令:

ng-app:初始化一个AngularJS应用程序,该元素作为一个应用程序的所有者。

ng-model:把元素值绑定到应用程序,类似id。

ng-bind或双大括号:把应用程序数据绑定到HTML视图,在表达式书写的位置输出。

ng-repeat:重复一个HTML元素,集合必须是数组或对象,选中的是字符串。

ng-show:在表达式为true的情况下显示指定的HTML元素。

ng-controller:定义了应用程序控制器。

ng-options:创建一个下拉列表,列表项通过对象和数组循环输出,选中是对象。

4.创建自定义指令:使用.directive函数来添加自定义指令,使用驼峰法来命名,在使用时要用-分割单词。

<script>

var app = angular.module(“myApp”,[]);

app.directive(“runoobDirective”,function(){

return {

//restrict:”A”;

template: “<h1>hello world.”

};

});

</script>

5.自定义指令可以通过以下方式来调用指令,通过添加restrict属性来限制只有设置各自的大写字母时才能调用,restrict默认值为EA:

元素名 E <runoob-directive></runoob-directive>
属性   A <divrunoob-directive></div>
类名   C <divclass=”runoob-directive”></div>
注释   M <!--指令:runoob-directive-->
6.ng-controller=“myCtrl”属性是一个AngularJS指令。用于定义一个控制器。myCtrl是一个js函数,$scope对象来调用控制器,用来保存model的对象。
HTML代码:<div ng-app=”myApp” ng-controller=”personCtrl”>
JS代码:varapp = angular.module(‘myApp’,[]);
app.controller(‘personCtrl’,function($scope)){
$scope.firstName= ‘John’;
$scope.lastName= ‘Doe’;
$scope.fullName= function() {
return$scope.firstName+” ”+$scope.lastName;
}
});
7.过滤器可用于转换数据,使用一个管道字符| 添加到表达式和指令中。
currency格式化数字为货币形式
filter从数组项中选择一个子集
lowercase格式化字符串为小写
orderBy根据某个表达式来排列数组
uppercase格式化字符串为大写
8.AngularJS中可以自己创建服务或者内建服务,在AngularJS中服务是一个函数或对象可以在应用中使用。
$location返回当前页面的URL地址
$http向服务器发送请求,应用相应服务器传过来的数据

$timeout在规定的毫秒数之后执行指定的函数

$interval在指定的周期(以毫秒来计算)来调用函数或计算表达式
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  angularjs 框架