AngularJS # AngularJS入门

Posted 2021-08-13 LRcoding

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS # AngularJS入门相关的知识，希望对你有一定的参考价值。

1. AngularJS简介

AngularJS是一个javascript框架，用js编写的库

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<!-- 放在<body> 元素的底部。提高网页加载速度 -->

1.1. AngularJS 扩展了 html

AngularJS 通过 ng-directives扩展了HTML

ng-app 指令定义一个 AngularJS 应用程序。若不声明，将直接显示表达式。

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

ng-bind 指令把应用程序数据绑定到 HTML 视图。一般使用 **{{ ng-model 的值 }}**获取数据

<div ng-app="">
    <p>名字 : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>    <!-- 常用方式 -->
    <p ng-bind="name"></p>
</div>

当网页加载完毕，AngularJS 自动开启。

2. AngularJS表达式

AngularJS 使用 表达式 把数据绑定到 HTML

使用{{ 表达式 }}进行数据的输出

表达式可以包含字符，操作符，变量
表达式可以写在HTML中
不支持条件判断，循环及异常
支持过滤器

<div ng-app="">
     <p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>

2.1. AngularJS数字

类似于JavaScript的数字

<div ng-app="" ng-init="quantity=1;cost=5">  <!-- ng-init用来初始化数据，不常用 -->
    <p> 总价： {{ quantity * cost }} </p>
</div>

2.2. AngularJS字符串

类似于JavaScript的字符串

<div ng-app="" ng-init="firstName='Tom';lastName='Jack'">
    <p> 姓名： {{ firstName + " " + lastName }} </p>
</div>

2.3. AngularJS 对象

类似于JavaScript的对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
 	<p> 姓为 {{ person.lastName }} </p>
</div>

2.4. AngularJS 数组

类似于JavaScript的数组

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

3. AngularJS指令

通过指令来扩展HTML。通过内置的指令来为应用添加功能，可以自定义指令。

指令带有前缀 ng- ng-app指令用来初始化一个 AngularJS应用程序

3.1. 数据绑定

表达式**{{ firstName }}** 通过 ng-model=“firstName” 进行同步。

<div ng-app="" ng-init="firstName='Tom'">
    <input type="text" ng-model="firstName">
    <!-- 默认为Tom，输入值时 下方的表达式值会改变 -->
    {{ firstName }}
</div>

3.2. 重复HTML元素

ng-repeat指令：重复一个HTML元素，用作循环

<div ng-app="" ng-init="names=['Tom','Jack','Hege']">
    <ul>
        <li ng-repeat="i in names"> {{ i }} </li>
    </ul>
</div>

用在一个对象数组上

<div ng-app="" ng-init="names=[
                        {name:'Jani',country:'Norway'},
                        {name:'Hege',country:'Sweden'},
						{name:'Kai',country:'Denmark'}]">
    <ul>
        <li ng-repeat="i in names"> {{ i.name + "," + i.country }} </li>
    </ul>
</div>

3.3. ng-app指令

在网页加载完毕时自动初始化一个 AngularJS应用程序
通过一个值**（ng-app=“myCode”）**连接到代码模块

3.4. ng-init指令

为 AngularJS 应用程序定义了 初始值。一般不使用

3.5. ng-model 指令

///  ng-model="name"     声明一个name变量

///  $scope.name         使用name变量

绑定应用程序数据到 HTML 控制器(input, select, textarea)的值
为应用程序数据提供类型验证（number、email、required）
为应用程序数据提供状态（invalid、dirty、touched、error）
为 HTML 元素提供 CSS 类
绑定 HTML 元素到 HTML 表单

将输入域的值（$scope）与 AngularJS 创建的变量绑定

<div ng-app="myApp" ng-controller="myCtrl">
名字: <input ng-model="name">
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name = "John Doe";
    });
</script>

双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name"/>      <!-- 默认显示Tom -->
    <p> 你输入了： {{ name }} </p>  <!-- 修改输入框的值，此处名字也会相应修改 -->
</div>

<script>
	var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope){
        $scope.name = 'Tom'
    })
</script>

验证用户输入 ng-show

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

为应用数据提供状态值 （invalid, dirty, touched, error）

<form ng-app="" name="myForm" ng-init="myText = 'test@lwclick.com'">
    Email:<input type="email" name="myAddr" ng-model="myText" required>
    <h1>状态</h1>
    {{ myForm.myAddr.$valid }}         如果输入的值是合法的则为 true
    {{ myForm.myAddr.$dirty }}         如果值改变则为 true
    {{ myForm.myAddr.$touched }}       如果通过触屏点击则为 true
    {{ myForm.myAddr.$error.email }}   如果输入的Email的值非法则为 true
</form>

CSS类，基于它们的状态为 HTML 元素提供了 CSS 类

<!-- 输入框有required属性，必须输入数据，若不输入则为非法的，触发input.ng-invalid -->
<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>

<form ng-app="" name="myForm">
    输入你的名字: <input name="myAddress" ng-model="text" required>
</form>

ng-empty        为空的时候
ng-not-empty    不为空的时候
ng-touched      控件已失去焦点
ng-untouched    控件未失去焦点
ng-valid        验证通过
ng-invalid      验证失败
ng-dirty        值改变的时候
ng-pending      任何为满足 $asyncValidators 的情况
ng-pristine     控件为初始状态

3.6. ng-repeat指令

对于集合中（数组中）的每个项会 克隆一次 HTML 元素。用于循环输出

3.7. 创建自定义指令

声明：使用 .directive 函数来添加自定义的指令，声明时使用驼峰命名法

<body ng-app="myApp">
    <!-- 使用 -->
    <lw-click></lw-click>
    
    <!-- 声明 -->
    <script>
    	var app = angular.module("myApp", []);
        app.directive("lwClick", function(){
            return {
                template: "<h1>自定义指令~</h1>"
            }
        });
    </script>
</body>

调用：调用时使用 - 分割

元素名： <lw-click> </lw-click>
属性： <div lw-click> </div>

类名： <div class="lw-click"> </div>

必须设置 restrict 的值为 “C” 才能通过类名来调用指令。

<script>
	app.directive("lwClick", function(){
        return {
            restrict: "C",
            template: "<h1>自定义指令~</h1>"
        }
    });
</script>

注释：

添加 replace 属性，使注释可见

设置 restrict 的值为 “M”

<script>
	app.directive("lwClick", function(){
        return {
            restrict: "M",
            replace: true,
            template: "<h1>自定义指令~</h1>"
        }
    });
</script>

4. AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

4.1. 使用Scope

在AngularJS创建控制器时，可以将$scope对象当作一个参数传递

<div ng-app="myApp" ng-controller="myCtrl">
    <h1> {{ carName }} </h1>                         <!-- 获取变量的值 -->
</div>

<script>
	var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope){       // scope作为参数传递
        $scope.carName = "Volvo";                    // 声明一个变量
    })
</script>

4.2. Scope概述

AngularJS应用组成如下：

View（视图），即HTML scope的属性和方法
Model（模型），当前HTML中可用的数据 scope
Controller（控制器），JavaScript函数，可以添加或修改属性 scope的属性和方法

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">       <!-- 数据绑定 -->
    <h2> {{ greeting }} </h2>
    <button ng-click="sayHello()"> 点我 </button>
</div>

<script>
	var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope){
        $scope.name = "lwclick";   // 声明name
        // 创建方法，响应点击事件
        $scope.sayHello = function(){
            $scope.greeting = 'hello' + $scope.name + '!';
        }
    })
</script>

4.3. Scope作用范围

根作用域：$rootScope

作用在 ng-app 指令包含的所有HTML元素中
用 $rootScope 定义的值，可以在各个controller中使用

<div ng-app="myApp" ng-controller="myCtrl">
	<h1>{{ lastName }} 家族成员:</h1> 
    <ul>
        <li ng-repeat="x in names">{{x}} {{lastname}}</li>
    </ul>
</div>

<script>
	var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope, $rootScope){
        $scope.names = ['Eil', 'Tom', 'Jack'];  // 此处scope对应的是字符串
        $rootScope.lastName = 'Refsnes';
    })
</script>

5. AngularJS控制器

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

5.1. 控制器方法

<div ng-app="myApp" ng-controller="personCtrl">
    姓：<input type="text" ng-model="lastName">
    名：<input type="text" ng-model="firstName">
    姓名：{{ fullName() }}   <!-- 调用方法 -->
</div>

<script>
	var app = angular.module("myApp", []);
    app.controller("personCtrl", function($scope){
        $scope.firstName = "John";
        $scope.lastName = "Doe";
        // 创建方法
        $scope.fullName = function(){
            return $scope.lastName + " " + $scope.firstName;
        }
    });
</script>

5.2. 外部文件中的控制器

将 <script> 标签中的代码复制到 **.js 的外部文件中

HTML中进行引入即可

<div ng-app="myApp" ng-controller="personCtrl">
    ......
</div>

<script src="../personCtrl.js"></script>

6. AngularJS 过滤器

过滤器可以使用一个**管道字符（|）**添加到表达式和指令中。

6.1. 过滤器分类

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

6.2. 表达式中添加过滤器

将字符串格式化为大写小写

<div ng-app="myApp" ng-controller="personCtrl">
    <p> 姓名为:{{ fullName | uppercase }} </p>
</div>

将数字格式转化为货币格式

<div ng-app="myApp" ng-controller="costCtrl">
    <p>总价:{{ (quantity * price) | currency }}</p>
</div>

6.3. 向指令添加过滤器

根据表达式排列数组 orderBy:" "

<div ng-app="myApp" ng-controller="namesCtrl">
    <ul>
        <li ng-repeat="x in names | orderBy:'country'">
        	{{ x.name + "," + x.country }}
        </li>
    </ul>
</div>

过滤输入 filter：ng-model的名称 符合过滤规则的显示，不符合的不显示

<div ng-app="myApp" ng-controller="namesCtrl">
    输入过滤：以上是关于AngularJS # AngularJS入门的主要内容，如果未能解决你的问题，请参考以下文章 
 AngularJS入门学习笔记一
 AngularJs入门之表单开发
 一篇入门AngularJS
 AngularJS # AngularJS入门
 推荐个入门angularjs 的好书，谢谢
 AngularJS入门