因为公司有几个老的项目都是由我维护和优化的,那几个项目都是用到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}就可以了
网友评论