AngularJS(1)

airar

于 2021-10-21 11:17:34 发布

阅读量89

点赞数

分类专栏： AngularJS 文章标签： angular.js

本文链接：https://blog.csdn.net/airar/article/details/120869977

版权

AngularJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

AngularJS 简介

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

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

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

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

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

于脚本加载

下载地址：https://code.angularjs.org/

引入AngularJS CDN文件

当然，你还有更多选择，那就是引入AngularJS CDN文件。

AngularJS官网本身采用AngularJS库构建，页面中的AngularJS库通过Google的CDN（内容分发

网络）引入，所以国内访问会有问题

国内我们一般推荐是以下CDN

引入百度CDN

bootcdn

例如:

    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body ng-app="">
        
    </body>
</html>

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

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

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

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

AngularJS 表达式

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

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

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

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

AngularJS 数字就像 JavaScript 数字

<p>总价： {{ quantity * cost }}</p>

</div>

使用 ng-bind 的相同实例

</div>

AngularJS 字符串就像 JavaScript 字符串

<p>姓名: {{ firstName + " " + lastName }}</p>

</div>

AngularJS 对象就像 JavaScript 对象

<p>姓为 {{ person.lastName }}</p>

</div>

AngularJS 数组就像 JavaScript 数组

<p>第三个值为 {{ points[2] }}</p>

</div>

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script>
            //创建angularjs模块
            var mytestmodule1=angular.module("mytest1",[]);
            //通过angularjs模块对象创建控制器对象
            mytestmodule1.controller('mytestcontroller1',function($scope){
                $scope.name="zhangsan";
                $scope.number=12345;
                $scope.boo=true;
                $scope.myarr=["zhangsan","lisi","wangwu"];
                $scop.mystu={stuid:1001,stuname:"zhangsan",stuaddress:"西安"};
            })
        </script>
    </head>
    <body ng-app="mytest1" ng-controller="mytestcontroller1">
        <h4>AngularJS<br>
            AngularJS写在大括号内:{{expression}}<br>
            AngularJS表达式把数据绑定在html<br>
            算数运算:{{12+23}}<br>
            比较运算:{{100 < 20}}<br>
            逻辑运算:{{(100 >20) ||(20 < 10)}}<br>
            AngularJS变量值创建过程:<br>
            1.创建AngularJS模块:angularJS.module("模块名称",[]);<br>
            2.在ng-app制定下引入模块名称:ng-app="模块名称"<br>
            3.通过angularJS模块创建一个控制对象:<br>
            angular模块对象.controller('控制器名称',function(){})<br>
            4.通过ng-controller="控制器名称"引入控制器对象到html网页<br>
            5.在定义的控制器中声明定义angularjs变量: $scope.变量名称=变量值<br>
            字符串变量name=={{name}}<br>
            数字变量number=={{number}}<br>
            boolean变量boo=={{boo}}<br>
            数组变量myarr[2]=={{myarr[2]}}<br>
            对象变量mystu.stuaddress=={{mystu.stuaddress}}
        </h4>
    </body>
</html>

AngularJS 指令

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

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

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

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

数据绑定

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

AngularJS 模块

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

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

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

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

创建模块

你可以通过 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> 内运行。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。

控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。

控制器方法

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

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

AngularJS Scope(作用域)

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

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

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

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用

airar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS(1)

AngularJS简介AngularJS 是一个JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：<script src="https://...
复制链接

扫一扫

专栏目录