初识Angular

最新推荐文章于 2024-07-12 16:27:40 发布

shuyisheng

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量255

点赞数 2

分类专栏： AngularJS 文章标签： angular javascript html mvc

本文链接：https://blog.csdn.net/shuyisheng/article/details/54999605

版权

AngularJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Angular简介

Angular是Google开发一大套基于MVC模式的javascript库，针对HTML标签构建动态Web。
Angular两个技术特点：

数据双向绑定
两种数据绑定方式：数据绑定通过{{}}双花括号的方式向页面的DOM元素中插入数据，也可以通过添加元素属性的方式绑定Angular的内部指令。
绑定的数据是双向同步的，只要一端发生了变化，另一端会自动进行同步（客户端／服务端）。
依赖注入
依赖注入只需要关注实现页面功能需要调用的对象是什么，而不必了解它需依赖什么。比如说$scope对象就是通过依赖注入的方式使用的。

安装Angular开发环境
在Angular官网下载最新的Angular文件在使用时我们只需要找到Angular.js或者Angular.min.js文件引用入项目即可。下载了最新的Angular1.x版本中的1.6.2的版本。
开发工具我用的是webstorm，网上有破解版本下载。
在开发中使用时需要在HTML5页面中引用如下js文件：

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

简单示例

编写一个简单的Angular程序，当页面加载的时候用Angular标签显示HelloWorld。

 <!DOCTYPE html>
<html lang="zh-cn" ng-app>
<head>
    <meta charset="UTF-8">
    <title>初识Angular</title>
    <script src="scripts/angular.js" type="text/javascript"></script>
</head>
<body>
    {{'Hello World,欢迎来到Angular世界！'}}
</body>
</html>

用浏览器预览可以看到页面显示：Hello World,欢迎来到Angular世界！

这里需要注意在html标签里需要增加ng-app属性，ng-app属性也可以添加到div元素中，表明在这个div范围内可以调用Angular框架管理其中包含的DOM元素。

下面看一个具有计算功能的Angular程序，当页面加载时，在页面的正文部分通过插入数据的方式计算任意一对数值的和，并将计算结果显示在页面上。

<!DOCTYPE html>
<html lang="zh-cn" ng-app>
<head>
    <meta charset="UTF-8">
    <title>一个计算功能的Angular程序</title>
    <script src="scripts/angular.js" type="text/javascript"></script>
</head>
<body>
<h3>计算并显示下列两个数值的和</h3>
10.87+8.88={{10.87+8.88|number:0}}
</body>
</html>

显示结果为20,结果转化成整型。

这里需要注意的|符号叫管道符号，在Angular中表示调用过滤器格式化数据，它的调用方法如下：
{{exp | filtername: para1:…paraN}}
上例中的number:0表示除掉小数后的数值，保留整数部分
Angular中有许多过滤器如：currency、date、number和uppercase等。还可以定义自定义过滤器，以后再深入学习。

编写一个绑定页面元素的Angular程序，文本框中输入的内容动态显示到div上面。

<!DOCTYPE html>
<html lang="zh-cn" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>一个绑定页面元素的Angular程序</title>
    <script src="scripts/angular.js" type="text/javascript"></script>
</head>
<body>
<h3>请在文本框中输入用户名：</h3>
<div  ng-controller="usercontroller">
    <input id=“txtUserName"  type="text" ng-model="user.name" >
    <div>{{user.name}}</div>
</div>
<script type="text/javascript">
    var app=angular.module('myApp',[]);
    app.controller('usercontroller',function ($scope) {
        $scope.user={name:"”};//默认初始化为空值
    });
</script>
</body>
</html>

效果如下：
这里写图片描述
这里需要注意页面元素中增加了ng-app、ng-controller、ng-model指令。ng-app管理整个标签范围内应用angular。ng-controller申明angular中控制器的类名，当然也需要相应的js实现该控制器，如示例中的js代码。ng-model是双向绑定数据，示例是绑定user.name值到文本框中，当我们改变这个绑定的值时（文本框中的值时）对其它插入的数据源比如div中的{{user.name}}也会同步更新，这一切无需要任何事件。

编写一个绑定多个页面元素的Angular程序，通过一个数组集合与页面中多个元素绑定。

<!DOCTYPE html>
<html lang="zh-cn" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>一个绑定多个页面元素的Angular程序</title>
    <script src="scripts/angular.js" type="text/javascript"></script>
</head>
<body>
<h3>以列表的方式绑定多项数据：</h3>
<div  ng-controller="stucontroller">
    <ul>
        <li ng-repeat="stu in data">
            <span>{{stu.name}}</span>
            <span>{{stu.sex}}</span>
            <span>{{stu.age}}</span>
            <span>{{stu.score}}</span>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var app=angular.module('myApp',[]);
    app.controller('stucontroller',function ($scope) {
        $scope.data=[
            {name:'李建程',sex:'男',age:8,score:100},
            {name:'赵泽源',sex:'男',age:9,score:99},
            {name:'叶泳欣',sex:'女',age:8,score:98},
            {name:'万佳棋',sex:'女',age:8,score:100}
        ];
    });
</script>
</body>
</html>

运行效果如下图：
这里写图片描述
这里要注意本示例增加了一个ng-repeat的Angular指令，表示复制的意思，即对于data中的每一个元素，都会将li元素中的结构复制一次，从而实现li元素显示全部data数组内容的功能。

总结：通过这篇文章可以知道Angular代码的初步了解，对于Angular的基础原理还需要通过后续的学习来深入学习。

shuyisheng

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Angular

Angular简介Angular是Google开发一大套基于MVC模式的javascript库，针对HTML标签构建动态Web。 Angular两个技术特点：数据双向绑定两种数据绑定方式：数据绑定通过{{}}双花括号的方式向页面的DOM元素中插入数据，也可以通过添加元素属性的方式绑定Angular的内部指令。绑定的数据是双向同步的，只要一端发生了
复制链接

扫一扫