AngularJS

最新推荐文章于 2024-10-01 20:12:28 发布

zhuxyyds

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量60

点赞数

文章标签： angular.js javascript 前端

本文链接：https://blog.csdn.net/zhuxyyds/article/details/120881306

版权

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

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

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

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

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

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

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

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

<body ng-app="">
        <p>名字：<input  type="text" ng-model="name"></p>
        <p>ng-bind 指令把应用程序数据绑定到 HTML 视图。</p>
        <h1>Hello {{name}}
        </h1>
        <p ng-bind="name"></p>
</body>

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

ng-app 指令告诉 AngularJS，<body> 元素是 AngularJS 应用程序的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

如果移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。

AngularJS 表达式

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

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

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

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

AngularJS 数字就像 JavaScript 数字

        <div ng-app="" ng-init="quantity=1;cost=6">
            <p>{{quantity*cost}}</p>
        </div><br>

AngularJS 字符串就像 JavaScript 字符串

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

AngularJS 对象就像 JavaScript 对象

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

AngularJS 数组就像 JavaScript 数组

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

AngularJS 指令

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

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

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

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

<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span>{{firstNam}}</span></p>
</div>

数据绑定

AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

ng-repeat 指令会重复一个 HTML 元素

AngularJS 模块

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象:</p>
<ul>
  <li ng-repeat="x in names">
  {{ x.name + ', ' + x.country }}</li>
</ul>
</div>

模块定义了一个应用程序。

模块是应用程序中不同部分的容器。

模块是应用控制器的容器。

控制器通常属于一个模块。

创建模块

你可以通过 AngularJS 的 angular.module 函数来创建模块

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

在指定的html元素上<body>/<div>通过ng-app指令引用模块

AngularJS 控制器

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

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

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

<script>
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('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

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>