一款优秀的前端JS框架—AngularJS

时间 2019-11-30

原文原文链接

前言html

AngularJS 是一个 JavaScript 框架。它可经过 <script> 标签添加到 HTML 页面。ajax

AngularJS 经过指令扩展了 HTML，且经过表达式绑定数据到 HTML。数据库

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。数组

AngularJS 是以一个 JavaScript 文件形式发布的，可经过 script 标签添加到网页中。安全

AngularJS中的指令和表达式

AngularJS 经过指令扩展了 HTML，且经过表达式绑定数据到 HTML。服务器

【AngularJS表达式】app

一、AngularJS使用{{}}绑定表达式。用于将表达式的内容输出到页面中。
二、表达式中能够是文字、运算符、变量等，也能够在表达式中进行运算输出结果。框架

eg: <p>{{5+5+"Angular"}}</p>

若是Angular.js文件放在页面下方，在页面刷新的瞬间会看到{{}}表达式的原样，因此可使用ng-bind指令代替表达式。ide

eg: 上式可改写为： <p ng-bind="5+5+'Angular'"></p>

【AngularJS指令】函数

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
一、ng-app:声明AngularJS所管辖的区域。通常写在body或者html标签上，原则上一个页面只能有一个。

eg: <body ng-app=""></body>

二、ng-model 指令把元素值（好比输入域的值）绑定到应用程序的变量中。

eg: <input type="text" ng-model="name"/>

三、ng-bind:把应运程序变量中的值，输出到页面HTML视图中，能够与表达式{{}}互相替换。

eg:<div ng-bind="name"></div>

四、ng-init: 指令初始化AngularJS应用程序中的变量值。

eg: <body ng-app="" ng-init="name='ddd'">

应用程序初始化时，name变量就附有初值。

AngularJS中的MVC与做用域

【MVC三层框架】
一、Model(模型层):应用程序中用于处理数据的部分，(包括将数据保存或者修改到数据库、变量、文件中)
在AngularJS中，Model特指的是：应用程序中的各类数据。

View(视图层):用户能够看到的，用于显示数据的页面。

Controller(控制器):控制器是链接View和Model的桥梁，负责从View读取数据，接收用户的操做输入；并将数据发送给Model层。Model层对数据处理完毕后，将结果返回给Controller,Controller再将结果返回给View层显示。

它们三者之间的关系能够用下列图片表示：

<body ng-app="myApp">
        <input type="text" ng-model="age" placeholder="age" />
        
        <div ng-controller="myCtrl">
            <input type="text" ng-model="name" placeholder="name" />
            <div ng-bind="name+'----myCtrl的name'"></div>
            <div ng-bind="age+'----myCtrl的age'"></div>
        </div>
        
        <div ng-controller="myCtrl1">
            <div ng-bind="name+'----myCtrl1的name'"></div>
            <div ng-bind="age+'----myCtrl1的age'"></div>
            
        </div>
        
        <div ng-bind="name+'----全局的name'"></div>
        <div ng-bind="age+'----全局的age'"></div>
    </body>

建立一个angular的模块。即ng-app="所须要绑定的部分"。
须要接受两个参数：
1)模块名称，即ng-app双引号中须要绑定的名字。<body ng-app="myApp">
2)数组。表示须要注入模块名称，不须要注入其余模块可用空数组代替。
>>>angular将经常使用的功能分装到angular.js,建立主模块时直接可使用，无需注入。
>>>而一些应用较少的功能，须要导入对用的JS文件，而且在[]中注入进这个模块，才可以使用。

var app=angular.module("myApp",[]);

在AngularJS的模块上，建立一个控制器，须要传递两个参数；
1)控制器名称，即ng-controller须要绑定的名称。
<div ng-controller="myCtrl">
2)控制器的构造函数，构造函数能够传入多个参数。
>>>若是要在函数中使用系统的内置对象，则必须经过函数的参数使用，不然不能使用。
>>>AngularJS中的内置对象，都用$开头，例如$scope,$rootScope

【AngularJS的做用域】
1)$scope:局部做用域，声明在$scope上的属性和方法。只能在当前controller使用；
2)$rootScope:根做用域。声明在$rootScope上的属性和方法，能够在整个ng-app所包含的范围使用。
>>>若是没有使用$scope声明变量，而是直接使用ng-model在HTML标签中绑定的数据的做用域为：
一、若是ng-model写在某个Controller中，则这个变量会默认绑定到当前Controller的$scope上；
二、若是ng-model没有写在任何一个Controller中，则这个变量会默认绑定到当前Controller的$rootScope上:

>>>AngularJS中的父子做用域：
一、AngularJS中，子做用域只能访问父做用域中的变量，而不能修改父做用域的变量；
二、为了解决上述问题，能够将父做用域中的变量声明为引用数据类型，例如对象等。这样能够在子做用域中，直接修改对象的属性，而不须要修改对象自己保存的地址。

eg:详见"myCtrl1"

AngularJS中的过滤器

[AngularJS中过滤器]
过滤器可使用一个管道字符（|）添加到表达式和指令中。

>>>系统内置的过滤器
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

/* 自定义过滤器*/
        .filter("showHello",function(){
            return function(text){
                return "hello AngularJS";
            }
        })

自定义过滤器，同时须要传递过滤参数

 调用过滤器示例： <p>{{12345678912|hideTel：5}}</p>
/*传入的参数5，将被过滤函数的num形参所接受。*/

自定义过滤器，实现根据姓名筛选数据的功能.
>>>调用示例：

请输入姓名：<input type="text" ng-model="name" />
<tr ng-repeat="item in classes | filter:filterByname">

AngularJS中的服务service

一、内置服务:
>>>要使用服务，必需要把服务经过controller的构造函数的参数注入进来！！！
>>>系统内置的服务，统一使用$开头，服务中的属性和方法统一使用$$开头！！！自定义服务时，需注意与系统服务的写法区分开;
$location:返回当前界面的URL地址信息，第一个对象;
$http:向服务器发送请求,相似于jQuery中的ajax;
$timeout:至关于setTimeout();
$interval:至关于setInterval();

angular.module("app",[])
        .controller("ctrl",function($scope,$location,$timeout,$interval,hexafy){
            $scope.local = $location.$$host;
            $timeout(function(){
                $scope.time = "我在两秒以后出现！！！";
            },2000);
            
            $scope.num = 0;
            $interval(function(){
                $scope.num ++;
            },1000);
            
            
            $scope.gongneng = hexafy.gongneng;
            $scope.num1 = hexafy.func(10);
        })

自定义服务
第一个参数是服务名
第二个参数是自定义服务的构造函数。咱们自定义的服务，本质是一个对象。
对象的属性，能够在构造函数中，使用this.属性表示;
对象的方法，能够在构造函数中，使用this.方法表示;

.service("hexafy",function(){
            this.gongneng = "将十进制数转化为十六进制";
            this.func = function(num){
                return num.toString(16);    
            }
        })

使用过滤器实现一样功能

.filter("filter1",function(){
            return function(num){
                return num.toString(16);
            }
        })

在过滤器中调用服务
也必须在声明过滤器的外层构造函数中，注入服务名称！！！

.filter("filter2",function(hexafy,$location){
            return function(num){
                return hexafy.func(num);
            }
        })

AngularJS中的服务Factory

factory服务在使用上与service服务没有太大差距。
惟一的不一样点是，声明服务时，factory服务是在函数中先声明好一个对象，而后使用return将对象返回。
而service服务，则是直接在函数中使用this将属性和方法添加到对象上。

angular.module("app",[])
        .controller("ctrl",function($scope,hexafy){
            $scope.gongneng = hexafy.gongneng;
            $scope.num1 = hexafy.func(10);
        })
        .factory("hexafy",function(){
            var obj={
                gongneng : "将十进制数转化为十六进制";
                func = function(num){
                return num.toString(16);    
            }
            }
            return obj;
        })
        .service("hexafy",function(){
            this.shuxing="shuxing";
            this.func=function(){}
        })

AngularJS中的服务provider

一、在AngularJS中，service服务、factory服务都是基于provider服务实现的；
二、在定义provider时，可使用this.$get方法，接收一个函数，函数里面采用与factory
彻底相同的写法！！！

.provider("hexafy",function(){
            this.$get=function(){
                var obj={
                    gongneng:"333";
                }
                return obj;
            }
        })

三、在三种服务中,provider服务是惟一一个能够写进config配置阶段的服务。
因此说，若是服务须要在配置阶段，也就是在声明controller以前执行的话，则可使用provider.
不然通常使用service或者factory。

angular.module("app",[])

.config()表示配置阶段，在声明controller以前执行。能够用于声明一些在controller中须要
使用的全局变量、方法、服务等

.config(function($provider){
            //在配置阶段声明provider服务，须要在config中注入系统对象$provider
            $provide.provider("hexafy",function(){
                this.$get=function(){
                var obj={
                    gongneng:"444";
                }
                return obj;
            });
        })
        .controller("ctrl",function($scope,hexafy){
            $scope.gongneng=hexafy.gongneng;
            
        })

AngularJS中的select和表格

使用数组做为数据源
一、item表示数组中的每一项！
二、循环出的option中，value的值，默认为item
三、option显示出的内容(<option></option>标签中的文字)是由item.site for决定的！

<select ng-model="site" ng-options="item.site for item in sites"></select>

这种写法，默认生成的option效果以下：

<option value='{site : "Google", url : "http://www.google.com"}'>Google</option>

以对象做为数据源
一、 (key,value) 第一项表示对象的键，第二项表示对象的值；
二、 option的value，永远都是对象的值！
三、 option显示出的内容(<option></option>标签中的文字)是由...for 决定的！也就是说 for前面是什么，option标签中就是什么。

<select ng-model="site3" ng-options="key for (key,value) in sitess">
<!--
<option value=" value "> key/value(取决于for前面的内容) </option>
-->

【ng-options 和 ng-repeat】

g-options使用时，是将指令添加在select上；
ng-repeat使用时，试讲指令添加在option上；

二、 ng-options使用时，必须同步给select标签绑定ng-model；
ng-repeat使用时，不必定须要绑定ng-model

三、 ng-options使用时，咱们只须要关心for前面的部分，即option标签中显示的文字；而option的value会自动分配，不禁咱们决定。 (使用数组做为数据源是，value就是数组的每一项；使用对象做为数据源是，value永远都是对象的值)
ng-repeat使用，除了要指定option标签中显示的文字，还须要手动指定value中的内容，若是没有指定则默认没有value；

AngularJS中的DOM与事件

ng-disabled="true/false";
传入true表示禁用，传入false表示可用。

<button ng-disabled="!myCheck">按钮</button>
        <lable>
            <input type="checkbox" ng-model="myCheck" />是否赞成
        </lable>
<p>{{myCheck}}</p>

ng-show:是否显示
传入true表示显示，传入false表示隐藏。

<lable>
            <input type="checkbox" ng-model="myShow" />是否显示
        </lable>
        <p ng-show="myShow">我显示出来了</p>

ng-hide:是否隐藏

<lable>
            <input type="checkbox" ng-model="myHide" />是否隐藏
        </lable>
        <p ng-hide="myHide">我显示出来了</p>

ng-if:是否移除元素。
当传入true显示。传入false时移除。
效果与ng-show相同，可是ng-show和ng-hide只是隐藏元素，而ng-if是将元素从DOM中直接移除！！

<label>
            <input type="checkbox" ng-model="myIf" />是否移除？
        </label>
        <p ng-if="!myIf">我显示出来啦！！！</p>

ng-bind-html : 至关于innerHTML
而ng-bind 至关于 innerText

注意，要使用ng-bind-html，必须导入angular-sanitize.js文件进行安全验证。同时须要在声明模块的时候，在数组中注入安全验证模块'ngSanitize'

<div ng-bind-html="html"></div>

ng-checked 设置复选框或单选框的选中状态。
传入true设置当前复选框被选中。

<input type="checkbox" ng-model="all"> Check all<br><br>
<input type="checkbox" ng-checked="all">Volvo<br>
<input type="checkbox" ng-checked="all">Ford<br>
<input type="checkbox" ng-checked="all">Mercedes

ng-class: 用于设置给元素添加class类。
可选值有如下几种状况：
① 能够是字符串。表示直接给元素添加对应的class。多个class之间，用空格分隔
② 能够是对象。对象的键表示class名字，对象的值为true或false，当值为true时表示添加对应的class
③ 能够是数组。数组中的值能够是字符串或对象，判断规则同上。

<div ng-class="'div div2'">这是一个div</div>
        <label>
            <input type="checkbox" ng-model="myClass" />给div添加样式？
        </label>
        <div ng-class="{'div':myClass,'div1':!myClass}">这是一个div</div>
        <div ng-class="[{'div':myClass,'div1':!myClass},'div3']">这是一个div</div>

ng-switch 根据变量的值，选择不一样的ng-switch-when来显示。当没有合适的选项时，显示ng-switch-default.

我喜欢的网站
        <select ng-model="myVar">
          <option value="aaaa">切回默认状态！
          <option value="runoob">www.runoob.com
          <option value="google">www.google.com
          <option value="taobao">www.taobao.com
        </select>
        <hr>
        <div ng-switch="myVar">
          <div ng-switch-when="runoob">
             <h1>菜鸟教程</h1>
             <p>欢迎访问菜鸟教程</p>
          </div>
          <div ng-switch-when="google">
             <h1>Google</h1>
             <p>欢迎访问Google</p>
          </div>
          <div ng-switch-when="taobao">
             <h1>淘宝</h1>
             <p>欢迎访问淘宝</p>
          </div>
          <div ng-switch-default>
             <h1>切换</h1>
             <p>选择不一样选项显示对应的值。</p>
          </div>
        </div>

AngularJS 中的事件：
AngularJS中的事件只能触发绑定在AngularJS做用域上面的属性和方法。

<button ng-click="func()">点我弹个窗</button>
<button ng-mouseover="">点我弹个窗</button>
<button ng-mouseout="">点我弹个窗</button>
<input type="text" ng-keydown="keyDown()">
<input type="text" ng-foucus=""> <!--得到焦点-->
<input type="text" ng-blur=""><!--丢失焦点-->
<input type="text" ng-change=""><!--内容被改变-->

AngularJS中的表单和输入验证

一、表单中，经常使用的验证操做：
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
$error 表单验证不经过的错误信息

二、验证时，必须给form和inpt，设置name属性。
给form和input设置了name后，会自动将表单信息绑定到$scope做用域中。因此，能够直接使用formName.inputName.$验证操做获得验证结果。
例如：

formName.inputName.$dirty = "true"; //表示表单被填写过！
formName.inputName.$invalid = "true"; //表示表单输入内容不合法！
formName.inputName.$error.required = "true"; //表示设置了必填，可是没有输入

注意：
$error支持的验证：
required/minlength/maxlength/partten/eamil/number/date/url等。。。

三、为了不AngularJS的验证与HTML5的表单验证冲突！！好比说 type="email" required等,H5也会进行验证，那么能够给form添加“novalidate”属性，禁用HTML5的验证功能

AngularJS中的动画

在AngularJS中使用动画：
一、导入angular-animate.js
二、若是页面中没有自定义的app模块，则能够直接绑定系统模块ng-app="ngAnimate"
若是页面中有自定义的app模块，则能够在自定义模块的数组中，注入ngAnimate。
angular.module
三、当使用ng-show、ng-hide显示或者隐藏元素的时候，系统会自动添加或者移除，ng-hide这个class类。
四、当使用ng-if/ng-switch/ng-repeat等其余指令，须要分别设置显示后和隐藏后的两种class样式；
显示后的class： .ng-enter-active,.ng-leave{}
显示后的class： .ng-enter,.ng-leave-active{}

<input type="checkbox" ng-model="myCheck" />隐藏div
<div class="div" ng-hide="myCheck">这是一个div</div>
        
<input type="checkbox" ng-model="myIf" />移除div
<div class="div" ng-if="myIf">这是一个div</div>