AngularJS基础

Posted otblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

        <div ng-app="myApp" ng-controller="myCtrl">
            value
        </div>

        <script>
            var app = angular.module("myApp", []);
            app.controller("myCtrl", function($scope) 
                $scope.value = "this is a value";
            );
        </script>
    </body>
</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用法详解”

以上是关于AngularJS基础的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS实用基础知识---入门必备

AngularJS基础语法

AngularJs 基础(60分钟入门) (转)

初入AngularJS基础门

AngularJS 基础教程一:

前端随心记---------AngularJS 基础学习1.0