angularJS初识--介绍基本功能及用法

最新推荐文章于 2021-03-17 18:16:14 发布

charlene程程

最新推荐文章于 2021-03-17 18:16:14 发布

阅读量1.3k

点赞数

分类专栏： angular 文章标签： angular

本文链接：https://blog.csdn.net/charlene0824/article/details/51683751

版权

angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

angular是利用JavaScript编写的一个库，是为了克服html在构建应用上的不足。angularJS通过使用标识符的结构让浏览器能够使用新的语法，通过使用被称为指令的新属性来扩展HTML，通过内置的指令来为应用添加功能、并且运行自定义的指令。主要适用于构建CRUD的应用，不适合dom操作频繁的应用。

angularJS的基本功能

angularJS使得开发现代的单一页面应用程序变得更加容易

angularjs把应用程序数据绑定到HTML元素
angularjs可以克隆和重复HTML元素
angularjs可以隐藏和显示HTML元素
angular技术可以在HTML背后添加代码
angularjs支持输入验证

angularJS的基本使用方法

同jquery一样，首先需要到AngularJS的官网下载AngularJS库，在需要使用AngularJS的文件中，引入AngularJS的库

<script type="text/javascript" src = 'angular.js'></script>

下面是使用AngularJS库的一个实例

<html lang="en" ng-app='myapp'>
<head>
<meta charset="UTF-8">
<title>angular初识</title>
<script type="text/javascript" src = 'angular.js'></script>

</head>
<body >
<input type="text" ng-model='user' name='name' placeholder="请输入你的名字">
<h1>hello {{user||'world'}}</h1>

<div ng-init="myText='hello world'">
<p ng-bind='myText'></p>
</div>

<div ng-controller = "MyController"><h1>{{clock}}</h1></div>
<script type="text/javascript">
    //angularjs中使用angular.module()方法来声明模块 这个方法能够接收两个参数，第一个参数是模块的名称，第二个是依赖列表，
    var app = angular.module('myapp',[]);
    //定义控制器的内容  第一个参数为html元素中定义的控制器名，第二个参数为控制器需要执行的方法
    app.controller("MyController",function($scope,$timeout){
        var updateClock = function(){
            $scope.clock = new Date();
            $timeout(function(){
                updateClock();
            },1000)
        };
        updateClock();
    })

</script>
</body>
</html>

该例实现一个简单的欢迎页，如果文本框中有内容（假设Charlene)，页面将显示“hello Charlene”,如果文本框中没有内容，将显示‘hello world’
当页面加载完毕后，AngularJS会自动启动上例中使用了AngularJS的一些指令，这里介绍一下基本指令