初识AngularJs

转载于 2020-07-26 14:17:58 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog_h2a2j2ik2jaa.html

前端专栏收录该内容

844 篇文章

订阅专栏

本文深入解析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>

指令用来循环生成元素：注意ng-repeat="x in names",这里的x可以任意命名，但是后文引用时需要同名。比如：<li ng-repeat="item in names">{{item}} </li>

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

自定义指令：可通过restrict来限制指令的使用范围，E,元素名；C，类名；A，属性名；M，注释。默认值为EA。

script文件中定义：

　　　　　　var app=angular.module("zdyApp",[]);
            app.directive("zdytag",function(){
                return{
　　　　　　　　　　　 restrict:"E";
                    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='123@163.com'">
                细心，字符串一定记得用引号，否则程序会发生异常
                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类：不合法时元素样式改变。这里的ng-invalid是可以直接使用而不用在html文档中命名的。

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>

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

4，angular作用域

scope是应用在html和JavaScript之间的纽带，也就是说是视图和控制器之间的纽带，它是一个对象有可用的方法和属性，可以应用在视图和控制器上。我们在使用angular创建控制器时可以将$scope对象当做参数传递，在视图中我们就可以调用该对象的属性和方法。（或者说值）或者换一种说法，就是当你在控制器里面添加scope对象时，视图可以获取这些属性。

它是模型，是一个JavaScript对象，带有属性和方法，这些属性和方法可以在视图和控制器中调用。

html代码：

<div ng-app="scopeTest" ng-controller="scopeCtrl">
	<p>{{name}}</p>
</div>

script代码：

<script>
	var app=angular.module('scopeTest',[]); 
	app.controller('scopeCtrl',function($scope){
		$scope.name="我是通过$scope对象定义的值，通过名称传到视图上。";
	})
</script>

在大型项目中scope会有作用范围，可能会有多个$scope，可以通过$rootscope调用根作用域。它是连接应用中各个控制器的纽带。使用$rootscope定义的值，可以在所有控制器中调用。