流行框架

简介

• 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框架

• 获取方式

  • 在官网上下载 http://angularjs.org
  • 通过CDN的方式引入到页面中
    <script src="
  • 复选框，ng-model用来获取复选框的值，是一个布尔值
• ng-bind="数据"，将msg放到属性中进行加载，避免出现闪烁效果

事件指令

请求数据

• 要请求数据需要先引入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本身提供的方法不多,大多数的任务都是由插件完成的