一、Angular

最新推荐文章于 2022-10-12 18:55:39 发布

HJHO

最新推荐文章于 2022-10-12 18:55:39 发布

阅读量84

点赞数

分类专栏： Angular 文章标签： angular

本文链接：https://blog.csdn.net/weixin_49576031/article/details/120879468

版权

Angular 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.什么是Angular

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

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

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：

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

注意:我们建议把脚本放在 <body> 元素的底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

目前最新版本是1.5.8 下载地址：https://code.angularjs.org/

2.Angular扩展到HTML中

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

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

ng-bind 指令把应用程序数据绑定到 HTML 视图。

3.Angular表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

例子：

<div ng-app="">

<p>我的第一个表达式： {{ 5 + 5 }}</p>

</div>

3.1Angular表达式中可以为数字

<div ng-app="" ng-init="quantity=1;cost=5">
 <p>总价： {{ quantity * cost }}</p> 
</div>

3.2Angular表达式中可以为字符串

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名: {{ firstName + " " + lastName }}</p>
</div>

3.3Angular表达式中可以为对象

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

3.4Angular表达式中可以为数组

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

4AngularJS 指令

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

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

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

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

ng-controller指令用于绑定控制器。

ng-repeat指令，用来遍历一个集合。

ng-bind指令，用于绑定数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>指令</title>
  <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtry" ng-init="loading()">
  <!-- 类似于 vue v-model react 手动setState 受控组件 / this.setDate-->
    <input type="text" ng-model="name">
    

    <button ng-click="getName()">获取名字</button>
  <h2>我喜欢吃的水果</h2>
  <ul>
    <!-- 类似于vue v-for / wx:fro /react map -->
    <li ng-repeat="fruite in myfruites">{{fruite}}</li>
  </ul>

    <h3>我的座驾</h3>
    <ul>
      <li>{{myCar.name}}</li>
      <li>{{myCar.color}}</li>
      <li>{{myCar.price}}</li>
    </ul>
    <ul>
      <li ng-repeat="item in myCar">{{item}}</li>
    </ul>

   <script>
     let myModel = angular.module('myApp',[]);
     myModel.controller('myCtry',function($scope){
       $scope.name = "张三";
       $scope.myfruites = ["苹果","香蕉","梨子","胜利果"];
       $scope.myCar = {
         name : "奔驰",
         color:"白色",
         price : 10
       }
       $scope.getName = function(){
          console.log($scope.name)
       }
      //  初始化时
      $scope.loading = function(){
        alert("页面初始化了")
      }
     })
   </script>
</body>
</html>

数据绑定通过ng-model指令完成表单的数据双向绑定

5.AngularJS 模块

模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。

创建模块

你可以通过 AngularJS 的 angular.module 函数来创建模块
var app = angular.module("myApp", []);
在指定的html元素上<body>/<div>通过ng-app指令引用模块
<div ng-app="myApp">...</div>

6.AngularJS 控制器

AngularJS 应用程序被控制器控制。

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

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

<script>
/**
* myApp 为模型名称
* app 为模型对象
* myCtrl 为控制器名称
* $scope 为html 和 js 链接的中转站
*/
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

</script>

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

控制器方法

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

控制器也可以有方法（变量和函数）：

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.firstName = "John";

    $scope.lastName = "Doe";

});

</script>

7.AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.carname = "Volvo";

});

</script>

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.name = "Runoob";

    $scope.sayHello = function() {

        $scope.greeting = 'Hello ' + $scope.name + '!';

    };

});

</script>

无奈源于不够强大