AngularJS简述

盛行框架

简介

  • angularjs是一款异常优异的前端高等JS框架,由谷歌团队开辟保护,能够疾速构建单页web运用,化繁为简
  • 无论是angularjs照样jQuery都是用原生JS封装的
  • 库:对代码举行封装,挪用封装的要领,简化操纵
  • 传统体式格局是用get体式格局猎取元素,然后点要领
  • jQuery库完成了对猎取体式格局的封装,对要领的封装
  • 框架:供应代码誊写划定规矩,依据划定规矩去写代码,框架会帮我们完成相应的功用
  • 中间:经由过程指令扩大HTML功用,经由过程插值表达式绑定数据到HTML,不推荐在掌握器中直接操纵DOM,而是经由过程指令操纵,以数据为中间,用数据驱动DOM
  • 版本:

    • 现在angularjs框架的版本是1.6.x
    • angularjs框架09年降生,专注PCweb,并没有考虑到挪动端,在挪动端机能较差
    • angular2框架在16年降生
    • angular2并非angularjs的升级版,而是一个全新的框架
    • 2016年国内已形成了angularjs,vue,react鼎足之势的形势,angular2占有的市场份额依然比较小
    • 企业内里用的比较多的依然是angularjs框架
  • 猎取体式格局

插值

  • {{}}这类双大括号的情势称之为插值表达式
  • 能够写ng中的变量
  • 能够显现字符串
  • 能够在表达式中能够举行盘算
  • 能够在表达式中写三目运算符
  • 能够挪用函数
  • 实行angularjs函数
  • 不能写if else语句

      <div>{{val}}</div>
      <div>{{'angularjs'+'很好很壮大'}}</div>
      <div>{{1+1}}</div>
      <div>{{1==1?'相称':'不相称'}}</div>
      <div>{{getItem()}}</div>

基础指令

  • 在运用了angularjs的页面,以ng-开首的属性,称之为指令

    <body ng-app></body>
    <input type="text" ng-model="val" ng-init="val">
  • ng-app

    • 页面加载完成今后angularjs会在页面中查找这个指令
    • 没有找到这个指令,angularjs将不会启动
    • 找到这个指令,angularjs将会实行指令地点标签内部包裹的代码
    • 能够吸收模块名字作为参数 angularjs会将当前页面交给指令所指定的模块去管
  • ng-model=”变量”

    • 猎取表单元素的值,完成双向数据绑定
  • ng-click=” “

    • 给指令地点元素绑定点击事宜,不能写原生js代码
  • ng-init

    • 初始化数据

模块化

  • 模块化开辟带来的优点:轻易治理,复用,后期保护轻易
  • 处置惩罚代码争执,轻易多人合作开辟
  • angularjs中模块的品种:进口模块、功用模块
  • 定义模块时第二个参数加与不加的区分:加第二个参数是竖立模块,不加第二个参数是猎取模块
  • 模块化四步

    • 竖立模块,myApp是模块的名字,module要领,数组中要依托的模块的名字,用逗号衔接。没有要依托的文件的话,传空数组。

          <script>
              var app=angular.module('myApp',[]);
          </script>
    • ng-app背面写模块的名字,关照angularjs当前的页面由自身竖立的myApp模块去治理

          <body ng-app="myApp"></body>
    • 竖立掌握器,竖立模块的语句的返回值就是一个模块对象,用这个对象去点要领,就是竖立掌握器

          <script>
              app.controller('demoCtrlA',function(){
                  alert(1)
              });
                app.controller('demoCtrlB',function(){
                  alert(2)
              });
          </script>
    • 关照angularjs当前地区由这个掌握器去掌握

          <div class="sideBar" ng-controller="demoCtrlA"></div>
          <div class="main" ng-controller="demoCtrlB"></div>
    • 兄弟掌握器设置雷同的属性,不会争执

双向数据绑定

  • 双向:html和js
  • 数据:angularjs中的变量
  • body标签中的ng-app示意当前页面由myApp治理,ng-controller示意当前地区由demoCtrl这个掌握器掌握
  • input标签中的ng-model示意猎取表单元素的值
  • div标签中显现这个值
  • 两个按钮离别注册点击事宜,一个设置值一个猎取值
  • 在掌握器中封装两个函数

      <body ng-app="myApp" ng-controller="demoCtrl">
          <input type="text" ng-model="val">
            <div>{{val}}</div>
            <button ng-click="setValue()">设置值</button>
            <button ng-click="getValue()">猎取值</button>
            <script src="node_modules/angular/angular.min.js"></script>
            <script>
                var app=angular.module('myApp',[]);
                app.controller('demoCtrl',function($scope){
                  $scope.val="我是初始值";
                    $scope.setValue=function(){
                      $scope.val="我是经由过程setValue要领变动的值"
                  }
                  $scope.getValue=function(){
                      alert($scope.val)
                  }
              })
            </script>
      </body>

路由

  • 路由就是用来设置页面之间的跳转关联的,设置锚点与页面之间的对应关联
  • 在angularjs中路由并没有集成在angular.js文件中
  • 路由作为一个零丁的模块存在,假如要运用路由,我们须要将路由模块作为主模块的依托模块
  • 主模块或进口模块 == 治理页面的谁人模块
  • angularjs中模块依托的步骤:将要依托的模块文件引入到页面中,将模块的名字写在主模块的第二个参数中
  • $routeProvider路由设置对象,名字临时不能改
  • angularjs会将猎取到的模板文件内容放在页面中有ng-view指令的元素中
  • angularjs要求,锚点值必需以/开首,在路由设置中使不须要写#号
  • 当我们运用了路由今后,就不须要直接在页面中写ng-controller指令
  • 传参

    • 在被通报参数页面(详情页)的路由中设置参数占位符,类似于函数的形参
    • 在通报参数页面(列表页)的跳转链接中将现实的参数通报过去
    • 在被通报参数页面(详情页)的掌握器中猎取通报过来的参数
    • 通报多个参数,直接接在背面写,只要和背面逐一对应起来就可以够

          <ul>
                <li><a href="#!/article/1/我是第1篇文章">我是第1篇文章</a></li>
                <li><a href="#!/article/2/我是第2篇文章">我是第2篇文章</a></li>
                <li><a href="#!/article/3/我是第3篇文章">我是第3篇文章</a></li>
          </ul>
          <script>
              var app=angular.module('myApp',['ngRoute'])
              app.config(function($routeProvider){
                  $routeProvider
                      .when('/article/:id/:title',{
                          templateUrl:'articleTpl',
                            controller:'articleCtrl'
                      })
              });
          </script>

单页web运用

  • 单页面运用程序的特性:全部网站由一个页面组成,群众部份只加载一次,应用Ajax部分革新到达页面切换的目标,不会发作页面跳转白屏的征象,锚点与页面对应
  • 单页web运用的运用场景:单页面运用对搜刮引擎不友好,不适合做面向群众的展现型网站,网站背景治理体系、办公OA、夹杂App等等不须要被搜刮引擎搜刮到的运用

      <script src="node_modules/angular/angular.min.js"></script>
      <script src="node_modules/angular-route/angular-route.min.js"></script>
      <body ng-app="myApp">
          <a href="#!/index">首页</a>
            <a href="#!/list">列表页</a>
            <div ng-view></div>
      </body>
      <script>
          var app=angular.module('myApp',['ngRoute'])
          app.config(function($routeProvider){
              $routeProvider
                  .when('/index',{
                      templateUrl:'./tpl/index.html',
                        controller:'indexCtrl'
                  })
                    .when('/list',{
                      templateUrl:'./tpl/list.html',
                        controller:'listCtrl'
                  })
                    .otherwise('/index')
          });
            app.controller('indexCtrl',function($scope){
              $scope.msg="我是首页msg"
          })
            app.controller('listCtrl',function($scope){
              $scope.msg="我是列表页msg"
          })
      </script>  

三种模板体式格局

<script>
    templateUrl:'./tpl/index.html'//localhost
      template:'<div>我是首页</div>'//file|localhosst
      template:'indexTpl'//file|localhosst
</script>

$scope

  • 能够通报的参数有许多,不须要逐一写出来
  • angularjs中通报参数不能依托递次而是名字
  • 假如形参名字转变了,angularjs就不晓得要干什么了
  • 处置惩罚要领:第二个参数写数组,回调函数放到数组中
  • 紧缩的时刻,不会对字符串举行紧缩,所以数组中通报字符串来肯定参数的递次

      <script>
          angular.module("myApp",[]).controller("demoCtrl",["$scope","$timeout","$http","$location",function(a,b,c,d){
              a.msg="我是msg"
          }])
      </script>

作用域

  • 作用域就近准绳
  • angularjs中掌握器掌握的地区就是一个部分作用域,
  • 也就是$scope代表部分作用域
  • $rootScope代表全局作用域
  • 变量先顺着$scope找,找不到就去全局找
  • 能够挂载群众属性要领

遍历

  • ng-repeat=”轮回过程当中确当前项 in 数据”轮回数据并天生当前DOM元素

      <ul>
          <li ng-repeat="item in arr">{{item}}</li>
      </ul>
  • 遍历数组对象,能够嵌套,有ng-repeat的标签中还能够嵌套ng-repeat的标签

      <ul>
          <li ng-repeat="person in person">
                {{person.name}}{{person.age}}
                <span ng-repeat="item in person.hobby">{{item}}</span>
            </li> 
      </ul>
  • 数组项反复,会报错

      <ul>
          <li ng-repeat="item in arr track by $index">{{item}}</li>
      </ul>

其他指令

  • ng-class=”{‘类名1′:布尔值,’类名2’:布尔值}”特地用来增加或许删除类名,吸收的值是一个对象,布尔值为真,增加类名,布尔值为假,删除类名
  • 复选框,ng-model用来猎取复选框的值,是一个布尔值
  • ng-bind=”数据”,将msg放到属性中举行加载,防止涌现闪灼结果
  • ng-bind-template=”{{数据1}} {{数据2}}”
  • ng-non-bindable直接获得插值表达式中的内容,只要与属性相干,都不实行
  • ng-show=”布尔值”,掌握元素的显现和隐蔽
  • ng-hide=”布尔值”,掌握元素的显现和隐蔽
  • ng-if=”布尔值”,掌握元素的显现和隐蔽 true 显现 false 隐蔽
  • ng-switch&ng-switch-when用法和switch-case类似
  • 事宜指令

    • onclick => ng-click
    • onmouseenter => ng-mouseenter
    • onchange => ng-change
    • ng-dblclick 双击事宜
  • ng-src没有src就不会剖析就不会报错,直到angularjs加载完成,剖析ng-src以后再天生src
  • ng-href同上
  • ng-options用来轮回下拉列表,不能零丁运用,须要合营ng-model一同运用

要求数据

  • 要要求数据须要先引入js文件
  • 引入的js文件作为依托文件,掌握器中必需写入$http
  • $http–>要求的地点,相当于jQuery中的ajax
  • method–>type要求的体式格局
  • params–>data只用于get传参
  • data能够用于post传参
  • $http点then背面是两个回调函数
  • 第一个回调函数是胜利回调
  • 第二个回调函数是失利回调
  • res是形参,示意要求返来的数据

      <script src="node_modules/angular/angular.js"></script>
      <script src="node_modules/angular-sanitize.min.js"></script>
      <script>
          angular.module('myApp',['ngSanitize'])
                .controller('demoCtrl',['$scope','$http',function($scope,$http){
                  $http({
                      url:'./test.json',
                        method:'post',//要求体式格局
                        params:{//get传参
                            a:1,
                          b:2
                        },
                        data:{
                            c:3,
                          d:4
                        }
                  }).then(function(res){
                        //胜利回调
                      console.log(res)
                  },function(){
                      //失利回调
                  })
                    //别的一种写法
                    $http.get('./test.json',{params:{a:1,b:2}}).then(function(res){
                        //get体式格局传参
                      console.log(res)
                  })
                    $http.post('./test.json',{c:3,d:4}.then(function(res){
                        //post体式格局传参
                      console.log(res)
                  })
              }])
      </script>

jqLite

  • 为了轻易DOM操纵,angularjs供应了一个jQuery精简版,叫做jqLite
  • $(原生的JS对象)将原生JS对象转换成jQuery对象,目标是为了运用jQuery对象下面供应的要领
  • angularjs.element(原生JS对象)将原生JS对象转换成jqLite对象,目标是为了运用jqLite对象下面供应的要领
  • 这里angularjs.element相当于jQuery中的$
  • jqLite中要领的运用和jQuery高度类似

$watch

  • $watch用来监控数据的变化
  • 第一个参数是要监控的数据,第二个参数是回调函数
  • 回调函数中第一个参数newValue是用户输入的最新内容,第二个参数oldValue是上一次用户输入的内容
  • 页面一上来的时刻,回调函数会先实行一次

      <script>
          $scope.$watch('val',function(newValue,oldValue){
              if(newValue.length>10){
                  $scope.tips="大于10";
              }else{
                  $scope.tips="小于10"
              }
          })
      </script>

$apply

  • 当经由过程原生JS将angularjs中的数据做了转变今后,angularjs不晓得,所以须要挪用$apply()要领关照angularjs更新html页面

自定义指令

  • return中是对DOM操纵的全部内容
  • templateUrl或许运用template引入模板
  • replace将自定义指令标签自身删掉,只显现模板的内容
  • transclude将自定义标签内部的内容保存,合营ng-transclude指令运用,模板中span标签运用了ng-transclude,所以自定义标签内部的内容会显现在span标签
  • 假如自定义指令中的内容是用标签包裹的,会被剖析出来

    <script>
        angular.module('myApp',[])
              .directive('myHeader',[function(){
                return {
                    templateUrl:'myHeaderTpl',
                      replace:true,
                      transclude:true
                }
            }])
    </script>
  • return中link是angularjs供应的特地写DOM操纵的处所
  • link中的函数有三个参数

    • scope向指令的模板地区暴露数据
    • element是指令地点的元素,是jqLite对象,能够直接运用jqLite要领
    • attributes是元素身上属性的鸠合,假如有多个元素须要制订,用attribute
    • css中内容不能写死,attribute是一个属性鸠合,attributes.myDir点出属性
    • return中有scope,默许是false,这时候,link中的scope就是掌握器中的$scope,假如将scope设置成turn,指令就有了零丁的作用域

        <script>
            angular.module('myApp',[])
                  .directive('myDir',[function(){
                    return {
                        link:function(scope,element,attributes){
                            element.css('background','red')
                              element.css('background',attributes.myDir)
                        }
                    }
                }])
        </script>
  • 分类

    • 标签指令element E
    • 属性指令attributes A
    • 款式指令class C
    • 解释指令comment M
    • return中能够用restrict设置

MVC&MVVN

  • MVC后端头脑

    • model模子,跟操纵数据相干的要领,用angularjs中的效劳来完成
    • view视图,用户界面
    • controller掌握器,重要用来写一些营业逻辑
  • MVVN

    • model模子,跟操纵数据相干的要领
    • view视图,用户界面
    • viewmodel在双向数据绑定的框架中,$scope帮我们同步HTML页面
    • angularjs是基于MVVM头脑的框架
  • 过滤器

    • 过滤器:将数据花样化成我们想要的形式
    • {{ 数据模子 | 过滤器的名字:过滤器的参数:多个参数以冒号离隔 }}
    • 内置过滤器

      • currency,钱银过滤器,传参示意前边的标记
      • date,日期过滤器,传参能够转变date的时候情势,能够用短横支解,也能够写汉字
      • filter,将数据依据某种划定规矩举行过滤,隐约过滤(去数据中每个字段中查找)和准确过滤(去数据中指定的字段中查找)
      • limitTo,限定,第一个参数limit 限定的数目,能够为负数,从后往前最先限定,第二个参数begin,从第几个最先限定
      • orderBy,排序,orderBy:’字段’ 默许是升序,orderBy:’-字段’ 降序,依据age字段,升序分列
      • number,数字过滤器,传参示意保存几位小数
      • uppercase,大写
      • lowercase,小写
      • json将数据一个优越的花样展现到页面中,重要用于调试,要合营HTML页面中的pre双标签有一个参数用来掌握缩进
    • 自定义过滤器

      • 模块对象.filter(‘过滤器的名字’,[function() {return function(value){return 数据}}])
            <script>
                angular.module('myApp',[])
                      .filter('phonestar',[function(){
                        return function(value){
                            return value.substr(0,3)+'****'+value.substr(7)
                        }
                    }])
            </script>

效劳

  • 模块对象.service(‘效劳的名字’,[function(){this.name=”qwe”;alert(this.name)}])

ui-router

  • 路由模块的名字ui.router
  • 模块须要引入uirouter的依托文件
  • 用$stateProvider设置路由的对象
  • $urlRouterProvider设置没有匹配到路由时的默许跳转位置
  • url示意锚点值
  • template衬着模板
  • name是路由名字,必需存在

        <script>
            angular.module('myApp',['ui.router'])
        .config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
                        // $stateProvider 设置路由的对象
                        $stateProvider
                            .state({
                                url:'/index', // 锚点值
                                templateUrl:'indexTpl',
                                name:'index',
                                controller:'indexCtrl'
                            })
                            .state({
                                url:'/list', // 锚点值
                                templateUrl:'listTpl',
                                name:'list',
                                controller:'listCtrl'
                            })
                        // 当没有匹配到的路由时 默许跳转到首页
                        $urlRouterProvider.otherwise('/index');
                    }])
        
                    .controller('indexCtrl',['$scope',function($scope){
                        $scope.msg = "indexCtrl";
                    }])
        
                    .controller('listCtrl',['$scope',function($scope){
                        $scope.msg = "listCtrl";
                    }])
        </script>

gulp

  • gulp官网(英文)gulp官网(中文)
  • 观点:

    • 前端自动化流式构建东西
    • 我们能够运用gulp编写一些机械化的使命
    • 有用进步开辟效力 改良开辟体验
  • 申明

    • gulp这个东西依托node环境 所以在运用gulp之前须要装置node环境
    • 就像我们运用bootstrap要先引入jQuery是一个原理
    • 编写gulp使命运用JS语法
  • 下载gulp

    • npm install gulp
    • 在项目标根目录运转这个敕令,会自动天生一个node_modules文件夹 gulp会被下载到这个文件夹中。
    • node_modules文件夹中除了gulp之外,还会多出许多文件,这些都是gulp所要依托的文件。
  • 运用gulp编写使命

    • gulp要求我们在项目标根目录下新建一个gulpfile.js文件,这个文件是特地用来编写gulp使命的。
    • 就像运用angularjs框架须要引包一样,要运用gulp也须要引包

          // require('包名') 引包
          var gulp = require('gulp');
          // gulp变量是对象范例
          // 我们编写使命 处置惩罚使命须要用到gulp对象下面的要领
    • 编写人生中的第一个gulp使命

          // gulp.task('使命称号',使命回调函数) 竖立使命要领
          // 使命称号的用途:在实行使命的时刻须要指定使命称号
          // 回调函数:要做的事变须要写在回调函数中 比方less剖析 代码紧缩...
          gulp.task('first',function(){
              // gulp.src('文件途径') 猎取文件
              // 猎取使命要处置惩罚的文件
              gulp.src('./css/base.css')
                  // pipe('如何处置惩罚') 处置惩罚使命
                  // gulp.dest('文件途径') 将处置惩罚好的文件放入参数途径中
                  .pipe(gulp.dest('dist/css'))
          });
  • 实行使命

    • 使命编写在了gulpfile.js文件中,要实行使命,就须要运转这个JS文件,那末题目来了,我们之前编写的JS文件,都邑引入到HTML页面中,然后运转HTML文件,JS就可以实行了
    • 装置一个gulp-cli东西即可
    • 在敕令行中的恣意目录下实行下面的敕令
    • npm install gulp-cli -g
    • -g 代表全局装置 目标是在其他项目中也能够运用这个东西
    • 装置完成今后在项目标根目录下输入以下敕令就可以够实行使命了
    • gulp 使命称号
  • gulp中供应的要领

    • gulp.src() 猎取使命要处置惩罚的文件
    • gulp.dest() 输出文件
    • gulp.task() 竖立gulp使命
    • gulp.watch() 监控文件的变化
    • gulp自身供应的要领不多,大多数的使命都是由插件完成的
    原文作者:神膘护体小月半
    原文地址: https://segmentfault.com/a/1190000016117922
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞