deargu / study-note Goto Github PK

一、安装

1、在当前目录打开cmd，输入：npm install angular

2、在node-modules 找angular文件夹，复制angular.js到项目里

二、定义一个模块(module)

1、angular.module("模块名",[ ])
[ ]：写入要引入的其他模块

2、用 ng-app="模块名" 调用模块
ng-app代表主模块的作用域（一般方法html标签里）
例：<div ng-app="moduleOne"></div>

3、模块直接不会相互影响，一个模块代表一个作用域

4、模块一般命名格式："模块名"+App

三、controller

1、angular.module("模块名",[ ] ).controller("控制器名",function($scope){ 代码块 })

2、controller是在一个模块里面再划分作用域，控制器之间不会相互影响

3、通过ng-controller="模块名"来调用控制器
例：<div ng-controller="testCtrl"></div>

4、可以通过链式调用来连续使用controller
例：

angular.module("testApp",[ ]).controller("testCtrl",function($scope){ 
   代码块}).controller("testCtrl2",function($scope){代码块})

5、如果要在不同控制器定义共同的全局变量，可以直接x = 1，不要加var

6、ng-controller嵌套在另一个ng-controller中，若子代ng-controller与父代ng-controller有
相同的属性，而子代ng-controller没有将其赋值，则会继承父代ng-controller该属性的值

7、模块一般命名格式："模块名"+Ctrl

8、若ng-controller没写在页面上，该控制器里的代码就等于无效

四、{{表达式}}

1、angular通过{{ }}来调用数据
例：

<p>{{name}}</p>
<p>{{obj.a}}</p>
<p>{{num}}</p>
<p>{{arr[2]}}</p>

2、如果不是用angular的方法来改变某个值时候（如JQuery），要用$scope.$apply( )去刷新
该值（即手动刷新）

3、angular通过$scope这个桥梁把值传给{{ }}

4、{{ }}里面可以放三元表达式、可以算术运算、可以字符串拼接

5、{{ }}只能显示值不能获取值

五、ng-bind

1、$scope.name的值也可以用ng-bind="name"的格式写入页面
例：<p ng-bind="name"></p>

2、

{{name}}

六、ng-model（双向绑定）

1、ng-model：把数据传回作用域

2、可以获取值也可以显示值
例：

<input type="text" ng-model="input">
<p>{{input}}</p>

★ 若input值改变，p标签的{{input}}也会跟着改变

3、ng-model可以用在input、select、textarea标签

4、input的类型为checkbox时，其值为true和false
input的类型为range，其值为1-100

七、ng-repeat（循环数组）

1、ng-repeat = "数组[索引值] in 数组"
索引值默认为0，每次循环自增1

2、<li ng-repeat="arr in arrs">{{arr}}</li> //结果为：生成3个li
js代码：$scope.arrs=['a','b','c']

上面两个arrs相对应

3、ng-repeat的嵌套使用
例：

<li ng-repeat="arr in names">
{{arr.name}}
<p ng-repeat="x in arr.num track by $index">{{x}}</p>
</li>

js代码：

$scope.names = [{name:"xie",num:['1','2','3']},
 {name:"yao",num:['4','5','6']}]

ps：track by $index是为了防止数据相同时出现错误，若数组中有数据相同会报错，如：
['1','1','3']

八、ng-show & ng-hide

1、ng-show和ng-hide实质是改变了display的属性值

2、ng-show（ng-hide）="布尔值"
例：<p ng-show="bool"></p>
js代码：$scope.bool = true

3、ng-show为true时显示，为false时隐藏
ng-hide为true时隐藏，为false时显示

九、ng-switch

1、只有当条件符合时候才会显示相应的标签
例：

<div ng-switch="switchName">
<p ng-switch-when="a">a</p>
<p ng-switch-when="b">b</p>
<p ng-switch-when="c">c</p>

js代码：$scope.switchName = "b" 结果为：只显示b

十、ng-if

1、ng-if="布尔值"

2、ng-if为true时会显示节点，为false时会删除节点
例：

<p ng-if="bool">a</p>
<p ng-if="!bool">b</p>

js代码：$scope.bool = true 结果为：a显示，并且页面上没有b的p标签

十一、ng-style

1、ng-style="对象"，一定要为对象
例：<p ng-style="{'color':'red','fontSize':'num+px'}">red</p>

★ 不写引号的代表变量

十二、ng-class

1、ng-class="对象"，一定要为对象
<p ng-class="{'red':bool,'size':!bool}"></p>
js代码：$scope.bool = true 结果为：只加上了名为red的类

'red'、'size'为类名，只有为真时类才会加上

十三、ng-src & ng-href

1、<img ng-src="{{src}}"/>
js代码：$scope.src="img/1.jpg"

★ ng-src是个例外，这个ng里面一定要写{{src}}，其他的可以直接写变量名

2、<a ng-href="{{src}}"/>

十四、ng-bind-html

1、用于渲染html结果，并且可以检测是否安全

2、<div ng-bind-html="html"></div>
js代码：

app.controller("testCtrl",function($scope,$sce)){
$scope.html = $sce.trustAsHtml('<p>123<span>456</span></p>')
}

$sce：可以验证html解构是否安全

十五、ng-options（放在select标签里）

例：<select ng-model="default" ng-options="arr.id as arr.name for arr in arrs"></select>
js代码：

$scope.default = 3;    //设置默认值
	    $scope.arrs = [{
	        name: 'a',
	        id: 1
	    }, {
	        name: 'b',
	        id: 2
	    }, {
	        name: 'c',
	        id: 3
	    }];

ps：(1) select标签里一定要写ng-model设置默认值，如果不写则会出错
(2) arr.id as arr.name for arr in arrs
arr.id：代表option标签中value属性的值
arr.name：代表option标签的值

十六、angular的特点

1、MVC

2、SPAs：单页面程序

3、缺点：不利于搜索引擎的优化

一、ngRoute

1、下载angular-route.js文件

2、调用：app.module("testApp",["ngRoute"])

3、配置路由
js代码：

$routeProvider.when('/index',{
template:"<p>index</p>",
controller:"indexCtrl"
}).when('/home',{
template:"<p>home</p>",
controller:"homeCtrl"
})
})

html代码：<div ng-view=""></div>

ps：controller为指定该路由的控制器

4、url + #/ + 路由名字

5、设置默认路由（$routeProvide）

app.config(function($routeProvider){
$routeProvider.otherwise({
redirectTo:"/index"
})
})

6、不同网页之间通过路由来传参

app.config("homeCtrl",function($routeProvider){
$routeProvider.when("/home/:num/:name",{
templateUrl:"home.html"
})
})

获取参数

app.controller(function($scope,$routeParams){
console.log($routeParams)
})

跳转页面时传递参数
$window.location.href = "#/home/"+$scope.num+$scope.name

最后显示的格式为：#/home/38/laoxie

二、ui.router

1、调用：app.module("testApp",["ui.router"])

2、配置路由
js代码：

app.config(function($stateProvider){
$stateProvider.state('index',{
url:"/index",
templateUrl:"index.html",
controller:"indexCtrl"
}).state('home',{
url:"/home",
templateUrl:"home.html",
controller:"homeCtrl"
})
})

html代码：<div ui-view=""></div>

3、设置默认路由（$urlRouterProvider）

app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.when("","/index")
})

4、不同网页之间通过路由来传参

app.config(function($stateProvider){
$stateProvider.state('home',{
url:"/home/:num/:name",
templateUrl:"home.html",
controller:"homeCtrl"
})
})

获取参数

app.controller("homeCtrl",function($state){
console.log($state.params)
})

5、路由嵌套
(1) 嵌套一个：

app.config(function($stateProvider){
$stateProvider.state('index',{
url:"/index",
templateUrl:"index.html",
controller:"indexCtrl"
}).state("index.a",{
url:"/a",
templateUrl:"a.html"
}).state("index.b",{
url:"/b",
templateUrl:"b.html"
})
})

(2) 同级嵌套两个：
js代码：

app.config(function($stateProvider){
$stateProvider.state('index',{
url:"/index",
templateUrl:"index.html",
controller:"indexCtrl"
}).state("index.a",{
url:"/a",
views:{
"view1":{
template:"<p>123</p>"
},
"view2":{
template:"<p>456</p>"
}
}
})
})

html代码：

<div ui-view="" name="view1"></div>
<div ui-view="" name="view2"></div>

ps：记得写name

一、git安装和配置

1.git安装
下载地址：https://git-for-windows.github.io

2.配置个人信息
（1）git config --global user.name "your name"
（2）git config --global user.email "[email protected]"

★ 查看是否配置成功，用git config -l

二、创建本地仓库

1.git init：把当前目录变成一个git仓库

三、添加文件到版本库步骤

1.创建（修改）文件
往工作区中添加/修改文件

2.添加到暂存区：git add
★ git add . 把当前目录左右文件放到暂存区
把修改存放到暂存区

3.提交到版本库：git commit -m "备注"
使用git commit 命令可将暂存区的内容提交至版本库中，这个过程称为提交，每一
次提交都意味着版本在进行一次更新

PS：如果不写-m回车会进入vim编辑界面，退出方法：输入:q => 回车

四、操作git其他命令

1.查看仓库变更状态：git status

2.显示从最近到最远的提交日志：git log
● –pretty=oneline（显示简要信息id+备注）
● –graph（图形显示版本走向）
● –abbrev-commit（显示简写的id）
● 一大串类似3628164…882e1e0的是commit id（版本号）

3.撤销修改
git checkout -- ：放弃工作区的修改
git rm --cache ：撤销暂存区的修改
git reset HEAD ：撤销暂存器的修改

★ 4.查看命令利是：git relog

五、版本回退

1.当前版本指针：HEAD
上一个版本：HEAD^
上上一个版本：HEAD^^
...以此类推
★ 前100个版本：HEAD~100

2.git reset(-hard、-mixed、-soft)
（1）回退到上一个版本
git reset --hard HEAD^
★（2）回退到指定版本
git reset --hard [commit id] 版本号没必要写全，前几位就可以了，Git会自动去
找。
（3）回退指定文件
git reset --hard [commit id]
参数说明：（-hard、-mixed(默认值)、-soft）
● –hard:工作区、暂存区、版本库的文件同时回退
● –mixed：暂存区、版本库的文件回退（默认）
● –soft：仅仅回退版本库中的文件

六、远程仓库

★ 1.配置
（1）创建SSH KEY：ssh-keygen -t rsa -C "[email protected]"
以上命令会在当前window用户的目录里创建.ssh目录，里面有id_rsa（私
钥）和id_rsa.pub（公钥）两个文件
（2）把私钥或公钥添加到远程仓库
测试线路是否连通：ssh -T [email protected]

 2.连接
（1）关联远程仓库
         先有本地仓库，后有远程仓库的时候，如何关联远程仓库
         ★ git remote add origin 远程仓库地址

         PS：删除远程仓库连接：git remote remove <远程仓库名>
 （2）从远程库克隆（推荐）

先有远程库，后有本地仓库的时候，如何关联远程仓库
★ git clone 远程仓库地址

当你从远程仓库克隆时，实际上Git自动把本地的master分支和远程的
master分支对应起来了，并且，远程仓库的默认名称是origin

★ 3.查看当前仓库
（1）git remote -v

七、推送到远程仓库

git push

格式： git push <远程主机名> <本地分支名>:<远程分支名>
★ 建议使用git push -u origin master

八、拉取和合并（同步本地和远程仓库）

git pull

格式：git pull <远程主机名> <远程分支名>:<本地分支名>
使用git pull origin master

九、git分支

1.创建分支：git branch
切换分支：git checkout

PS：以上两步合并为：git checkout -b <name>

2.查看分支：git branch
列出所有分支，当前分支前面会有个*号

3.合并分支：git merge
★ git merge dev 把dev分支合并到当前分支

十、git过滤配置（过滤清单）

一般来说每个Git项目中都需要一个“.gitignore”文件，这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。
.gitignore文件常见写法如下：

/dist 过滤dist根目录下的文件（不过滤其他目录下的dist文件夹）
/mtk/ 过滤整个文件夹
*.zip 过滤所有.zip文件
/mtk/do.c 过滤某个具体文件

被过滤掉的文件就不会出现在你的GitHub库中了，当然本地库中还有，只是git status查看
状态时看不到，且push的时候不会上传。

一、安装

安装全局 gulp：npm install -g gulp
在当前目录下的cmd输入 gulp：npm install gulp
在当前目录下的cmd输入 gulp-sass：npm install gulp-sass

如果以上安装不成功
则安装全局 cnpm：npm install -g cnpm
在当前目录下的cmd输入 gulp-sass：cnpm install gulp-sass

二、创建gulpfile.js文件

在文件里面写上

//请求模块
var gulp = require('gulp');
var sass = require('gulp-sass');

//创建任务
//编译sass文件
gulp.task('buildSass', function() {
//查找需要编译的文件
gulp.src('src/sass/homepage.scss')
//编译文件
.pipe(sass())
//输出文件
.pipe(gulp.dest('src/css'))
});

//监听sass文件
gulp.task('jtSass',function(){
gulp.watch('src/sass/homepage.scss',['buildSass']);
})

三、运行任务

gulp 任务名字

四、监听所有sass文件

gulp.watch('src/sass/*',['buildSass']);

五、SCSS相关

1、@improt '文件名.scss'
2、不想被编译的sass文件要在文件名前面加下划线，即不会生成css文件
例：_rest.sass
3、ctrl+C可以停止监听

六、创建package.json

1、输入npm init
填写一系列信息后就会生成package.json
2、当别人下载有package.json的项目后输入npm install就会自动下载gulp的相关文件
3、npm install xxx --save (--save-dev)
--save为项目依赖
--save-dev为开发依赖

1、directive(return一个对象)
例：<xheader></xheader>
js代码：

return {
template:"<p>第一个对象</p>",
// templateUrl:"directive/xheader.html"
restrict:"ECMA",
}
}])

★ directive的命名不要与原生的标签名相同
★ xheader.html里面只能写html和css代码，不能写js代码
★ ECMA：E代表节点、C代表类、M代表注释、A代表属性
★ 若不写restrict，则默认为ECMA（一般不写）
★ 指令的本质就是组件

2、

return {
scope:{ }
//scope:false
//scope:true

link:function(scope,ele,attr){
console.log(scope)
scope.name = 1
ele.on("click",function( ){
scope.$apply(attr.ngClick)    //attr.ngClick的值为方法名
})
}
}
}])

★ scope:{ } 代表独立作用域，写了之后不继承控制器的作用域
★ scope:{
"name":"=", //"="为双向绑定（只有name才是双向绑定）
"arrs":"@" //"@"为只接受一次值，以后再也不会接受
}
★ scope:false 默认，控制器改变，组件也改变，反之亦然
★ scope:true 在组件没修改前，控制器改变组件也会改变，只要组件修改了，控制器不会跟
着修改
★ link：给组件提供一个写逻辑的地方，里面也可以写JQ代码
★ scope为组件作用域，ele为元素节点(组件写在哪个标签，节点就为这个标签)，attr为属性
★ 组件名用驼峰写法时候要注意写“-”，如：ngColor => ng-color

3、数组合并（concat）
['a','b','c'].concat(['1','2','3']) 结果为：['a','b','c','1','2','3']

4、手机端适配：<meta name="viewport" content="width=device-width,inital-scale=1">

5、angular API
(1) angular.lowercase( )：转为小写
(2) angular.uppercase( )：转为大写
(3) angular.isString( )：判断是否为字符串
(4) angular.isNumber( )：判断是否为数字
(5) angular.fromJson( )：把JSON字符串转化为JSION对象
(6) angular.toJson( )：把JSON对象转化为JSON字符串
(7) angular.equals( )：判断两个值是否相等
(8) angular.extend( )：合并对象
(9) angular.merge( )：合并字符串
(10) angular.element( )：转化为JQLite
例：angular.element(document.querySelector("#fixed"))
(11) angular.forEach( )：遍历数组
angular.forEach(['a','b','c'],function(item){
console.log(item)
}

6、只要操作了DOM结构都要用$scope.$apply( )来手动刷新

一、过滤器（过滤器放在视图里）

1、过滤器本身是一个特殊的服务，过滤器可用于转换数据

2、| 为管道符号

3、过滤器没有作用域（即无$scope），只有控制器才有作用域

4、过滤器分为：
(1) uppercase过滤器：将数据转换为大写
例：
<p>{{name|uppercase}}</p>

(2) lowercase过滤器：将数据转换为小写
例：
<p>{{name|lowercase}}</p>

(3) currency过滤器：将数据格式话为货币格式
例：
没有参数：<p>{{name|currency}}</p> 默认为：$xxxx
有参数：<p>{{name|currency:"￥"}}</p> 结果为：￥xxxxx

(4) date过滤器：
例：
<p>{{date|date:"yyyy/MM/dd:hh:mm:ss:EE"}}</p>
js代码：
$scope.time = "时间戳"

yyyy：代表年份，MM：代表月份，dd：代表日，hh：代表时，mm：代表分，
ss：代表秒，EE：代表星期

date的参数的格式可以变换，如："yyyy-MM-dd/hh/mm/ss/EE"

(5) filter过滤器：从数组项中选择一个子集，只能处理数组
例：
<li ng-repeat="arr in arrs|filter:'xie'">name:{{arr.name}}</li>
js代码：
$scope.arrs = [{name:'xie'},{name:'yao'}] 结果为：只有name:xie

(6) orderBy过滤器：根据某个表达式排序数组
例：
<li ng-repeat="arr in arrs|orderBy:'age':true"></li>

第二个参数为布尔值，若为真则降序排列，若为假则升序排列（默认）

(7) limitTo过滤器：限制字符显示数量，可以支持负数（从后往前截取）
limitTo：截取数量 截取的起始位置
例：
有参数：<p>{{name|limitTo:2:1}}</p>
js代码：$scope.name = "AbCd" 结果为：bC
无参数：<p>{{name|limitTo:2}}</p>
js代码：$scope.name = "AbCd" 结果为：Ab

limitTo可以应用在分页效果

(8) json过滤器：将对象转换为一个json字符串
例：<p>{{obj|json}}</p>
js代码：$scope.obj = {name:'DD',age:18} 结果为：{"name":"DD","age":18}

(9) number过滤器：保留n位小数
例：<p>{{num|number:2}}</p>
js代码：$scope.num = 123 结果为：123.00

5、自定义选择器（return一个方法）
js代码：

app.filter("过滤器名字",function(){
return function(input,params1,params2){
return input+"你已经被处理了"     //这个return一定要写
｝
})
<p>{{name|过滤器名字}}</p>   结果为：xie你已经被处理了

input为管制符号前的变量（即name），一定要写上，而params1、params2为可选

6、链式调用：
例：<p>{{num|currency:"￥"|number:2}}</p>

二、$filter（过滤器放在逻辑里面）
js代码：

$scope.abc = $filter('currency')('123','￥')
})
<p>{{abc}}</p>    结果为：￥123

currency为过滤器名字，'123'也可以写变量

$filter也可以放在filter( )里，即可在自定义过滤器中加入官方的过滤器
例：app.filter("myfilter",function($http,$filter){ })

链式调用：$filter("orderBy")($filter("currency")('123',"￥"))

一、service（服务）

1、 $window相当于window
例：$window.document.getElementById('test')
$window.navigator：对调试手机有用（可以看机型和浏览器内核）

2、$timeout服务 相当于setTimeOut
例：$timeout(function(){ },2000)

★ 2000为延迟时间

ps：js唯一实现异步的三种方法ajax、setTimeOut、setInterval
$timeout.cancel(延时器名字)：取消延时器

3、$interval 相当于setInterval
例：$interval(function( ){ },1000)

ps：$interval.cancel(定时器名字)：取消定时器

4、$http（ajax请求）
(1) jsonp原理：jsonp动态生成script，利用script的src拥有跨域的权限来拿到后端返回的一
个带有数据的对象

(2)

params:"JSON_CALLBACK"
}).success(function(data){console.log(data)})

(3) 跨域有2种方法：jsonp、后端加权限：header('Access-Control-Allow-Origin:*')

(4) angular的post存在一些问题，因为它跟JQ的post请求不同，JQ的post请求是字符串，
angular的post请求是一个json对象，所以要引入ngPost模块来处理angular的post请求
的格式

(5) angular.module("testApp",[ ]).controller("testCtrl",function($scope,$http){ })

(6) get请求
例：

params:{              //传入的参数（不同传参时不要写params）
name:"DD",
age:18
}
}).success(function(data){ }).error(function(err){ })

error( )：当有错误时输出错误的信息

(7) 三大UI框架：boostrap WeUI amazeUI

5、$document 相当于document
例：$document[0].getElementById("test")

ps：[0]一定要写上

6、$location 相当于location
$location.path("abc.html") 跳转到abc页面

7、$rootScope
(1) $rootScope可以作用在ng-app包含的所有html中，可以在controller外或者不同
controller之间的传值
例：$rootScope.name = "DD"

将第一个控制器的$rootScope赋给第二个控制器：$scope.a = $rootScope.name

(2) 在不同控制器定义相同名字的$rootScope时，后面的会覆盖前面

二、自定义服务（return一个对象）

1、

return {
add:function(a,b){
return a+b
｝
}
})

2、自定义服务的命名不要加$符号

3、一个服务可以调用另一个服务里面的方法

4、构造函数实例化时，里面的代码还会自动往下执行，而且可以定义私有变量（函数外面永远得
不到这些变量，除非用闭包）

5、app.service还可以返回一个构造函数，控制器会自动实例该构造函数
例：

this.name = 'DD';
this.sub = function( ){
console.log($window.navigator)
}
})

6、可以自定义服务的方法：app.service( )、app.factory( )、app.constant( )、app.value( )、
app.config( )

7、app.factory( )与app.service( )用法基本一样，但app.factory( )不能返回一定构造函数

8、不同控制器之间也可以利用服务来进行传值
例：控制器一：tool.a = "DD"
控制器二：console.log(tool.a) 结果为：DD

服务代码：

app.service('tool',function( ){
return { }
    })

ps：若tool.a在任意控制器中改变了值，那么服务中的tool.a和其他控制器中的tool.a也会随
之改变