Angular.js 学习笔记 整理一
2017-07-06 17:38
525 查看
Angular.js 跟Jquery有些相似 都是一个框架
使用方式都是
AngularJS核心特性1—MVC （面试必考）
module view controller 开发模式
m 代表模型 module 数据处理，一般指数据库的操作
类 模型
{a:ds f====> a
b:sfsf ===> b
c:grew}===> c
MVVM 弱化了控制器 ng-repeat (循环)
MVP 页面中直接去调用
二：核心—模块化
双向数据绑定 ng-model
语义化标签
依赖注入 数据对象模型
1.声明模块 ng-app=”模块名”
声明控制器 ng-controller
2.angular.module(‘模块名’,[依赖其它模块]) 定义模块
3.定义控制器 scope数据对象模型app.controller(‘控制器名字′,[scope,function(scope)处理页面交互逻辑])4.数据处理循环处理ng−repeat=‘stuinstus′(谁循环放谁那)ng−controller=“ctrl”app.controller(‘ctrl′[scope,function(scope)推断式依赖注入])很多有情况无法使用在代码压缩的时候依赖会被解除app.controller(‘ctrl′[scope,function(){行内式依赖注入}])
三：指令
书写方式 ng-
[size=3]1.内置指令：[/size]
ng-app 指定那个模块
ng-controller 指定控制器
ng-bind 数据绑定
ng-show 控制元素是否显示 true显示 false 不显示
ng-hide 控制元素是否隐藏 true隐藏 false 不隐藏
ng-if 控制元素是否”存在”(与if相同)
ng-src 增强图片路径
ng-class 控制类名
ng-include 引入模板 在服务器下运作
ng-disabled 表单禁用
ng-readonly 只读
ng-checked 选中
ng-selected 下拉框
ng-src 图片加载
ng-href 链接地址 引入外部文件
2.自定义指令
1.var app = angular.module(‘模块名’,[依赖其它模块]) 定义模块
2.directive去自定义指令
app.directive(‘指令名’,function(){
返回指令对象
return {
1.指定自定义标签的类型
E A C M
E element 标签
A attribute 属性
C class 类
M mark 标记
restrict:’EACM’
2.是否替换原有标签
replace:true(一般都选择)
3.指令模块 依托于谁
template:’
4.指令模块的外部模板 在服务器下运作
templateUrl:”test.html”
}
})
3.数据绑定
单项数据绑定 template(单向) 一次性绑定
View
/// \\
template model
[color=#e36c09] 单项数据绑定，数据渲染到试图。然后在DOM中显示，不会改变[/color]
双向数据绑定 ng-bind
template
|||
view
// \
|| ||
\ //
model
双向数据绑定：中间有监听事件，监听数据的变换，数据改变，view发生改变
使用方式都是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body >
<div ng-app>
<input type="text" ng-model="msg" id="txt">
<span>{{msg}}</span>
</div>
<div ng-app>
<input type="text" ng-model="wrd" id="txt" name="">
<span>{{wrd}}</span>
</div>
</body>
</html>AngularJS核心特性1—MVC （面试必考）
module view controller 开发模式
m 代表模型 module 数据处理，一般指数据库的操作
类 模型
{a:ds f====> a
b:sfsf ===> b
c:grew}===> c
v 代表页面渲染 view 即指 html+css 页面处理 c 代表控制器 controller 用于模型和视图交互 更合理的组织代码 逻辑更加清晰 降低了代码之间的耦合度 高耦合：a依赖与b，a不能使用 低耦合：a在没有b的情况下也可以运行自己逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- v 页面处理 -->
<div id="box"></div>
<script type="text/javascript">
var json = {
a:'123',
b:'456',
c:'789'
}
//m
function Class(obj) {
this.a = obj.a;
this.b = obj.b;
this.c = obj.c;
}
//定义使用这个类
var a = new Class(json);
document.getElementById('box').innerHTML=a.a;
</script>
</body>
</html>MVVM 弱化了控制器 ng-repeat (循环)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body >
<div ng-app>
<input type="text" ng-model="msg" id="txt">
<span>{{msg}}</span>
</div>
<div ng-app>
4000
<input type="text" ng-model="wrd" id="txt" name="">
<span>{{wrd}}</span>
</div>
<ui ng-repeat>
<li>1</li>
</ui>
<script type="text/javascript">
// 1.获取两个内容
// input焦点事件监听
</script>
</body>
</html>MVP 页面中直接去调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- v 页面处理 -->
<div id="box"></div>
<script type="text/javascript">
var json = {
a:'123',
b:'456',
c:'789'
}
//m
function Class(obj) {
this.a = obj.a;
this.b = obj.b;
this.c = obj.c;
}
//定义使用这个类
var a = new Class(json);
document.getElementById('box').innerHTML="<a></a>";
</script>
</body>
</html>二：核心—模块化
双向数据绑定 ng-model
语义化标签
依赖注入 数据对象模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app='stu'>
<!-- 声明控制器 -->
<!-- {{stus}} 数据显示 -->
<div ng-controller="ctr1">{{stus}}</div>
</div>
<script type="text/javascript">
// $scope 数据模型
var stu = angular.module('stu',[]);
stu.controller('ctr1',['$scope', function($scope){
// 数据模型结合
$scope.stus = 'zhangsan';
}]);
</script>
</body>
</html>1.声明模块 ng-app=”模块名”
声明控制器 ng-controller
2.angular.module(‘模块名’,[依赖其它模块]) 定义模块
3.定义控制器 scope数据对象模型app.controller(‘控制器名字′,[scope,function(scope)处理页面交互逻辑])4.数据处理循环处理ng−repeat=‘stuinstus′(谁循环放谁那)ng−controller=“ctrl”app.controller(‘ctrl′[scope,function(scope)推断式依赖注入])很多有情况无法使用在代码压缩的时候依赖会被解除app.controller(‘ctrl′[scope,function(){行内式依赖注入}])
三：指令
书写方式 ng-
[size=3]1.内置指令：[/size]
ng-app 指定那个模块
ng-controller 指定控制器
ng-bind 数据绑定
ng-show 控制元素是否显示 true显示 false 不显示
ng-hide 控制元素是否隐藏 true隐藏 false 不隐藏
ng-if 控制元素是否”存在”(与if相同)
ng-src 增强图片路径
ng-class 控制类名
ng-include 引入模板 在服务器下运作
ng-disabled 表单禁用
ng-readonly 只读
ng-checked 选中
ng-selected 下拉框
ng-src 图片加载
ng-href 链接地址 引入外部文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内置指令</title>
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<!-- 引入外部样式 -->
<link rel="stylesheet" type="text/css" ng-href="{{link}}">
<style type="text/css">
.red{
color: red;
}
.blue{
color:blue;
}
</style>
</head>
<body ng-app="app">
<ul ng-controller="ctrl">
<!-- 数据绑定 -->
<li ng-bind="name"></li>
<!-- 数据加载 -->
<li>{{name}}</li>
<li ng-show="1">ng-show用来显示隐藏内容,为true显示</li>
<li ng-hide="1">ng-hide用来隐藏隐藏内容,为true隐藏</li>
<li ng-if="1"><img ng-src="{{path}}"></li>
<!-- 样式添加 同为true后着覆盖前者，false谁是true，就是谁-->
<li ng-class="{red:true,blue:true}">ng-class指令</li>
<!-- 禁用 -->
<li><input type="text" ng-disable="1" name=""></li>
<!-- 只读 -->
<li><input type="text" ng-readonly="1" name="" value="god is"></li>
<!-- 选中 -->
<li><input type="checkbox" ng-checked="1" name=""></li>
<!-- 下拉 -->
<li><select>
<option value="1">地球村</option>
<option value="1">火星人</option>
<option value="1" ng-selected="1">冥王星</option>
</select></li>
</ul>
<script type="text/javascript">
//定义模块
var app = angular.module('app',[]);
//指定控制器
app.controller('ctrl',['$scope',function ($scope) {
$scope.name = '张三';
$scope.path = "1.jpg";
$scope.link = "1.css";
}])
</script>
</body>
</html>2.自定义指令
1.var app = angular.module(‘模块名’,[依赖其它模块]) 定义模块
2.directive去自定义指令
app.directive(‘指令名’,function(){
返回指令对象
return {
1.指定自定义标签的类型
E A C M
E element 标签
A attribute 属性
C class 类
M mark 标记
restrict:’EACM’
2.是否替换原有标签
replace:true(一般都选择)
3.指令模块 依托于谁
template:’
hello world
’4.指令模块的外部模板 在服务器下运作
templateUrl:”test.html”
}
})
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="www/angular-1-4-1.js"></script>
<style type="text/css">
div{
background: red;
}
</style>
</head>
<body ng-app="app">
<!-- 元素E -->
<!-- <tag></tag> -->
<!-- 属性A 没有原来属性值 替换 -->
<!-- <div tag>algio</div> -->
<!-- 类C 没有原来属性值 替换 -->
<!-- <div class="tag"></div> -->
<!-- 注释D -->
<!-- directive:tag -->
<script type="text/javascript">
//定义模块
var app = angular.module('app',[]);
//自定义指令
app.directive('tag',function(){
//返回一个定义的模块对象
return{
// 指定自定义标签的类型
restrict: "AECM",
//是否替换原有标签
replace:true,
// 指令模块
template:'<ul><li>首页</li><li>列表</li></ul>'
}
})
</script>
</body>
</html>3.数据绑定
单项数据绑定 template(单向) 一次性绑定
View
/// \\
template model
[color=#e36c09] 单项数据绑定，数据渲染到试图。然后在DOM中显示，不会改变[/color]
双向数据绑定 ng-bind
template
|||
view
// \
|| ||
\ //
model
双向数据绑定：中间有监听事件，监听数据的变换，数据改变，view发生改变
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Angular.js 学习笔记 整理二
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原理_js开发工具介绍_js程序(hello)_js基本语法_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第24讲_js案例讲解_js自定义函数_学习笔记_源代码图解_PPT文档整理
- ［Cousera Angular JS学习笔记］第一周(2)
- DWR util.js 学习笔记 整理
- angularjs directive 指令 学习笔记
- Angular.js学习笔记
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第20讲_js基本数据类型_js运算符1_学习笔记_源代码图解_PPT文档整理
- angular.js学习笔记之一
- Angular.js学习笔记(二)
- Angular.js学习范例及笔记
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第22讲_js三大流程控制(顺序流程、分支控制、循环控制)_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第29讲_二维数组转置_js面向对象编程介绍 类(原型对象)和对象_学习笔记_源代码图解_PPT文档整理
- JS基础学习笔记整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第26讲_js函数调用过程内存分析_js函数细节_学习笔记_源代码图解_PPT文档整理
- Angular.js回顾+学习笔记(1)【ng-app和ng-model】
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第28讲_js二维数组_js冒泡排序_二分查找_学习笔记_源代码图解_PPT文档整理
- JS数组学习笔记整理
- Angular.js 学习笔记