美文网首页
Note:angularJS

Note:angularJS

作者: zydragon | 来源:发表于2017-01-05 12:34 被阅读0次

    module

    • angularJS--模块化编程 可以调用 .config .run .controller .filter .directive .factory 每一块都可以设置配置项,run(内部 http一些服务),控制器,过滤器,自定义指令,自定义服务
    • 执行顺序:config->run->controller

    controller

    filter 过滤器

    • limitTo
    • orderBy
    • data
    • currency

    config

    • 运行angular之前想要配置一些什么东西 都可以写在config里面(最先执行)

    服务

    • $http

    • 如何自定义一个服务
      factory("abc",function(){
      return {name:"fuwu-abc"}
      })

      angular.module("myapp",[],factory("abc",function(){
          return {name:"fuwu-abc"}
      }).controller("ctrl",function(abc){
          console.log(abc.name)
      })
      

    ngRoute

    bower install angular-route
    angular.module("myapp",["ngRoute"]).config(function($routeProvider){
        $routeProvider.when("/aa",{
              templateUrl:"./views/phone.html"
        })
    })
    

    ng-view 单页面应用 实现页面之间过渡的一个动画


    指令

    • 自定义指令
      <div abc>组件/123456</div>//有四种指定指令的方式:类,注释,标签(不常用有兼容性问题)组件:只需要放个指令就可以实现一些功能模块
      angular.module("myapp",[]).directive("abc",function(){
      return{
      restrict:"ECMA",//元素 class 注释 属性
      template:"<div>div</div>",//模版,可能要替换的东西会比较复杂,那我们用一个外部文件去替换templateUrl:"demo.html" 这里运用了ajax请求 ajax不能跨域,解决方法:1.jsonp 2. 代理
      replace:true,//如果替换要求文件内只有一个根元素----不常用
      transclude:true,//保留原来div内的内容 内容放置的位置可以在要放的标签上加ng-transclude
      scope:{},//每一个指令都是独立的 scope:true/false = @ &(可以获取到标签上menu="123"的值 123)
      link:function(a,b,c){ //($scope)这个字段可以使指令独立 不受外部控制器的影响,通过link函数定义自己的控制器,控制器可以嵌套,数据就近访问
      a.abc="指令的scope"

               }
           }
      })
      

    angular 路由的原理

    • 统一域名下a页面访问b页面的东西,a->b 用ajax 在地址栏留不下任何记录但是搜索引擎不友好(本质也是爬虫)不能前进后退
    • 如果想要利用ajax获取到页面的内容,还能在地址栏上留下记录
      var url=location.href;
      if(url.indexOf){}
    • angular 路由
      • ng-view 所有ajax获取到的内容放在ng-view的标签下
      • ngRoute 提供的一个服务 $routeProvider, when()
        angular.module("myapp",["ngRoute"])
        .config(function($routeProvider){
        $routeProvider.when("/",{
        templateUrl:"demo1.html"
        }).when("/list:id",{
        templateUrl:"list.html",
        controller:"list"
        })
        }).controller("list",function($scope,$routeParams){
        $scope.id=$routeParams.id
        })

    动画模块 ngAnimate

    • 命令行安装 bower install angular-ngAnimate
      1. bower 下载路由 引入到页面当中
      2. 将路由提供的模块依赖到主模块中 ngRoute
      3. 配置路由 在主文件当中配置路由
      4. config $routeProvider服务
      5. $routeProvider.when("路径",{templateUrl:"文件路径"})

    相关文章

      网友评论

          本文标题:Note:angularJS

          本文链接:https://www.haomeiwen.com/subject/gnqzvttx.html