AngularJS笔记

最新推荐文章于 2025-10-05 15:18:00 发布

原创最新推荐文章于 2025-10-05 15:18:00 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #angular

前端专栏收录该内容

2 篇文章

订阅专栏

AngularJS笔记

学习网站：
AngularJS 教程|菜鸟教程

需要首先了解: HTML,CSS,JavaScript

官网由谷歌维护
所有版本

1. 什么是AngularJS

AngularJS 通过新的属性和表达式扩展了 HTML。
AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）
AngularJS 是一个 JavaScript 框架。它可通过

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证

2. 使用

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

3. AngularJS指令

AngularJS 通过被称为指令(ng-directives) 的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。

用例

ng-app 指令定义一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind ({{name}}) 指令把应用程序数据绑定到 HTML 视图。

AngularJS 指令是以 ng 作为前缀的 HTML 属性
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

<div ng-app="" ng-init="name='tom' ;names=['Jani','Hege','Kai']">
     <p>名字 : <input type="text" ng-model="name"></p>
     <h1>Hello {{name}}</h1>
     <h1 ng-bing="name"></h1>
     <li ng-repeat="x in names">
      {{ x }}
    </li>
</div>

ng-model 指令

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        名字: <input ng-model="name">
        <h1>你输入了: {{name}}</h1>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
        //当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
        //当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
        //视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{name}}。
        $scope.name = "John Doe";
    });
    </script>
</body>

Scope概述
AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

#### 自定义指令

你可以使用 .directive 函数来添加自定义的指令。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: 使用的时候不区分大小写

可以使用以下方式使用自定义指令

元素名
属性
类名
注释

1. 元素名

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

2. 属性

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

3. 类名 即 class=“directive” 你必须设置 restrict 的值为 “C” 才能通过类名来调用指令。

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

4. 注释 我们需要在该实例添加 replace 属性，否则评论是不可见的。才能通过类名来调用指令。你必须设置 restrict 的值为 “M” 才能通过注释来调用指令。

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

说明:通过添加 restrict 属性,并设置值为 “A”, 来设置指令只能通过属性的方式来调用

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

4. AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 表达式与 JavaScript 表达式

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

5.Angular过滤器

使用方法：通过管道字符“|”添加到表达式是和指令中

bash和shell管道
“|”管道命令符的作用是串联起一组命令的输入输出数据流。简单来讲就是，前一个命令执行后不回显结果，而是把结果通过“|”传递给后一个命令，以此类推直到没有管道符后终止命令，并回显最终结果。

实例：

向表达式添加过滤器：将输入转换为大写和小写

<body>
    <div ng-app="myApp" >
        <input ng-model="name" /><br />
	    大写名字:{{name|uppercase}}<br />
	    小写名字:{{name | lowercase}}
    </div>
</body>

向指令添加过滤器：

<body>
    <div ng-app="myApp" ng-controller="namesCtrl">
        <p>根据country排序:</p>
        <ul>
            <li ng-repeat="x in names | orderBy:'country'">
                {{ x.name + ', ' + x.country }}
            </li>
        </ul>
        <hr />
        <p>根据输入过滤结果</p>
        <p><input type="text" ng-model="test"></p>
        <ul>
            <li ng-repeat="x in names | filter:test | orderBy:'country'">
                {{ (x.name | uppercase) + ', ' + x.country }}
            </li>
        </ul>
    </div>
    
    <script>
    angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
    });
    </script>
</body>

自定义过滤器

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
    姓名: {{ msg | reverse }}
    <hr />
    姓名: {{ msg | reversea }}
    <hr />
	姓名: {{ msg | reverseb }}
    </div>
    
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
        $scope.msg = "Runoob";
        });
	//反转
        app.filter('reverse', function() { //可以注入依赖
            return function(text) {
                return text.split("").reverse().join("");//boonuR 
            }
	    });
        app.filter('reversea', function() { 
            return function(text) {
                return text.split("").reverse().join(",");//b,o,o,n,u,R
            }
        });
	    app.filter('reverseb', function() { 
            return function(text) {
                return text.split("o").reverse().join(",");//b,,Run 
            }
        });
    </script>
</body>

常用过滤器

过滤器	描述
currency	格式化数字为货币格式。
currency:‘￥’	使用currency过滤器用固定的前缀
currency:‘￥’:1	使用currency过滤器用固定的前缀并只取1位小数
number:2	使用number过滤器并只取2位小数
limitTo:2	限制显示2个字
limitTo:4:1	限制显示从1下标开始的前4个字
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。
date:‘yyyy年MM月dd日 HH时mm分ss秒’	将时间戳（new Date().getTime();）转换为2018年12月12日 12点12分12秒

6. AngularJS 服务(Service)

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用
实例

location和interval 服务

<body>
    <div ng-app="myApp" ng-controller="myCtrl"> 
        <p>地址:{{url}}</p>
        <p>现在时间是:</p>
        <h1>{{theTime}}</h1>
    </div>

    <p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $interval ,$location) {
            $scope.theTime = new Date().toLocaleTimeString();
            $interval(function () {
                $scope.theTime = new Date().toLocaleTimeString();
            }, 1000);
            $scope.url = $location.absUrl();
        });
    </script>
</body>

自定义服务（当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。）

<body>
    <div ng-app="myApp">
        <p>在自定义过滤器中使用自定义服务</>
        <h1>{{255 | myFormat}}</h1>
        <!--显示ff-->
    </div>
    <script>
        var app = angular.module('myApp', []);
        //创建自定义服务
        app.service('hexafy', function() {
	        this.myFunc = function (x) {
                return x.toString(16);
            }
        });
        //创建带有服务的过滤器，注意中括号
        app.filter('myFormat',['hexafy', function(hexafy) {
            return function(x) {
                return hexafy.myFunc(x);
            };
        }]);
    </script>
</body>

核心服务 $http (XMLHttpRequest)

//v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。
//Get请求
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
    $http({
        method: 'GET',
        url: 'https://www.runoob.com/try/angularjs/data/sites.php'
    }).then(function successCallback(response) {
            $scope.names = response.data.sites;
        }, function errorCallback(response) {
            // 请求失败执行代码
    });
  
});

//Post方法
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
    $http({
        method: 'POST',
        data: json数据
        url: 'https://www.runoob.com/try/angularjs/data/sites.php'
    }).then(function successCallback(response) {
            $scope.names = response.data.sites;
        }, function errorCallback(response) {
            // 请求失败执行代码
    });
  });
  //简写
  //$http.get('/someUrl', config).then(successCallback, errorCallback);
  //$http.post('/someUrl', data, config).then(successCallback, errorCallback);

个人感觉$scope可以理解为视图服务

7. 常用功能

1. 选择框 Select

指令：ng-options

一般使用的数据类型：
1. 数组

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="selectedCar" ng-init="selectedCar = cars[0]" ng-options="x for x in names">
        </select>
    <script>
    var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.cars = ["Rolls-Royce", "Bentley" ,"Maybach","Ferrari","Lamborghini"];
        });
    </script>
</body>

对象数组

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <!--初始化的变量使用一个对象，值会根据循环时选择的显示-->
        <select ng-model="selectedCar" ng-init="selectedCar = cars[0]" ng-options="x.zhName for x in cars">
        </select>
        被选择的中文名：{{selectedCar.zhName}}
        被选择的英文名：{{selectedCar.eName}}
    <script>
    var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.cars = [
                { zhName: "劳斯莱斯",eName:"Rolls-Royce"},
                { zhName: "宾利",eName:"Bentley"},
                { zhName: "迈巴赫",eName:"Maybach"},
                { zhName: "法拉利",eName:"Ferrari"},
                { zhName: "兰博基尼",eName:"Lamborghini"},
                ];
        });
    </script>
</body>

对象

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <!--初始化的变量使用一个对象，值会根据循环时选择的显示-->
        <select ng-model="selectedCar" ng-init="selectedCar = cars['car1']" ng-options="value.zhName for (key,value) in cars">
        </select>
        被选择的中文名：{{selectedCar.zhName}}
        被选择的英文名：{{selectedCar.eName}}
    <script>
    var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.cars = {
               car1: { zhName: "劳斯莱斯",eName:"Rolls-Royce"},
               car2: { zhName: "宾利",eName:"Bentley"},
               car3: { zhName: "迈巴赫",eName:"Maybach"},
               car4: { zhName: "法拉利",eName:"Ferrari"},
               car5: { zhName: "兰博基尼",eName:"Lamborghini"},
                };
        });
    </script>
</body>

2.表格

指令：ng-repeat

<table>
    <!--添加过滤器-->
  <tr ng-repeat="x in names | orderBy : 'Country">
    <!--添加序号 $index为angularJS中内置对象-->
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

<table>
    <!--使用指令ng-if 和$even，$odd实现奇偶行效果，（或者结合css使用），$even，$odd可以认为是直接判断的奇偶行，从0开始-->
  <tr ng-repeat="x in names">
    <td ng-if="$odd" style="background-color:#f1f1f1">
    {{ x.Name }}</td>
    <td ng-if="$even">
    {{ x.Name }}</td>
    <td ng-if="$odd" style="background-color:#f1f1f1">
    {{ x.Country }}</td>
    <td ng-if="$even">
    {{ x.Country }}</td>
  </tr>
</table>

8. HTML DOM

1. ng-disabled

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性

    <!--ng-disabled值为false按钮可用，为true不可用-->
    <button ng-disabled="true">点我!</button>

2. ng-show

    <p ng-show="true">我是可见的。</p>
    <p ng-show="false">我是不可见的。</p>

3. ng-hide

    <p ng-hide="false">我是可见的。</p>
    <p ng-hide="true">我是不可见的。</p>

4. ng-click (事件)

    <button ng-click="toggle()">隐藏/显示</button>

    <script>
        var app = angular.module('myApp', []);
        app.controller('personCtrl', function($scope) {
            $scope.firstName = "John",
            $scope.lastName = "Doe"
            $scope.myVar = false;
            $scope.toggle = function() {
                $scope.myVar = !$scope.myVar;
            };
        });
    </script>

9. 模块

模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。
可以在模块中添加控制器，指令等

在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

var app = angular.module("myApp", []);//创建模块
app.directive("runoobDirective", function() {//在模块中添加指令
    return {
        template : "我在指令构造器中创建!"
    };
});
app.controller("myCtrl", function($scope) {//在模块中添加控制器
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

10. 表单和输入验证

输入控件的集合
ng-model 指令来实现数据绑定。

<input type="text" ng-model="firstname">
 <input type="checkbox" ng-model="myVar">
 <input type="radio" ng-model="myVar" value="dogs" name="11">
<input type="number" ng-model="myVar" >
 //如果要分组，与直接使用html不同，ng-model="myVar"使用同一个变量
 //而不是使用name分组
 
 <select ng-model="myVar">
    <option value="1">
    <option value="3">
</select>
 <button ng-model="myVar" />
 <textarea ng-model="myVar" ></textarea>

11. 其它

包含其它HTML

<!--注意双引号中的单引号-->
<!--包含的文件中如果有 AngularJS 代码，它将被正常执行-->
<div ng-include="'http://www.runoob.com/bootstrap/bootstrap-tutorial.html'"></div>

跨域包含

<div ng-include="'http://c.runoob.com/runoobtest/angular_include.php'"></div>
 
<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'http://c.runoob.com/runoobtest/**'
    ]);
});
</script>
//你还需要设置服务端允许跨域访问
//被包含的网页
<?php
// 允许所有域名可以访问 //filename:angular_include.php 
header('Access-Control-Allow-Origin:*');
 
echo '<b style="color:red">我是跨域的内容</b>';
?>

动画

<body ng-app="myApp">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div ng-hide="myCheck"></div>
<!--myCheck当为true的时候div会添加class="ng-hide",通过CSS动画实现，这里好像没有jQuery方便-->
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

</body>

依赖注入

依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。

该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖

组件	说明	实例
value	value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）	mainApp.value(“defaultInput”, 5);
factory	factory 是一个函数用于返回值。在 service 和 controller 需要时创建	mainApp.factory(‘MathService’, function() {});
service	自定义服务
provider	Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。
constant	constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。	mainApp.constant(“configParam”, “constant value”);

实例

<body>
      <h2>AngularJS 简单应用</h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>结果: {{result}}</p>
      </div>
      
      <script src="http://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
      
      <script>
        //创建一个模块
         var mainApp = angular.module("mainApp", []);
         //应用配置阶段//运行前的初始化
         mainApp.config(function($provide) {
            $provide.provider('MathService', function() {
               this.$get = function() {
                  var factory = {};
                  
                  factory.multiply = function(a, b) {
                     return a * b;
                  }
                  return factory;
               };
            });
         });
			
         mainApp.value("defaultInput", 5);
         //注入 provide MathService//感觉象函数之间的调用
         mainApp.service('CalcService', function(MathService){
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });
         //注入依赖 服务CalcService 和值（defaultInput）
         mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);

            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });
			
      </script>
      
   </body>

http://www.runoob.com/angularjs/angularjs-dependency-injection.html

路由

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。AngularJS 通过 #! + 标记实现

http://runoob.com/#!/first

注意 Angular1.6 之前的版本是通过 # + 标记实现路由。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例 - 菜鸟教程</title>
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular.min.js"></script>
<!--注意引用angular-route.min.js-->
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular-route.min.js"></script>
<script type="text/javascript">
//包含了 ngRoute 模块作为主应用模块的依赖模块。
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>

  
</head>

<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> Home </h1>
  </script>

  <script type="text/ng-template" id="embedded.about.html">
      <h1> About </h1>
  </script>

  <div> 
    <div id="navigation">  
      <a href="#!/home">Home</a>
      <a href="#!/about">About</a>
    </div>
      
    <div ng-view="">
    </div>
  </div>
</body>
</html>

实例说明

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

具体查看

http://www.runoob.com/angularjs/angularjs-reference.html