Angular第一天
学的是第一代，跟学jQuery两个概念，jQuery是类库，一堆方法的集合，而Angular，则是比较零碎；
框架和库的区别，有什么差异
Angular，背景
饿了么，赶集，淘宝，滴滴，广花证券是用angular做的，版本老没关系，稳定最好；2的版本bug有些还不知道
i18n，在Angular里面有个文件夹，处理不同地区的规范，会有各种的编码规范；
1.js书写计算器
<input type="number" id="num1">
+
<input type="number" id="num2">
<input type="button" value="=" id="add">
<input type="number" id="num3">
<script>
var num1=document.getElementById('num1');
var num1=document.getElementById('num2');
var num1=document.getElementById('num3');
var add=document.getElementById('add');
add.onclick=function(){ num3.value=parseInt(num1.value)+parseInt(num2.value)
}
</script>
上面是原生的加法运算，jQuery没讲，但是都是
1.写页面
2.获取DOM元素
3.业务逻辑代码
2.书写Angular代码
<!--app指令，表示angular从这里开始，用angular处理的范围-->
<body ng-app>
<!--model指令，用来绑定input中的value属性-->
<!---->
<input type="number" ng-model="num1">
+
<input type="number" ng-model="num2">
<!--click指令，点击事件-->
<input type="button" value="=" id="add" ng-click="num3=num2+num1">
<input type="number" ng-model="num3">
<script src="angular-1.5.8/angular.js">
//引包
</script>
</body>
3.书写Hello World
<style>
[ng-cloak]{
display:none;
}
</style>
<!--app指令-->
<body ng-app ng-cloak>
<!--表达式（差值表达式）（胡子函数）-->
{{‘hello world！’}}
<!--bind指令，用来绑定标签中的HTML的内容，用属性的方式出现，不会影响-->
<p ng-bind="''hello world'"></p>
<!--引包-->
<script src="angular-1.5.8/angular.js"></script>
</body>
大括号是因为引入了angular包，浏览器识别到时angular代码；
其实angular是对HTML原有属性的拓展，
刷新快的时候会看到大括号，因为引包在后面引的，JS没有完全加载过来；如何解决呢？
.
方案一下几种:
- 将包放头部，但是网速差的时候依然会出现
- 可以在放ng-app 的标签中，放
ng-cloak指令,起到遮挡的效果，在angular源码最后一行有关样式代码，也可以在浏览器打开F12看样式部分，会添加个display：none；在用完后会将ng-cloak隐藏，还需要手动添加[ng-cloak]{display：none；}样式- 通过
ng-bind的方式来解决闪一闪的问题；
4.表达式
<body ng-app>
<!---->
<!--字符串表达式-->
{{ 'hello world' }}
<!--数字表达式-->
{{ 124134 }} {{ 1+1 }} {{ 2-1 }} {{ 22*1 }} {{ 4/2 }}
<!--布尔表达式-->
{{ true }} {{ false }} {{ true?'zhen':'jia' }}
<!--数组-->
<p>{{ [1,2,3] }}</p>
<!--对象-->
<pre>{{ {a:1,b:'xiao'} }}</pre>
<!--引包-->
<script src="angular-1.5.8/angular.js"></script>
</body>
5.双向数据绑定
<body ng-app>
<!--饿了么的购物车添加盒饭同步，双向数据绑定能够做到变量修改的同时所有引用改变量的位置参数都发生修改-->
<input type="number" ng-model="text1">
<input type="number" ng-model="text2">
{{text1+text2}}
<!--引包-->
<script src="angular-1.5.8/angular.js"></script>
</body>
上面的text1和text2都是不能再谷歌控制台直接输出的，需要用到插件，才能方便以后代码bug的查找；
ng-inspector-for-AngularJS_v0.5.10.crx谷歌扩展程序 这个也可以检测页面是否引用了angular
6.angular的模块化
<!--使用了myapp这个模块，还有myController这个控制器-->
<body ng-app="myapp" ng-controller="myController">
<!--需要桥梁控制text，在function中加￥scope这个参数-->
{{text}}
<!--1.引包-->
<script src="angular-1.5.8/angular.js"></script>
<script>
//2.创建模块
//通过module创建模块
//参数1.模块名 2. 空数组
var app=angular.module('myapp',[]);
//controller 创建控制器,管理子的功能,括号里面为名字，
//$scope scope服务 凡前面有带$都是angular官方服务，用$scope用来将myController中的数据传递到页面上
//$.log跟$scope的位置是可以替换的，但是参数的名字却是不能写错，体现框架调用我们，而不是像之前我们调用他们；
//依赖注入：我不需要你别来，我需要了你必须来；
app.controller('myController',function($scope,$log){
//在控制器中操作页面上面的代码
$scope.text="这个是从myController传递来的数据"
$log.log('这个是$log.log');
});
</script>
</body>
传递数据用参数
$scope,需要用到控制器app.controller();
$开头都是angular的服务，比较经典的是$log,输出的方法$log.log('这个$log.log');即是console.log,参数$scope,$log是可以进行位置替换的；
add.toString(),转化为字符串；
依赖注入本质
将当前的方法变成字符串，然后通过正则表达式来获取方法中的变量，最后在调用的过程中将方法中的需要的参数传递进去
7.模块化计算器
<!--使用了myapp这个模块，还有myController这个控制器-->
<body ng-app="myapp" ng-controller="myController">
<input type="number" ng-model="num1">
+
<input type="number" ng-model="num2">
<!--将add()这个业务逻辑拿到script中-->
<input type="button" value="=" id="add" ng-click="add()">
<input type="number" ng-model="num3">
<!--1.引包-->
<script src="angular-1.5.8/angular.js"></script>
<script>
//2.创建模块
//通过module创建模块
//参数1.模块名 2. 空数组
var app=angular.module('myapp',[]);
//controller 创建控制器,管理子的功能,括号里面为名字，
//$scope scope服务 凡前面有带$都是angular官方服务，用$scope用来将myController中的数据传递到页面上
app.controller('myController',function($scope){
//在控制器中操作页面上面的代码
$scope.num1=0;
$scope.num2=0;
$scope.num3=0;
$scope.add=function(){
$scope.num3=$scope.num1+$scope.num2;
}
});
</script>
</body>
在angular中大部分功能都是通过模块化来完成的，$$是angular内部的代码跑动，基本的东西都是从module出来的，都是从这个点出来的；
体现最重要的就是模块化的思想，后续有组件化的思想;
ng-init初始化数据在页面上用的很少；
桑世龙，node很厉害；
中国知网；jQuery的版本很低，但是他的用户范围很广；因而兼容性要求很高；
指令是angular核心内容；很多，但是得慢慢看
1.学习指令
- ng-app
- ng-init
- ng-click
- ng-bind
- ng-bind-html
- ng-class
<body ng-app="myApp" ng-controller="myCtrl">
<!--<h1>{{text}}</h1>-->
<!--<p ng-bind="text"></p>-->
<div ng-bind-html="text"></div>
<script src="angular-1.5.8/angular.js"></script>
<script>
<script src="angular-1.5.8/angular-sanitize.js"></script>
var app=angular.module('myApp',[]);
app.contraller('myCtrl',function($scope){
$scope.text='<h1>这是个h1标签</h1>'
});
</script>
</body>
在angular中引用不安全代码需要做以下操作
1.引用angular-sanitize.js
2.在创建模块初期添加引用名称
3.添加依赖ngSanitize
4.在不安全代码HTML中添加属性ng-bind-html
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<p ng-repeat="item in list">
name:{{item.name}},age:{{item.age}},gender:{{item.gender}}
</p>
</div>
<ul>
<!--用ng-repeat遍历出来arr-->
<li ng-repeat="number in arr track by $index">
{{number}} 下标：{{$index}}中间：{{$middle}}第一：{{$first}}结尾：{{$last}}偶数：{{even}}奇数：{{odd}}
</li>
</ul>
<script src="angular-1.5.8/angular.js"></script>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
//在使用rerepeat是系统会自动生成$index;
//$index就是当前循环的下标
$scope.arr=[1,1,2,3,4,5];
$scope.list=[
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
];
});
</script>
</body>
遍历对象，遍历数组，遍历重复数组
ngrepeat 中有一些遍历需要的语法$index,只是遍历全部，还有遍历第一，最后等等；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.red{
background-color:red;
}
.pink{
background-color: pink;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<!--奇偶变色-->
<p ng-class="{'red':$odd,'pink':$even}" ng-repeat="item in list">
name:{{item.name}}
</p>
</div>
<input type="checkbox" ng-model="check">
<!--ng-class用来控制当前标签的样式-->
<p ng-class="{'red':check}">{{text}}</p>
<script src="angular-1.5.8/angular.js"></script>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.text="初始化内容";
console.log($scope.check);
$scope.list=[
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
];
});
</script>
</body>
</html>
以数据为导向
奇偶变色
- ng-if
-
ng-if为true为显示 ,ng-if是通过注释的方式实现显示和隐藏 -
ng-show,ng-hide做显示和隐藏，是样式的隐藏 -
ng-hide跟ng-if，ng-show相反
<body ng-init="isShow=true" ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" >
<p ng-if="isShow">ng-if:{{isShow}}</p>
<p ng-show="isShow">ng-show:{{isShow}}</p>
<p ng-hide="isShow">ng-hide:{{isShow}}</p>
<script src="angular-1.5.8/angular.js"></script>
</body>
做假删除的操作，并不会真正的删除；
- ng-src
<body ng-init="isShow=true" ng-app="myApp" ng-controller="myCtrl">
<!--//一旦有src属性，就会请求图片，但是代码从上往下，请求不到，但是到后面执行到，就还原成下面代码的；但是还是会报错，如何解决呢？
//在src前面加ng- -->
<script src="angular-1.5.8/angular.js"></script>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.imgSrc='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2325084517,2241465199&fm=117&gp=0.jpg';
});
</script>
</body>
- 设计模式
按照某种模式造出来的代码，（方便交流）；
1.MVVM设计模式(标准)
View(视图（HTML）)
ViewModel (视图模型)$scope
Model(数据模型json,object)
数据通过ViewModel拿到，然后再将数据给视图View;
View如果有改变数据则会将数据返回给ViewModel,再返回给后台数据
微软提出来的模式
Controller控制器，也是我们每天在用的 controller,会对ViewModel (视图模型)中的$scope中的属性或方法进行相关的操作
MVVM等各种MV都统称为MV*；
坏处：代码量可能会增加
好处:前台代码和JS代码分离，便于开发于维护
总结今天
1.框架库的概念需要总结回顾
2.angular和Vue是唯一有中文的
3.angular2是为了跟另外一个技术保持名字同步，后面版本其实还是angular2；
4.ES615年更新
5.如何下载angular ，可以用node来下载，
6.介绍了两本书，深度剖析与最佳实战 权威指南
网友评论