7°

AngularJS基础(一)

1. AngularJS简介

AngularJS是一个JavaScript框架,它可以通过<script>标签添加到HTML页面。AngularJS通过指令拓展了HTML,且通过表达式绑定数据到HTML。

2. AngularJS主要内容

graph LR; module(module)---Controller(Controller) module(module)---Filter(Filter) module(module)---directive(directive) module(module)---fsp(factory/service/provider) Controller-->note_c(页面/VM) Filter-->note_f(过滤器) directive-->note_d(指令,即行为) fsp-->note_fsp(服务包含数据和逻辑)

2.1 module (模块)

在AngularJS中module定义了应用程序,同时module是应用程序中不同部分的容器,Controll、Filter等在存在于module中。

module的创建

<div ng-app="myApp"></div>
<script>
    var app = angular.module("myApp", [])
</script>

其中,在[...]内的内容为当前创建的module的依赖列表,如未依赖其他的模块,则方括号中不填写任何内容,但是不可以省略。如写为angular.module("myApp")则为引入模块而非创建新的模块。

2.2 Controller (控制器)

Controller在<div>中由ng-controller指令定义,一般情况下,使用控制器主要是为了

  • 初始化scope对象
  • scope对象添加行为(方法)

controller创建实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script> 
    </head>
    <body>
    &lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
        {{value}}
    &lt;/div&gt;

    &lt;script&gt;
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope) {
            $scope.value = "this is a value";
        });
    &lt;/script&gt;
&lt;/body&gt;

</html>

其中,ng-app为定义AngularJS应用程序,应用程序在div中运行; ng-controller是AngularJS中指令,用于定义控制器; myCtrl是一个JavaScript函数; $scope在此处表示控制器的作用域。

如何在控制器中创建方法?

<div ng-app="myApp" ng-controller="myCtrl">
    <p>{{date()}}</p>
</div>
<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope) {
        $scope.date = function () {
            return new Date();
        }
    });
</script>

从处功能为将当下时间返回。其中,在使用$scope时需要先将其注入,否则会报错ReferenceError: $scope is not defined

2.3 Filter (过滤器)

AngularJS过滤器可以用来格式化数据,能够使用管道符(|)添加到表达式和指令中。

常用内置Filter

  • currency 格式化数字格式为货币格式
  • filter 从数组中选择一个子集
  • lowercase 字符串转换为小写
  • uppercase 字符串转换为大写
  • orderBy 根据某一个表达式排序

向指令添加Filter

<li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
</li>

向表达式添加Filter

<p>{{ value | lowercase }}</p>

添加自定义Filter

<div ng-repeat="u in myArr | filter:myFilter ">
    <p>Name:{{u.name}}</p>
    <p>Age:{{u.age}}</p>
</div>

// 先在Controller中定义function: myFilter $scope.myFilter = function (item) { return item.age > 20; };

添加自定义Filter内容来源于无上@诀博客AngularJS的Filter用法详解一文。

2.4 directive (指令)

指令是添加在HTML元素上的自定义标记(如:属性,元素,或css类)。

常见指令

  • ng-app 指令初始化一个AngularJS应用程序
  • ng-init 指令初始化应用程序数据
  • ng-model 指令把元素值绑定到应用程序
  • ng-repeat 指令会循环一个HTML元素
  • ng-style 指令添加前端样式

2.5 service (服务)

在AngularJS中服务是一个函数或者对象,可以在AngularJS应用中使用,包括AngularJS的内建服务和自定义服务。

内建服务

  • $location
    // 获取当前的URL地址
    $scope.myUrl = $location.absUrl();
    
  • $http 向服务器发送请求,应用相应服务器传送过来的数据
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope, $http){
        $http.get("xxx.html").then(function(response){
            $scope.myXXX = response.data;
        });
    });
    
  • $interval对应JavaScript中windows.setInterval函数
    // 每一秒刷新显示信息,显示时钟
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope, $interval){
        $scope.theTime = new Date().toLocaleTimeString();
        $interval(function(){
            $scope.theTime = new Date().toLocaleTimeString();
        }, 1000);
    });
    
  • $timeout对应JavaScript中windows.setTimeout函数
    // 两秒后显示信息
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope, $timeout){
      $scope.myHeader = "Hello World!";
      $timeout(function () {
          $scope.myHeader = "How are you today?";
      }, 2000);
    });
    

自定义服务 创建方法

var app = angular.module("myApp", []);
app.service("myService", function(){
    this.myFun = function(string){
        return "hello" + string;
    }
});

调用自定义服务

var app2 = angular.module("myApp", []);
app2.controller("myCtrl", ["$scope" , "myService", function($scope, myService){
    $scope.hello = myService.myFun("wang");
}]);

注意:此处controller引入依赖的顺序必须和function参数列表中顺序对应,否则会导致报错XXX is not a function

参考文献

[1] W3Cschool AngularJS教程网站;

[2] AngularJS中文网 AngularJS教程;

[3] 博客园 无上@诀 博文“AngularJS的Filter用法详解”

原文链接:https://www.cnblogs.com/otblog/p/11182347.html

全部评论: 0

    我有话说: