AngularJS（一）入门使用

最新推荐文章于 2025-08-06 10:50:22 发布

原创最新推荐文章于 2025-08-06 10:50:22 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS

AngularJS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍AngularJS的基础使用方法，包括核心指令如ng-app、ng-model等的使用方式，以及控制器和自定义指令的创建方法。同时，展示了如何利用AngularJS进行数据绑定、控制器管理和DOM操作。

类似与jQuery的使用方法，先<script src="...">才能使用

-------------------------------------

简单的例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>angularJS-1</title>
</head>
<body>

<div ng-app="">
    <p>在输入框中尝试输入：</p>
    <p>姓名 : <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</body>
</html>

-------------------------------------------

两个<script src都可以用

-------------------------------------

比较基础的几个ng-指令

ng-app/data-ng-app
ng-model
ng-init
ng-bind/{{}}
ng-controller以及用法
AngularJS对象
AngularJS数组
ng-repeat
app.directive
restrict(app.directive中的)
-------------------------------------
1.ng-app=""
指定HTML元素绑定AngularJS应用,一般是<div></div>
data-ng-app="myApp",后面的ng前都得加data-
前面加data-,是符合H5规范的标准书写

没有controller的时候，有名字会报错；有controller才可以自定义名称

2.ng-model="userName"
<input ng-model="userName">

把输入域的值绑定到变量

3.ng-init

指定初始值

4.ng-bind="userName"
作用同{{userName}}
但依赖标签，而{{}}不需要标签
把userName变量的值在页面上显示出来
一般是先用ng-model或者ng-init绑定变量和数据
再用ng-bind/{{}}输出值

它们可以包含文字、运算符和变量

5.ng-controller控制器
<div ng-app="myApp" ng-controller="myCtrl">...
<script>
var app = angular.module('myApp', []);

AngularJS模块定义应用

6.
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";

});

7.AngularJS 对象就像 JavaScript 对象：
初始化一个对象

ng-init="person={firstName:'John',lastName:'Doe'}"

8.AngularJS的数组和JS一样

ng-init="numbers=[1,2,3,4,5]"

9.ng-repeat克隆HTML标签，一般用于遍历数组
<div ng-app="" ng-init="persons=['赵','钱','孙','李','',15,26,31]">
<p>使用 ng-repeat 来循环数组</p>
<ol>
<li ng-repeat="i in persons">
{{ i }}
</li>
</ol>

</div>

10.directive，自定义标签
<asd></asd>
<script>
var app = angular.module("myApp",[]);
app.directive("asd",function(){
return {
template:"<div ng-init=\"person=' Lee Buluse'\">hello{{person}}</div>"
};
});

</script>

11.directive中的restrict，值有5种
EA：可以通过元素或属性名调用（默认）
E：作为元素名使用
A：作为属性使用
C：作为类名使用
M：作为注释使用
<script>
var app = angular.module("myApp", []);
app.directive("asd", function() {
return {
restrict : "EA",
template : "<h1>自定义指令!</h1>"
};
});
</script>