Note：angularJS

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:"文件路径"})