angularJS 1.x 基础 教程 总结
看了两天做个总结吧:
个人引用的是
ps:注意版本问题,被版本坑了不少
首先angularJS核心就是:
1）依赖注入
2）模块化
3）双向绑定
4）语义化标签
要看本教程之前最好过一遍菜鸟的angularJS教程
第一个Demo很经典的案例:
Title
记事本:
-
{{item}}
只用这么多代码就可以完成类似于任务记录的功能,还是很有意思的
接下来才是学习AngularJS:
首先从service,controller开始
html文件:
Title
{{msg}}
{{realname}}
{{http}}
{{data.msg}}
{{user}}
js文件:
angular.module('myApp',[])
.value('realname','zhaoliu') //可改变 同名value自动覆盖值
.constant('http','baidu.com') //常亮不可改变 同名constant依然用第一个值
.factory('Data',function () { //需要return
return{
msg:'Hello',
setMsg:function () {
this.msg = "其实不好"
}
}
}).service('User',function(){ //类似于factory
this.firstName='神尾';
this.lastName = '观铃';
this.getName=function(){
return this.firstName + this.lastName;
}
})
.controller('myCtrl',function ($scope,realname,http,Data,User) {
$scope.msg = "Hello";
$scope.realname = realname;
$scope.http = http;
$scope.data = Data;
Data.setMsg();
$scope.user = User.getName();
})PS:注意放在同一目录下
接下来是service的作用,用于交换不同controller的数据
Html文件:
Title
{{msg.msg}}
{{msg.msg}}
JS文件
angular.module('myApp',[])
.factory("Data",function () {
return {
msg: 'Data from factory'
};
})
.controller('myCtrl',function ($scope,Data) {
$scope.msg = Data;
})
.controller('myCtrl2',function ($scope,Data) {
$scope.msg = Data;
})常用指令 :
Html文件
Title
JS文件:
angular.module('myApp',[])
.controller('myCtrl',function ($scope) {
$scope.user = {
uname: 'text',
pwd:'pass',
zw:'1',
gender:'0',
aihao:[1,2]
};
//checkbox回显 html页面使用ng-checked="isChecked(3)" 绑定
$scope.isChecked=function (n) {
var is = false;
for(var i =0;i<$scope.user.aihao.length;i++){
if(n==$scope.user.aihao[i]){
is = true;
break;
}
}
return is;
}
$scope.register =function (user) {
console.log(user);
}
$scope.f = function ($scope,$timeout) {
}
})angularJS的directive模板技术
Html文件
Title
var app = angular.module('myApp',[]);
app.controller("myCtrl",function($scope){
$scope.data = {
name:"risen"
};
})
app.directive("testDirective",function(){ //注意模板名字在html引用是驼峰处用-
return {
restrict:"E",
template:"{{data.name||'未定义'}}
"
}
});