初识AngularJs

Posted 2020-09-07 喜欢的事用心去做

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识AngularJs相关的知识，希望对你有一定的参考价值。

今天看看angular。文章将从三个大的部分来说，第一部分什么是angular，第二部分，初次使用时需要注意的一些事项，第三部分，angular基础概念；

一，什么是AngularJs？

AngularJs是为了克服html在构建应用上的不足而设计的，它是一个javascript框架。通过使用我们称为标识符的结构，让浏览器能够识别新的语法。例如使用{{}}进行数据绑定。

AngularJs通过为开发者呈现一个更高层次的抽象来简化应用开发，这在带来方便的同时也导致灵活性的降低。AngularJs主要考虑的是构建CURD(增加：create，更新：update，查询：retrieve，删除：delete）应用。像游戏或者图形处理应用这种dom操作频繁和复杂的应用则不适合用它来开发。

从表象上来看，AngularJs通过新的属性和表达式扩展了html。比如可以直接写在双大括号里面的表达式，带有ng-前缀的各种指令等等，让html元素完成了很多神奇美妙的事情，这在某种程度上取代了我们之前需要专门在单独的文件中手写的复杂的各种dom操作。举个例子：用原生JavaScript获取一个值，并赋给html元素，首先我们要取到这个元素，把它存于一个变量，然后将需要赋给它的值取到，最后通过赋值运算符或者函数实现赋值。有了angular之后我们只要将数据导入应用，然后在元素内部通过{{变量名}}就可以实现给元素赋特定值的操作了。

二，初次使用AngularJs时需要注意的一些事项。

1.调用：angular.min.js这是压缩后的文件名，具体路径根据自己本地情况而定。像引用其他js文件一样在<script>标签中引入，需要注意的是对应的代码应该写在引用语句之后。

2.ng-app:这是一个指令，之所以放在这里说是因为，只要你要开始一个angular引用的练习就必然要和他打交道。

先看下面代码：我在一个html应用中定义了两个无名的应用，因为我觉得很小的知识点又类似，想放在一个网页上运行，其结果是第一个显示正常，第二个直接将表达式原封不动的输出了。查了下原因，这个应该和后面的模块定义有关。所以呢，刚开始使用还是乖乖的把应用分开在独立的html文件中创建吧。

　　　　　　　<div ng-app="" ng-init="firstname=‘ben‘;lastname=‘xiaohai‘">
                <p>数学运算：{{5+9}}</p>
                <p>字符串：姓{{firstname}},名{{lastname}},姓名{{firstname+lastname}}</p>
            </div>
            <div ng-app="" ng-init="person={firstname:‘ben‘,lastname:‘xiaohai‘}">
                <p>对象：姓{{person.firstname}}，名{{person.lastname}}，姓名{{person.firstname+person.lastname}}</p>
            </div>

3.就是，不要忘记了，angular是一个JavaScript框架，所以很多东西是通的，不要因为陌生就忘记或者忽略了，比如初始化数据时字符串需要引号，数字不需要等等。

三，AngularJs的基础概念。

粗粗看了下，基础概念大概有二十多个，这里简单讲解。

1，angular表达式

angular使用表达式把数据绑定到html，表达式写在双大括号内。最终数据将输出在双括号所在位置。angular表达式类似于JavaScript表达式，可包含文字，运算符和变量。

数字运算和字符串：

　　　　　　　<div ng-app="" ng-init="firstname=‘ben‘;lastname=‘xiaohai‘">
                <p>数学运算：{{5+9}}</p>
                <p>字符串：姓{{firstname}},名{{lastname}},姓名{{firstname+lastname}}</p>
            </div>

数据源为对象时的调用：

　　　　 <div ng-app="" ng-init="person={firstname:‘ben‘,lastname:‘xiaohai‘}">
            <span>姓：{{person.firstname}}</span>
            <p>姓名：{{person.firstname+person.lastname}}</p>
        </div>

2，angular指令

angular通过被称为指令的新属性来扩展html，通过内置的指令为应用添加新功能，并且允许你自定义指令。指令都带有前缀：ng-，如：ng-app,ng-init,ng-model等。它可以实现数据绑定，循环生成html元素等等功能。

指令实现数据绑定：

　　　　    <div ng-app="" ng-init="quantity=1;price=5">
                数据绑定：
                <input type="number" ng-model="quantity" />
                <input type="number" ng-model="price" />
                <p>总价：{{quantity*price}}</p>
            </div>

指令用来循环生成元素：

　　　　　　　<div ng-app="" ng-init="names=[‘ben‘,‘xiao‘,‘hai‘]"><ul>
                <li ng-repeat="x in names">
                    {{x}}
                </li>
            </ul>
            </div>

自定义指令：

script文件中定义：

　　　　　　var app=angular.module("zdyApp",[]);
            app.directive("zdytag",function(){
                return{
                    template:"<p style=‘color:red;‘>首先声明模块，然后在模块的directive方法里面自定义指令，通过标签形式调用。</p><h1>自定义指令.</h1>"
                };
            })

html中调用：

　　　　　　　<div ng-app="zdyApp"> 
                <zdytag></zdytag>
            </div>

3，angular模型

用于绑定应用程序数据到html（input，textarea等）控制器的值。通俗的说，就是ng-model=“变量”指令指定的变量的值，会和页面中其它用到该变量的地方同步。

调用script文件中的数据：

script代码：定义了name变量的值。

　　　　　　　var app=angular.module("myApp",[]);
            app.controller("myCtrl",function($scope){
                $scope.name="benxiaohai";
            });

html代码：直接通过ng-model将变量值传给元素。

　　　　　　　<div ng-app="myApp" ng-controller="myCtrl" >
                姓名：<input ng-model="name" />
            </div>

通过ng-model实现数据的双向绑定：

　　　　<p>双向绑定：
            <div ng-app="myApp" ng-controller="myCtrl" >
                姓名：<input ng-model="name" />
                <p>您输入的姓名是：{{name}}</p>
            </div>
        </p>

通过ng-model实现输入数据的验证：

　　　　<p>验证用户输入:model 指定验证内容为用户输入的text。
            <form ng-app="" name="myForm">
                Email:
                <input type="email" name="address" ng-model="text"/>
                <span ng-show="myForm.address.$error.email">这不是一个合法的邮箱地址。</span>
            </form>
        </p>

通过ng-model获取应用状态：

　　　　<p>应用状态
            <div ng-app="" name="myForm" ng-init="myText=‘[email protected]‘">
                细心，字符串一定记得用引号，否则程序会发生异常
                Email:
                <input type="email" name="myAddress" ng-model="myText" required/>
                <h1>状态</h1>
                <p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
                <p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
                <p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
            </div>
        </p>

通过ng-model使用对应的css类：

　　　　<p>css类:当不合法时输入框为水蓝色，输入状态不同颜色不同，这是因为给不同的类定义了不同的样式。
            <form ng-app="" name="myForm">
                <input name="email" ng-model="text" required/>
            </form>
        </p>