AngularJS（一）

最新推荐文章于 2025-06-06 00:01:07 发布

昵称已存在lxttttt

最新推荐文章于 2025-06-06 00:01:07 发布

阅读量210

点赞数

分类专栏：前端 AngularJS 文章标签： angularjs 前端

本文链接：https://blog.youkuaiyun.com/weixin_43238931/article/details/114321182

版权

前端同时被 2 个专栏收录

21 篇文章

订阅专栏

AngularJS

1 篇文章

订阅专栏

这篇博客介绍了AngularJS的基础知识，包括AngularJS的使用、指令含义、ng-bind和ng-model的用法，以及对象、数组和自定义指令的创建。ng-model用于绑定输入值并进行验证，scope则作为参数传递对象在AngularJS中起着重要作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AngularJS使用

在标签下面添加

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

指令含义

ng-app=""  定义AngularJS的使用范围
ng-init="变量=值;变量=值"  初始化变量的值，有多个变量时用分号隔开
ng-model="变量"  定义变量名
ng-bind="变量"  绑定变量名，获取该变量的数据，使用双重花括号{{变量}}获取变量的值
ng-repeat="x in array"  重复循环array数组中的值并克隆HTML元素

ng-bind=""内可以进行字符串的拼接

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <input type="text" ng-model="content">
        <h1>What I want to say is: {{content}}</h1>

		<div ng-init="a=['Jani','Hege','Kai']">
        <ul>
            <li ng-repeat="x in a"> {{ x }} </li>
        </ul>
    </div>
    </div>
</body>
</html>

{{}}内部可以进行基本的加减乘除取余等运算和其他字符操作

对象

ng-init=""内可以定义对象
例子：

<div ng-app="">
    <div ng-init="person={firstName:'John', lastName:'Johnson'}">
        name is : <span>{{person.firstName}}</span>
    </div>
</div>

数组

<div ng-app="">
    <div ng-init="a=[1, 4, 6, 2, 4]">
        第三个数是<span>{{a[2]}}</span>
    </div>
</div>

自定义指令

使用.directive自定义指令
采用驼峰命名法命名，使用时以-符号隔开，如名为runoobDirective的指令使用时写为runoob-directive
例子：
1.通过元素名自定义

<div ng-app="myApp">
    <runboo-directive></runboo-directive>
</div>
<script>
    var app = angular.module("myApp", []);
    app.directive("runbooDirective", function () {
        return {
            template: "<h1>hello</h1>"
        }
    });
</script>

2.通过属性名自定义

<div ng-app="myApp">
    <div runboo-directive></div>
</div>
<script>
    var app = angular.module("myApp", []);
    app.directive("runbooDirective", function () {
        return {
            template: "<h1>hello1</h1>"
        }
    });
</script>

3.通过类名自定义

<div ng-app="myApp">
    <div class="runboo-directive"></div>
</div>
<script>
    var app = angular.module("myApp", []);
    app.directive("runbooDirective", function () {
        return {
            restrict: "C",	// 此处必须进行设置
            template: "<h1>hello2</h1>"
        }
    });
</script>

在return语句中要设置restrict: “C”

4.通过注释自定义

<div ng-app="myApp">
    <!-- directive: runboo-directive -->
</div>
<script>
    var app = angular.module("myApp", []);
    app.directive("runbooDirective", function () {
        return {
            restrict: "M",
            replace: true,
            template: "<h1>hello3</h1>"
        };
    });
</script>

在return语句中要设置restrict: “M”, replace: true
此处restrict的值与类名自定义指令中设置的值不同

关于restrict的值：
E表示作为元素名使用， A表示作为属性使用
restrict的默认值为EA

ng-model用法

1.绑定input, select, textarea的值
2.验证输入的内容是否合法

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

3.判断应用数据状态

<form ng-app="" name="myForm" ng-init="myText = 'ww@qq.com'">

Email:
<input type="email" name="address" ng-model="myText" required>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<p>Valid: {{myForm.address.$valid}} (如果输入的值是合法的则为 true)。</p>
<p>Dirty: {{myForm.address.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.address.$touched}} (如果通过触屏点击则为 true)。</p>

</form>

4.根据情况显示出不同的CSS

<style>
    input.ng-valid {
        background-color: pink;
    }
</style>

<form ng-app="" name="myForm" ng-init="address='ww@qq.com'">
    <input type="email" name="address" ng-model="address" required>
</form>

ng-touched: 控件已失去焦点
ng-untouched: 控件未失去焦点
ng-valid: 验证通过
ng-invalid: 验证失败
ng-dirty: 控件输入值已变更

scope作用

$scope在AngularJS中可以传递参数，是一个对象，有可用的方法和属性
使用示例：

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <button ng-click="hello()">打招呼</button>
    <h1>{{greeting}}</h1>
</div>
<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope) {
        $scope.name = "Mike";
        $scope.hello = function () {
            $scope.greeting = "hello " + $scope.name;
        };
    });
</script>

$rootScope根作用域可以在所有ng-app包含的区域内作用，可以在各个controller中使用

<div ng-app="myApp" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="x in people">{{x}} {{lastName}}</li>
    </ul>
<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope, $rootScope) {
        $scope.people = ["p1", "p2", "p3"];
        $rootScope.lastName = "John";
    })
</script>