AngularJS

Posted 2020-08-17 GoQC

1.AngularJS 表达式与javascript对比

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 html 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

 2.调用指令的方式

• 元素名
• 属性
• 类名
• 注释

3.限制使用指令

var app = angular.module("myApp", []);
app.directive("testDirective", function(){
    return {
        restrict: "A",
        template: "<h1>测试自定义指令！</h1>"    
    };
});

restrict值可以是以下几种：

• E 作为元素名使用
• A 作为属性使用
• C 作为类名使用
• M 作为注释使用

restrict 默认值为EA，即可以通过元素名和属性名来调用指令。

4.ng-show

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

以上实例中，提示信息会在ng-show 属性返回true的情况下显示。

5.ng-model 指令根据表单域的状态添加/移除以下类：

• ng-empty
• ng-not-empty
• ng-touched
• ng-untouched
• ng-valid
• ng-invalid
• ng-dirty
• ng-pending
• ng-pristine

6.作用域 $scope

创建控制器时，将$rootScope作为参数传递，可在应用中使用：

 1 <div ng-app="myApp" ng-controller="myCtrl">
 2     <h1>{{lastname}} 家族成员:</h1>
 3     <ul>
 4         <li ng-repeat="x in names">{{x}} {{lastname}}</li>
 5     </ul>
 6 </div>
 7 
 8 <script>
 9 var app = angular.module(\'myApp\', []);
10 
11 app.controller(\'myCtrl\', function($scope, $rootScope) {
12     $scope.names = ["Emil", "Tobias", "Linus"];
13     $rootScope.lastname = "Refsnes";
14 });
15 </script>
16 来自：www.runoob.com

View Code

7.控制器

AngularJS 控制器控制AngularJS应用程序的数据，是常规的JavaScript对象。

控制器可以有控制器属性和方法；可在script标签中定义也可以定义在外部文件中供其他文件通过script标签引用。

控制器文件*.js：

angular.module("myApp",[]).controller("testControl", function($scope){
    $scope.humans = [
        {name:\'Json\', country:\'America\'},
        {name:\'Lili\', country:\'China\'}
    ];
});

8.过滤器

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

 

 

 

 

 

通过管道字符使用：表达式中添加过滤器 {{name | lowercase}}。可使用多个，用管道字符隔开。

9.服务 如果要使用某个服务，需要在controller定义时参数中声明。

$location 服务，返回当前页面的URL地址。

$http服务 向服务器发送请求，响应服务器传过来的数据。

$http.get("hello.com").then(function(response){
    $scope.something = response.data;
});

$timeout服务类似于window.setTimeout

两秒后do something

$timeout(function(){$scope.myHeader = "some thing";}, 2000);

$interval服务 类似JS的window.setInterval函数

使用：$interval(function(){//要执行的操作},millisecond);

创建自定义服务：

app.service(\'myService\', function(){this.myFun = function(){}});

要使用自定义的服务，需要在定义控制器的时候独立添加。

app.controller(\'myControl\', function($scope, myService){});