AngularJS入门

原创

已于 2024-05-09 17:44:23 修改 · 1.3k 阅读

标签

#angular.js #前端 #javascript

于 2024-03-01 21:00:00 首次发布

AngularJS 是一个JavaScript框架，扩展HTML并提供指令、数据绑定、服务等功能。本文介绍了AngularJS的基础，如表达式、指令（如ng-app、ng-model、ng-repeat）、Scope、控制器、过滤器、服务，以及表单、选择框、事件处理和路由等，旨在帮助开发者全面了解和掌握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>