angular.js 教程 -- 实例讲解

程序员文章站 2023-11-03 19:11:58

angular.js AngularJS [1] 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化 ......

angular.js

angularjs [1] 诞生于2009年，由misko hevery 等人创建，后为google所收购。是一款优秀的前端js框架，已经被用于google的多款产品当中。angularjs有着诸多特性，最为核心的是：mvc（model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

angularjs 是一个 javascript框架。它是一个以 javascript 编写的库。它可通过 <script> 标签添加到html 页面。

angularjs 通过指令扩展了 html，且通过表达式绑定数据到 html。

第一个实例 hello{{name}}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myapp">
     <p>名字 : <input type="text" ng-model="name"></p>
     <h1>hello {{name}}</h1>
</div>

</body>
</html>

网页加载完成，angularjs自动开启

ng-app指令告诉angularjs，<div>元素是angularjs应用程序的“所有者”。

ng-model指令把输入域的值绑定到应用程序变量name。

ng-bind指令把应用程序变脸name绑定到某个段落发innerhtml。

双向数据绑定

<!doctype html>
<html lang="en">
<head>
　　<meta charset="utf-8">
　　<title>document</title>
　　<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
　　<div ng-app="myapp" ng-controller="myctrl">
　　　　名: <input type="text" ng-model="firstname"><br>
　　　　姓: <input type="text" ng-model="lastname"><br>
　　　　<br>
　　　　姓名: {{firstname + " " + lastname}} <!-- angular表达式 字符串-->
　　</div>
　　<script>
　　　　var app = angular.module('myapp', []);
　　　　app.controller('myctrl', function ($scope) {
　　　　　　$scope.firstname = "john";
　　　　　　$scope.lastname = "doe";
　　　　});
　　</script>
</body>
</html>

一，angular 表达式

1.angular对象

<div ng-app="" ng-init="person={firstname:'john',lastname:'doe'}">
　　<p>姓为 {{ person.lastname }}</p>
　　<p>姓为 <span ng-bind="person.lastname"></span></p>
　　<!-- 二者显示结果相同。 -->
</div>

2.angular数组

<div ng-app="" ng-init="points=[1,15,19,2,40]">
    <p>第三个值为 {{ points[2] }}</p>
</div>

二，angular指令

angularjs 指令是扩展的 html 属性，带有前缀 ng-。

ng-app 指令初始化一个 angularjs 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

angular循环遍历，ng-repeat 指令用在一个对象数组上：

<div ng-app="" ng-init="names=[
{name:'jani',country:'norway'},
{name:'hege',country:'sweden'},
{name:'kai',country:'denmark'}]">
    <p>循环对象：</p>
    <ul>
        <li ng-repeat="x in names">
            {{ x.name + ', ' + x.country }}
        </li>
    </ul>
</div>

创建自定义的指令

除了angularjs内置的指令外，我们还可以创建自定义指令。

你可以使用.directive函数添加自定义指令。

要调用自定义指令，html元素上需要添加自定义指令名。

使用驼峰命名一个指令， 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>",
                //replace : true,
                //restrict : "eacm"
            };
        });
    </script>
</body>

你可以通过以下方式来调用指令：

a.元素名

b.属性

c.类名

d.注释

以下实例方式也能输出同样结果.

元素名:

<runoob-directive></runoob-directive>

属性:

<div runoob-directive></div>

类名:

<div class="runoob-directive"></div>

注释:

* replace 是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部：

如：

<my-directive></my-directive>


.directive("mydirective",function(){
        return {
               template:"<h3>世上无难事，只怕有心人</h3>"
        }
})

调用指令之后的结果如下（这是默认replace为false时的情况）：

<my-directive>
      <h3>世上无难事，只怕有心人</h3>
</my-directive>

如果replace被设置为了true：

.directive("mydirective",function(){
      return {
            replace:true,
            template:"<h3>世上无难事，只怕有心人</h3>"
      }
})

那么指令调用后的结果将是：

<h3>世上无难事，只怕有心人</h3>

* restrict 可以限制你的指令只能通过特定的方式来调用。

restrict 值可以是以下几种:

e 作为元素名使用
a 作为属性使用
c 作为类名使用
m 作为注释使用

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

三，angularjs 九种内置过滤器

<!doctype html>
<html ng-app="app">

<head>
    <meta charset="utf-8">
    <title>内置过滤器</title>
</head>

<body>
    <div ng-controller="controllertest01">
        <ul>
            <!-- currency处理函数，price是第一个参数，“￥”是第二个参数。显示的值是currency这个函数执行完成以后的返回值 -->
            <li>{{price|currency:"￥"}}</li>
            <li>{{nowdate|date:'yyyy/mm/dd hh:mm:ss eeee'}}</li>
            <li>{{arr1|filter:'j'}}</li>
            <li>{{arr2|filter:{age:16} }}</li>
            <li>{{arr2|json }}</li>
            <li>{{arr1|limitto:2}}</li>
            <li>{{str|uppercase|lowercase|limitto:7}}</li>
            <li>{{num|number:2}}</li>
            <li>{{num2|number:4}}</li>
            <li>{{arr2|orderby:"age":true}}</li>
        </ul>
    </div>

    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module("app", []);
        app.controller("controllertest01", ['$scope', function ($scope) {
            // 内置过滤器  9个
            // 1. currency (货币处理),如果不传递参数，默认是美元符
            // 2. date (日期格式化)
            // 3. filter(匹配子串)
            // 4. json(格式化json对象)   跟stringify相同   没有参数
            // 5. limitto(限制数组长度或字符串长度)
            // 6. lowercase(小写)   没有参数
            // 7. uppercase(大写)   没有参数
            // 8. number(格式化数字)   [参数]
            // 9. orderby(排序)  [name,boolean]

            $scope.price = 99.99;
            $scope.nowdate = new date();
            $scope.arr1 = ['html', "css", 'js', "hhhh", "j", "c"];
            $scope.arr2 = [
                { name: "jack", age: 20 },
                { name: "mack", age: 16 },
                { name: "sunny", age: 18 }
            ]
            $scope.str = "hello world";
            $scope.num = "10.23456";
            $scope.num2 = 123456789
        }])
    </script>
</body>

</html>

自定义过滤器：

<!doctype html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>自定义过滤器</title>
</head>
<body>
    <div ng-controller="controllertest01">
        <h2>{{msg|demo:"abc":"bcd":"efg"}}</h2>
        <h3>{{val|firstuppercase:123}}</h3>
    </div>

    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module("app",[]); 
        // 定义控制器
        app.controller("controllertest01",['$scope',function($scope){
            $scope.msg = " world"
            $scope.val = "hello world"
        }])
        //自定义指令
        // app.directive('指令名',function(){
        //     return{}
        // })

        // 自定义过滤器
        app.filter('demo',function(){
            return function(val,a,b,c){    //demo就是一个函数
                console.log(val)            //world
                console.log(a,b,c)            //abc bcd efg

                // 显示值又是一个返回值
                return "hello" + val;
            } 
        })
        // 自定义过滤器，首字母大写
        app.filter('firstuppercase',function(){
            return function(data,args){
                console.log(args)            //123
                return data[0].touppercase() + data.slice(1)
            }
        })
    </script>
</body>
</html>

四，angularjs 服务（service）

<!doctype html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>内置服务-$location</title>
</head>
<body>
    <div ng-controller="controllertest01">
        <ul>
            <li>绝对路径：{{absurl}}</li>
            <li>服务：{{host}}</li>
            <li>查询字符串(参数)：{{search}}</li>
            <li>端口号：{{port}}</li>
            <li>协议:{{protocol}}</li>
            <li>哈希（锚点）：{{hash}}</li>
        </ul>
    </div>

    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module("app",[]); 
        // $http   -- >   对ajax的一种封装
        // $log    -->    对congsole的封装
        // $timeout -->   定时器
        // $location    --> 对浏览器地址栏的封装

        app.controller("controllertest01",['$scope','$location',function($scope,$location){  
            console.log($location)
            $scope.absurl = $location.absurl();
            $scope.host = $location.host();
            $scope.port = $location.port();
            $scope.search = $location.search();   //对http有要求
            $scope.protocol = $location.protocol();
            $scope.hash = $location.hash();
        }])

    </script>
</body>
</html>

内置服务——定时器

app.controller("controllertest01",['$scope','$timeout','$interval',function($scope,$timeout,$interval){
    $timeout(function(){
        $scope.msg = "timeout执行了"
    },3000) 


    var timer = $interval(function(){
        $scope.datenow = new date();
    },1000)
    $scope.stop = function(){
        $interval.cancel(timer)
    }
}])

内置服务——filter

<div ng-controller="controller01">
    <ul>
        <li>{{price}}</li>
        <li>{{str}}</li>
        <li>{{str1}}</li>
    </ul>
</div>

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script>
    var app = angular.module("app", []);
    app.controller("controller01", ['$scope', '$filter', function ($scope, $filter) {
        // $filter 可以引入九种内置的过滤器，这个是过滤器的第二种用法
        $scope.price = 99.99;
        var currency = $filter('currency');
        $scope.price = currency($scope.price);

        $scope.str = "hello angular";
        var uppercase = $filter('uppercase');
        $scope.str = uppercase($scope.str);

        $scope.str1 = $filter('limitto')($scope.str, 5)
    }])

</script>

内置服务——http

app.controller("controller01",['$scope','$filter','$http',function($scope,$filter,$http){
    // $http 本质是对ajax的封装，放到服务底下运行
    // 1.5以上使用then方法，类似于promise中的then
    // 1.5以下就直接使用success方法和error方法
    // $http({
    //     method: 'get',
    //     url: './02.json',
    //     params : {    //get请求的参数
    //         uname : 'aaaa',
    //         age : 30
    //     }
    // }).then(function(data){
    //     console.log(data);     //封装过的，该对象底下的data属性放的是数据
    //     console.log(data.data);
    // },function(err){
    //     console.log(err)
    // });

    $http({    
        method : "post",
        url : "/senddata",
        headers : {   //post请求最好设置请求头
            "content-type" : "application/x-www-form-urlencoded"
        },
        data : {    //post请求的参数
            uname : "aaa",
            age : 30
        }
    }).then(function(data){
        console.log(data)
        console.log(data.data.data);   //想要的后台的数据
    },function(err){
        console.log(err);
    })

}])

自定义服务：

要使用自定义服务，需要在定义控制器的时候独立添加，设置依赖关系。

var app = angular.module("app", []);
　　// 定义一个服务，格式化对象
　　// {
　　// name : "jack",
   // age : 30
   // }
   // ?name=jack&age=30
   app.factory('format', ["$filter", function ($filter) {
       function fm(data) { //val 是一个对象
       　　var str = "?";
       　　for (var key in data) {
           　　str += key + "=" + data[key] + '&';
       　　}
           str = str.slice(0, -1);
           return str;
       }
       function aaa() {
           console.log('hello')
       }
       // 返回一个对象出去
       return {
           format: fm,
           aaa: aaa
       }
   }])

   app.controller("controller01", ['$scope', '$filter', '$http', 'format', '$log', function ($scope, $filter, $http, format, $log) {
       var data = {
           name: "jack",
           age: 30
       }

       format.aaa();
       $scope.str = format.format(data)
       $log.log(format.format(data));
   }])

上一篇：【转发】如何使用NPM？CNPM又是什么？

下一篇：宝宝喝奶后喝水可以吗

angular.js 教程 -- 实例讲解

angular.js

第一个实例 hello{{name}}

双向数据绑定

一，angular 表达式

1.angular对象

2.angular数组

二，angular指令

angular循环遍历，ng-repeat 指令用在一个对象数组上：

创建自定义的指令

三，angularjs 九种内置过滤器

自定义过滤器：

四，angularjs 服务（service）

内置服务——定时器

内置服务——filter

内置服务——http

自定义服务：

MySQL自增ID耗尽实例讲解

javascript三种输出方式实例讲解

实例讲解CSS3中Transform的perspective属性的用法

CSS3不透明度实例讲解

CSS3 RGBA色彩模式使用实例讲解

PHP类的使用实例代码讲解

如何使用VHD虚拟硬盘安装win10实例教程

PHP中__set()实例用法和基础讲解

C#日历样式的下拉式计算器实例讲解

C#读取静态类常量属性和值的实例讲解

angular.js 教程 -- 实例讲解

angular.js

第一个实例 hello{{name}}

双向数据绑定

一，angular 表达式

1.angular对象

2.angular数组

二，angular指令

angular循环遍历，ng-repeat 指令用在一个对象数组上：

创建自定义的指令

三，angularjs 九种内置过滤器

自定义过滤器：

四，angularjs 服务（service）

内置服务——定时器

内置服务——filter

内置服务——http

自定义服务：

MySQL自增ID耗尽实例讲解

javascript三种输出方式实例讲解

实例讲解CSS3中Transform的perspective属性的用法

CSS3不透明度实例讲解

CSS3 RGBA色彩模式使用实例讲解

PHP类的使用 实例代码讲解

如何使用VHD虚拟硬盘安装win10实例教程

PHP中__set()实例用法和基础讲解

C#日历样式的下拉式计算器实例讲解

C#读取静态类常量属性和值的实例讲解

PHP类的使用实例代码讲解