angular瞎复习

因为公司有几个老的项目都是由我维护和优化的,那几个项目都是用到angular1.x的版本,所以最近也在复习angular一些旧的知识,可能理解的还不够.

$semit $broadcast $on

$semit 子传父 $broadcast父传子 和$on监听或接收数据
$semit 和 $broadcast 需要触发调用,$on可以直接使用

自定义指令

app.directive("hello",function () {
    return{
        restrict:"EA",   //这里固定大写常用的是EA,e就是标签,a就是属性
        template:"<h1>我就是hello</h1>",   //不加url就是片段,加url就是路径
        replace:true,   //是否替换
        scope:{
            
        }  //独立作用域
    }
});

自定义指令上的传递数据 @ = &

app.directive("hello",function () {
    return{
        restrict:"EA",   //这里固定大写常用的是EA,e就是标签,a就是属性
        template:"<h1>我就是hello</h1>",   //不加url就是片段,加url就是路径
        replace:true,   //是否替换
        scope:{
            data:"@"  //把当前属性作为字符串传递,可以绑定外层的scope的值,在属性中插入{{}}即可
            data:"="  //可以双向绑定父scope的属性,不用加{{}}
            data:"&"  //传递父scope上面的一个函数
        }  //独立作用域
    }
});

ng-transclude

html:

<hello><p>我是hello原本的东西</p></hello>

js:

app.directive("hello",function () {
    return{
        restrict:"EA",
        transclude:true,  //保留标签原有内容
        template:"<div>我是替换的内容<div ng-transclude></div></div>",

    }
});

$templateCache把模板缓存起来

var app = angular.module("app",["ui.router"]); //创建模块并且引入ui.router
//配置一个路由块
app.run(function ($templateCache) {
    $templateCache.put("hello","<div>hello everyone!!!!</div>") //把模板缓存,命名为hello
});

app.directive("hello",function ($templateCache) {
    return{
        restrict:"EA",
        template:$templateCache.get('hello'), //从缓存获取hello
        replace:true
    }
});

指令的三个阶段

1 加载阶段 加载angular.js,找到ng-app指令,确定应用的边界

2 编译阶段 遍历dom节点,找到所有的指令,根据指令代码中的template,replace,transclue转换dom结构,如果存在compile函数会调用

3 连接阶段 运行每条指令的link函数,可以在link里面操作dom节点,其他地方尽量不要,绑定事件

在link阶段绑定事件:

html:

<hello><p>我是hello原本的东西</p></hello>

js:

var app = angular.module("app",["ui.router"]); //创建模块并且引入ui.router
//配置一个路由块

app.controller("appController",["$scope",function ($scope) {
    $scope.tell = function () {
        console.log("aaaa");
    }
}]);

app.directive("hello",function () {
    return{
        restrict:"EA",
        link:function (scope,element,attr) {  //attr可以获取到指令上面的属性
            element.on("mouseenter",function () {
                scope.tell(); //直接调用
                scope.$appyl("tell()"); //通过$apply调用
            })
        },
        controller:"appController"
    }
});

$scope和$rootscope

$scope是一个的对象,$scope提供了一些属性和方法,也可以在$scope上面添加一些属性的方法,$scope是一个作用域,是一个树型结构,和dom平行,子$scope可以继承父$scope上面的属性和方法.

$rootscope 是angular模型上的根对象,一个angular对象上只有一个跟对象

路由

ngRoute

html:

<div ng-view></div> //路由视图

js:

var app = angular.module("app",["ngRoute"]);
//配置一个路由块
app.config(function ($routeProvider) {
    $routeProvider.when("/p1",{
        templateUrl:"view/p1.html", //带上url就可以填入网页地址,不带上url就是填入html片段
        controller:"p1Controller"  //这个页面的控制器
    }).when("/p2",{
        templateUrl:"view/p2.html",
        controller:"p2Controller"
    }).otherwise({  //其余情况都指向/p1
        redirectTo:"/p1"
    })
});

ui-router

html:

<div ui-view></div>
<div ui-view="123"></div>
<div ui-view="456"></div>

js:

var app = angular.module("app",["ui.router"]); //创建模块并且引入ui.router
//配置一个路由块
app.config(["$stateProvider","$urlRouterProvider",function ($stateProvider,$urlRouterProvider) {
    $stateProvider.state("p1",{
        url:"/p1",  //路由地址
        views:{
            "":{    //view的名称,空就是ui-view
                templateUrl:"view/p1.html"
            },
            "123":{  //ui-view='123'
                templateUrl:"view/p2.html"
            },
            "456":{  //ui-view='456'
                template:"<h1>456</h1>"
            }
        }
    });
    $urlRouterProvider.otherwise("/p1");
}]);

ui-sref可以给标签绑定哈希,点击该便签会给浏览器带上哈希使路由跳转

数据绑定"{{}}" "ng-bind"

用"{{}}"双括号语法实现数据展示和
ng-bind 实现数据绑定不会出现"{{}}"

首页一般使用ng-bind,其他地方可以使用双括号语法,双括号语法也有办法加载的时候不会出现闪烁,使用ng-cloak,在style里面加上[ng-cloak]{display:none}就可以了