AngularJS 入门01

最新推荐文章于 2025-03-12 11:14:17 发布
最新推荐文章于 2025-03-12 11:14:17 发布
阅读量632 收藏 16
点赞数 28
分类专栏： .net 前端 文章标签： angular.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cao919/article/details/144637793
版权

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

运行结果

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

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

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

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

什么是 AngularJS？

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

  • AngularJS 把应用程序数据绑定到 HTML 元素。

  • AngularJS 可以克隆和重复 HTML 元素。

  • AngularJS 可以隐藏和显示 HTML 元素。

  • AngularJS 可以在 HTML 元素"背后"添加代码。

  • AngularJS 支持输入验证。

AngularJS 指令

正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量。


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

HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

带有有效的 HTML5：

<div data-ng-app="" data-ng-init="firstName='John'">
 
<p>姓名为 <span data-ng-bind="firstName"></span></p>
 
</div>

AngularJS 表达式

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

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

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

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

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 应用

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。

AngularJS 表达式

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

AngularJS 表达式

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

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

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

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

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 数字

使用 ng-bind 的相同实例：

AngularJS 字符串 对象 数组

AngularJS 字符串就像 JavaScript 字符串：

使用 ng-bind 的相同实例：

AngularJS 表达式 与 JavaScript 表达式

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

AngularJS 指令

AngularJS 通过被称为 指令 的新属性来扩展 HTML。

AngularJS 通过内置的指令来为应用添加功能。

AngularJS 允许你自定义指令。

AngularJS 指令

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

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

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

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

使用 ng-init 不是很常见

重复 HTML 元素

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

创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， openketangDirective, 但在使用它时需要以 - 分割, openketang-directive:

<body ng-app="myApp">

    <openketang-directive></openketang-directive>
    
    <script>
    var app = angular.module("myApp", []);
    app.directive("openketangDirective", function() {
        return {
            template : "<h1>自定义指令!</h1>"
        };
    });
    </script>
    
    </body>

你可以通过以下方式来调用指令：

  • 元素名

  • 属性

  • 类名

  • 注释

以下实例方式也能输出同样结果:

元素名

<openketang-directive></openketang-directive>

属性

<div openketang-directive></div>

类名

<div class="openketang-directive"></div>

注释

<!-- directive: openketang-directive -->

限制使用

你可以限制你的指令只能通过特定的方式来调用。

实例

通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:

var app = angular.module("myApp", []);
app.directive("openketangDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

restrict 值可以是以下几种:

  • E 作为元素名使用

  • A 作为属性使用

  • C 作为类名使用

  • M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

AngularJS ng-model 指令

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

ng-model 指令

ng-model 指令可以将输入域的值与 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>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<style>
    input.ng-invalid {
        background-color: lightblue;
    }
    input.ng-empty {
        background-color: rgb(230, 173, 178);
    }input.ng-touched {
        background-color: rgb(235, 86, 197);
    }
    
    </style>
<body>

    <form ng-app="" name="myForm" ng-init="myText = '957801754@qq.com'">
        Email:
        <input type="email" name="myAddress" ng-model="myText" required></p>
        <h1>状态</h1>
        {{myForm.myAddress.$valid}}
        {{myForm.myAddress.$dirty}}
        {{myForm.myAddress.$touched}} 
        输入你的名字:
        <input name="myAddress" ng-model="text" required>
    </form>
</body>
</html>

提示信息会在 ng-show 属性返回 true 的情况下显示。

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

CSS 类

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

ng-model 指令根据表单域的状态添加/移除以下类：

scope 是模型。

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

  • ng-empty

  • ng-not-empty

  • ng-touched

  • ng-untouched

  • ng-valid

  • ng-invalid

  • ng-dirty

  • ng-pending

  • ng-pristine

  • AngularJS Scope(作用域)

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

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

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

    如何使用 Scope

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

    AngularJS 实例

    控制器中的属性对应了视图上的属性：

  •    <div ng-app="myApp" ng-controller="myCtrl"> 
        <h1>{{carname}}</h1> 
    </div> 
    <script>
        var app = angular.module('myApp', []);

        app.controller('myCtrl', function ($scope) {
            $scope.carname = "yyyh";
        });
    </script>

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

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

  • Scope 概述

    AngularJS 应用组成如下：

  • View(视图), 即 HTML。

  • Model(模型), 当前视图中可用的数据。

  • Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

AngularJS 实例

如果你修改了视图，模型和控制器也会相应更新：

    <div ng-app="myApp" ng-controller="myCtrl">
        <input ng-model="name">
        <h1>{{greeting}}</h1>
        <button ng-click='sayHello()'>点我</button>    
    </div>
     
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name = "Open520mus";
        $scope.sayHello = function() {
            $scope.greeting = 'Hello ' + $scope.name + '!';
        };
    });
    </script>

Scope 作用范围

了解你当前使用的 scope 是非常重要的。

在以上两个实例中，只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。

AngularJS 实例

当我们使用 ng-repeat 指令时，每个重复项都访问了当前的重复对象:

<div ng-app="myApp" ng-controller="myCtrl">

<ul>
    <li ng-repeat="x in names">{{x}}</li>
</ul>

</div>

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

app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

每个 <li> 元素可以访问当前的重复对象，这里对应的是一个字符串， 并使用变量 x 表示。

根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

AngularJS 实例

创建控制器时，将 $rootScope 作为参数传递，可在应用中使用：

<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 = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

AngularJS 控制器

 AngularJS 控制器 控制 AngularJS 应用程序的数据。

 AngularJS 控制器是常规的 JavaScript 对象。

AngularJS 控制器

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

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

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

AngularJS 实例

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<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(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

控制器方法

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

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

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<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>

外部文件中的控制器

在大型的应用程序中，通常是把控制器存储在外部文件中。

只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可：

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

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

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

 

其他实例

以下实例创建一个新的控制器文件:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

保存文件为 namesController.js:

然后，在应用中使用控制器文件:

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

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

AngularJS 过滤器

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

AngularJS 过滤器

AngularJS 过滤器可用于转换数据：

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

表达式中添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.

(下面的两个实例，我们将使用前面章节中提到的 person 控制器)

uppercase 过滤器将字符串格式化为大写：

向指令添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

orderBy 过滤器根据表达式排列数组：

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>
    <div data-ng-app="" data-ng-init="namesrepeat=['Jani','Hege','Kai'];
    namesrepeatarray=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}];
          names=[
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}];firstName='John';quantity=1;cost=5;lastName='Doe';
        person={firstName:'John',lastName:'Doe'};points=[1,15,19,2,40]">
        <p>姓名为 <span data-ng-bind="firstName"></span></p>
        <p>我的第一个表达式： {{ 5 + 5 }}</p>
        <p>总价： {{ quantity * cost }}</p>
        <p>总价： <span ng-bind="quantity * cost"></span></p>
        <!-- AngularJS 字符串 -->
        <p>姓名： {{ firstName + " " + lastName  }}</p>
        <p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
        <!-- AngularJS 对象 -->
        <p>姓为 {{ person.lastName }}</p>
        <p>姓为 <span ng-bind="person.lastName"></span></p>
        <!-- AngularJS 数组 -->
        <p>第三个值为 {{ points[2] }}</p>
        <p>第三个值为 <span ng-bind="points[2]"></span></p>
        <!-- AngularJS 指令 -->
        <p>在输入框中尝试输入：</p>
        <p>姓名：<input type="text" ng-model="firstName"></p>
        <p>你输入的为： {{ firstName }}</p>

        <h2>价格计算器</h2>
        数量： <input type="number" ng-model="quantity">
        价格： <input type="number" ng-model="price">
        <p><b>总价：</b> {{ quantity * price }}</p>

        <p>使用 ng-repeat 来循环数组</p>
        <ul>
            <li ng-repeat="x in namesrepeat">
                {{ x }}
            </li>
        </ul>
        <p>循环对象：</p>
        <ul>
            <li ng-repeat="x in namesrepeatarray">
                {{ x.name + ', ' + x.country }}
            </li>
        </ul>


        
        <!-- 表达式中添加过滤器 -->
        <p>姓名： {{ firstName + " " + lastName | uppercase }}</p> 
        <p>姓名： {{ firstName + " " + lastName | lowercase }}</p>
        <p><b>总价：</b> {{ quantity * price | currency }}</p>

        <ul>
            <li ng-repeat="x in namesrepeatarray | orderBy:'country'">
                {{ x.name + ', ' + x.country }}
            </li>
        </ul>
        
        <p><input type="text" ng-model="test"></p>

        <ul>
          <li ng-repeat="x in names | filter:test | orderBy:'country'">
            {{ (x.name | uppercase) + ', ' + x.country }}
          </li>
        </ul>
        
    </div>

</body>

</html>

自定义过滤器

以下实例自定义一个过滤器 reverse，将字符串反转：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Openketang";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});

什么是服务？

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

有个 $location 服务，它可以返回当前页面的 URL 地址。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。

为什么使用服务?

在很多服务中，比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。

AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。

$location vs window.location

window.location$location.service
目的允许对当前浏览器位置进行读写操作允许对当前浏览器位置进行读写操作
API暴露一个能被读写的对象暴露jquery风格的读写器
是否在AngularJS应用生命周期中和应用整合否可获取到应用声明周期内的每一个阶段，并且和$watch整合
是否和HTML5 API的无缝整合否是（对低级浏览器优雅降级）
和应用的上下文是否相关否，window.location.path返回"/docroot/actual/path"是，$location.path()返回"/actual/path"

$http 服务

$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。

实例

使用 $http 服务向服务器请求数据:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

以上是一个非常简单的 $http 服务实例，更多 $http 服务应用请查看 AngularJS Http 教程。

$timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

实例

两秒后显示信息:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。

实例

每一秒显示信息:

​
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

创建自定义服务

你可以创建访问自定义服务，链接到你的模块中：

创建名为hexafy 的访问:

​
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

要使用访问自定义服务，需要在定义控制器的时候独立添加，设置依赖关系:

实例

使用自定义的的服务 hexafy 将一个数字转换为16进制数:

​
app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

过滤器中，使用自定义服务

当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。

在过滤器 myFormat 中使用服务 hexafy:

app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);

在对象数组中获取值时你可以使用过滤器：

创建服务 hexafy:

<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>
</ul>

AngularJS入门
善假于物
03-01 1224
AngularJS是一个JavaScript框架，用js编写的库 1.1. AngularJS 扩展了 HTML AngularJS 通过 ng-directives扩展了HTMLng-app 指令定义一个 AngularJS 应用程序。 若不声明，将直接显示表达式。ng-model 指令把元素值（比如输入域的值）绑定到应用程序。ng-bind 指令把应用程序数据绑定到 HTML 视图。一般使用 **{ { ng-model 的值 }}**获取数据 当网页加载完毕，AngularJS 自动开启。Angula
AngularJS教程：AngularJS入门
danpu0978的博客
04-21 594
AngularJS是用于构建单页应用程序（SPA）的流行JavaScript框架。 AngularJS提供了以下功能，使开发Web应用程序变得容易： 双向数据绑定 依赖注入 自定义HTML指令 使用$ http，$ resource，Restangular等轻松与REST Web服务集成 测试支持 还有很多… 尽管功能比上面列出的要多，但这些是非常常用的...
AngularJS全栈入门代码示例与教程
最新发布
weixin_36078669的博客
03-12 802
本文还有配套的精品资源，点击获取 简介：AngularJS是Google开发的一个前端JavaScript框架，特别适合构建单页应用。本资源包"小猫杯"包含AngularJS的全套学习材料，涵盖了数据绑定、依赖注入、指令系统等核心特性，以及控制器、服务、模块系统等高级功能。它还包括路由设置、单元测试、MVC模式和版本迭代等重要知识点。通过这些代码示例和实践项目，初学者可以快...
AngularJS基础入门
xyphf的博客
11-04 1319
1、AngularJS 表达式把数据绑定到 HTML<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular.js"></script> </head> <body> <div ng-app=""> <p>我的第一个表达式: {{ 5 + 5 }}</p> </div> </body> </html>2
angularjs入门
lovetg0419的博客
02-27 453
        *******************************重要********************************* angularJS是通过操作json对象，来操作页面元素的前端框架       $event:使用     自定义服务           angularJ...
AngularJS入门教程之AngularJS指令
10-22
AngularJS是谷歌开发的一个开源的JavaScript框架，用于构建动态Web应用程序。它使用了声明式编程模型，可以让我们以HTML为基础快速开发出富有动态交互性的Web界面。AngularJS的核心特点之一是其引入了指令...
ANGULARJS入门教程[整理].pdf
10-11
ANGULARJS入门教程[整理].pdf
AngularJS入门教程之AngularJS模型
10-22
接下来将详细介绍AngularJS入门教程中关于模型的一些基本知识点。 1. 双向数据绑定：ng-model在AngularJS中实现的是双向数据绑定，这意味着模型数据和视图元素之间建立了直接的联系。当模型数据发生变化时，视图上...
AngularJS
开水烫鱼的博客
06-08 592
AngularJS AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。 AngularJS四大特征 MVC 模式 Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间...
angularJS
hello_world123456789的博客
06-27 755
1.AngularJS简述 AngularJS的官方文档是这样介绍它的。 完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术（HTML、CSS 和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。 AngularJS使开发Web应用变得非常简单，同时也降低了构建复杂应用的难度。它提供了开发者在现代Web应用中经常要用到的一系列高级功能，例如： 解...
Angularjs的入门
xuxu_qkz的博客
11-30 1018
1.angular是什么? AngularJS是Google开发的纯客户端JavaScript技术的WEB框架,用于扩展增强HTML功能,它专为构建“强大”的WEB应用而设计。 Angular 简称 ng； 2.环境准备 1)下载angular https://code.angularjs.org/ 2)使用angular1、加入angular库 a、解压：angular-1.5
AngularJS入门指南
"AngularJS: Up and Running 是一本权威的AngularJS教程，旨在帮助读者从基础到高级概念逐步掌握这个JavaScript框架。本书由在Google参与AngularJS开发的工程师Shyam Seshadri和Brad Green撰写，适合JavaScript初学...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云草桑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值