从头开始学习angular.js----002（尽量每天一篇）

最新推荐文章于 2024-09-17 13:42:29 发布

精讲JAVA

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量533

点赞数

分类专栏：前端文章标签： angular angularjs javascript

本文链接：https://blog.csdn.net/u014271180/article/details/52904401

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天讲一下angularjs的表达式以及指令

表达式
（1）其实表达式非常简单，跟js中的表达式相似，表达式中可以是变量，数字，以及文字等，angular的表达式写法也非常简单就是双花括号{{ }}

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="">
    <h1>3+4等于{{3+4}}</h1>
</div>
</body>
</html>

这里写图片描述
或者说我们初始化两个变量使用ng-init指令
代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="x=3;y=4">
    <h1>3+4等于{{x+y}}</h1>
</div>
</body>
</html>

结果不变
这里写图片描述
2.下面我们说一下指令
其实angular就是通过指令来扩展html的
其实指令我们可以使用内置指令也可以自定义指令，内置指令很好理解就是我们那些ng-开通的命令，后期我们会用到很多内置指令例如ng-app,ng-init,ng-controller,ng-repeat等，在这不多说了，我们主要来说一下自定义指令
我们来写一个名为Test的自定义指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body ng-app="myApp">

<runoob-test></runoob-test>

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

</body>
</html>