AngularJS初步

2018-02-06 本文已影响29人 e02f7fdbb400

AngularJS是一个javascript框架，可通过script标签添加到网页中：

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

AngularJS表达式

AngularJS表达式可以是文字、运算符和变量
写在大括号内：{{expression}}
AngularJS将在表达式书写的位置"输出"数据

AngularJS指令

AngularJS指令是扩展的HTML属性，带有前缀ng-
ng-app指令初始化一个AngularJS一个用程序
ng-init指令初始化应用程序数据。
ng-model指令把元素值绑定到应用程序。
可将输入域的值与AngularJS创建的变量绑定

<div ng-app="myApp" ng-controller="myCtrl">
      名字:<input ng-model="name">
</div>

<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
        $scope.name="John Doe";
});
</script>

ng-repeat指令会重复一个HTML元素
.directive函数来添加自定义的指令，使用驼峰法来命令一个指令，runoobDirective，但在使用它时需要以-分割，runoob-directive

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

可通过元素名、属性、类名、注释来调用。
限制使用，通过添加restrict属性。

Scope作用域

所有的应用都有一个$rootScope,它可以作用在ng-app指令包含的所有html元素中。
用rootscope定义的值，可在各个controller中使用

AngularJS控制器

ng-controller指令定义了应用程序控制器。控制器是javascript对象，由标准的javascript对象的构造函数创建。
使用$scope对象来调用控制器，

AngularJS过滤器

可用于转换数据
表达式中的过滤器

<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为{{ lastName | uppercase }}</p>
</div>

reverse自定义过滤器
AngularJS服务
在AngularJS中，服务是一个函数或对象，可在AngularJS应用中使用。
$location服务，返回当前页面的 URL 地址
http服务向服务器发送请求，相应服务器发送过来的数据
$timeout服务对应了 JS window.setTimeout函数
$interval服务对应了 JS window.setlnterval函数。
创建自定义服务

app.service('hexafy',function(){
      this.myFunc = function(x){
              return x.toString(16);
        }
});

AnuglarJS select

使用ng-option来创建下拉列表
ng-repeat指令是通过数组来循环HTML代码来创建下拉列表，但ng-options指令更适合创建下拉列表
ng-option的选项是一个对象，ng-repeat是一个字符串。

AngularJS HTML DOM

*ng-disabled指令直接绑定应用程序数据到HTML的disabled属性。
ng-show8指令隐藏或显示一个。g-include指令来包含 HTML 内容