观看极客学院Angular学习视频,做了如下笔记。
Angular菜鸟教程 ,AngularJS教程,AngularJS中文网中也有较详细教程,可以仔细阅读学习下。
一、入门
1. AngularJS简介
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。它可通过<script>
标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中。
2. 第一个AngularJS web 应用
->引入angular.js文件使用ng-app
指令声明AngularJS管理边界。
->AngularJS双向绑定简单使用
双大括号{{}}
->常用指令的演示
ng-model,ng-bind
<!DOCTYPE html>
<html lang="en" ng-app="todoList">//
<head>
<meta charset="UTF-8">
<title>todoList</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 10px" ng-controller="TaskCtrl">
<div class="input-group">
<input type="text" class="form-control" ng-model="task">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="add()">提交</button>
</span>
</div>
<h4 ng-if="tasks.length>0">任务列表</h4>
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in tasks track by $index">
{{item}}
<a ng-click="tasks.splice($index,1)">删除</a>
</li>
</ul>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
angular.module('todoList',[])//声明
.controller('TaskCtrl',function($scope){//控制器
$scope.task='';
$scope.tasks=[];
$scope.add=function(){
$scope.tasks.push($scope.task);
}
})
</script>
</body>
</html>
ng-app指令声明AngularJS的管理边界。
二、进阶(1)
1. MVC的设计与搭建
->Model(模型)表示应用程序核心(比如数据库记录列表)。
->View(视图)显示数据(数据库记录)。
->Controller(控制器)处理输入(写入数据库记录)。
Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。
View(视图)是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。
Controller(控制器)是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。
MVC 分层有助于管理复杂的应用程序,因为您可以在一个时间内专门关注一个方面。例如,您可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。
MVC 分层同时也简化了分组开发。不同的开发人员可同时开发视图、控制器逻辑和业务逻辑。
2. Binding指令实现双向数据绑定
ng-bind 和 {{}} 的使用
<h1>{{username}}</h1>
<h1 ng-bind="username"></h1>
<h1 ng-clock class="ng-clock">{{username}}</h1>
三种方法的结果是一样的。如果想{{}}不显示在页面中,可以使用第二种或第三种。第三种方法的原理是先锁定h1,然后等username结果出来再显示在h1中。
3. Controllers的使用
->定义controller
->在controller
中声明变量
->使用ng-bind
绑定数据并显示controller
的作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>controller</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="firstCtrl">
<h1 ng-bind="meg"></h1>
</div>
<div ng-controller="nextCtrl">
<h1 ng-bind="meg"></h1>
</div>
</body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myctrl.js"></script>
</html>
//myctrl.js
angular.module("app",[])
.controller("firstCtrl",function($scope){
$scope.meg="hello angular";
})
.controller("nextCtrl",function($scope){
$scope.meg="hello world";
});
4. 在$scope中变量和方法的使用
->在$scope
上定义方法并在页面上进行绑定调用
->在$scope
上定义变量并在方法上使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$scope</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="myCtrl">
<input type="text" ng-model="user.uname">
<input type="text" ng-model="user.psd">
<botton class="btn" ng-click="login()">登录</botton>
<div class="err" ng-show="errormsg.length>0" ng-bind="errormsg"></div>
</div>
</body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myctrl.js"></script>
</html>
//myctrl.js
angular.module('app',[])
.controller("myCtrl",function($scope){
$scope.user={uname:'',psd:''};
$scope.errormsg='';
$scope.login=function(){
if($scope.user.uname=='admin'&&$scope.user.psd=='123456'){
alert('登录成功!');
}else {
$scope.errormsg='用户名或密码错误';
}
}
});
三、进阶(2)
1. 自定义Services服务
依赖注入是部件赋予的,不是硬组件内的编码的依赖设计模式。这从定位减轻组件的依赖,使依赖可配置。这有助于使组件可重复使用,维护和测试。
AngularJS提供了一个至高无上的依赖注入机制。它提供了一种可被注入彼此作为依赖以下核心组件。
五种创建方法:
->值 - value
->工厂 - factory
->服务 - service
->提供者 - provider
->常量 - constant
- 值是简单的JavaScript对象,并用它在配置阶段传递值到控制器。
- 工厂是一个函数用于返回结果值。它根据需要创建一个值,当一个服务或控制器需要时。它通常使用一个工厂函数来计算和返回结果值
- 服务是一个单独的JavaScript包含了一组函数对象来执行某些任务。服务正在使用 service() 函数,然后注射到控制器中。
- 提供者使用AngularJS内部创建的服务,工厂等。在配置阶段(第一阶段AngularJS引导自身期间)。下面提及的脚本可以被用来创建,我们已经在前面创建了MathService。提供者是一个特殊的工厂方法使用get()方法来返回值/服务/工厂。
- 常量用于通过配置的相应值,考虑到值不能在配置阶段传递使用。
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>service服务</title>
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="myCtrl">
<h1>{{realname}}</h1>
<h1>{{http}}</h1>
<h1>{{data}}</h1>
<h1>{{name}}</h1>
</div>
<script src="js/angular.min.js"></script>
<script src="js/serviceCtrl.js"></script>
</body>
</html>
//serviceCtrl.js
angular.module("app",[])
.value('realname','zhangsan')
.constant('http','http://www.baidu.com')
.factory('Data',function(){
return {
msg:'你好',
setMsg:function(){
this.msg='我不好';
}
}
})
.service('User',function(){
this.firstname='上官';
this.lastname='秋燕';
this.getName=function(){
return this.firstname+this.lastname;
}
})
.controller('myCtrl',function($scope,realname,http,Data,User){
$scope.realname=realname;
$scope.http=http;
$scope.data=Data.msg;
$scope.name=User.getName();
});
provider例子:
var mainApp = angular.module("mainApp", []);
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
2. Services的应用
如何在多个controller中共享数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>services服务</title>
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="FCtrl">
<input type="text" ng-model="data.msg">
<h1>{{data.msg}}</h1>
</div>
<div ng-controller="SCtrl">
<input type="text" ng-model="data.msg">
<h1>{{data.msg}}</h1>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/services.js"></script>
</body>
</html>
//services.js
angular.module('app',[])
.factory('Data',function(){//共享数据
return {
msg:'我来自factory',
shopcart:['1','2']
}
})
.controller('FCtrl',function($scope,Data){
$scope.data=Data;
})
.controller('SCtrl',function($scope,Data){
$scope.data=Data;
});
3. 常用指令ng-repeat
的使用
ng-repeat
的使用
特有属性($index
,$first
,$last
)的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-repeat</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="padding: 10px;" ng-app="app">
<ul ng-controller="addressList" class="list-group">
<li class="list-group-item" ng-repeat="item in list">
<h1 style="font-size: 14px;">{{$index+'.'+item.address+' '+$first+' '+$last}}</h1>
</li>
</ul>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/repeat.js"></script>
</body>
</html>
//repeat.js
angular.module('app',[])
.controller('addressList',function($scope){
$scope.list=[
{id:'1',address:'万达B座101'},
{id:'2',address:'万达B座201'},
{id:'3',address:'万达B座301'},
{id:'4',address:'万达B座401'}
]
});
运行结果:
$index
:下标序号
$first
:判断是否是第一条数据
$last
:判断是否是最后一条数据
4. 常用指令的使用
指令ng-bind
,ng-model
,ng-show/hide
,ng-if
,ng-submit
,ng-disabled
的使用。
指令ng-checked
,ng-src
,ng-href
,ng-class
,ng-selected
,ng-change
的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用指令的使用</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<style>
.pic{display: block;margin: 30px 50px;width: 80px;height: 80px;}
</style>
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="checkForm">
<form name="login" ng-submit="register(user)">
<fieldset>
<legend>基本信息</legend>
<img ng-src="{{user.icon}}" ng-class="{'pic':user.showIcon}" ng-if="user.isShowIcon">
<input type="text" placeholder="用户名" required ng-model="user.name">
<input type="password" placeholder="密码" required ng-model="user.psd"><br><br>
职位:<select name="" id="">
<option value="">--请选择--</option>
<option value="1" ng-selected="user.job=='1'">java工程师</option>
<option value="2" ng-selected="user.job=='2'">.net工程师</option>
</select><br><br>
性别:<input type="radio" name="sex" value="man" ng-checked="user.sex=='1'"> 男
<input type="radio" name="sex" value="woman" ng-checked="user.sex=='2'"> 女
</fieldset>
<fieldset>
<legend>爱好</legend>
<div>
<input type="checkbox" name="hobby" ng-checked="isChecked(1)"> 篮球
<input type="checkbox" name="hobby" ng-checked="isChecked(2)"> 足球
<input type="checkbox" name="hobby" ng-checked="isChecked(3)"> 羽毛球
</div>
</fieldset>
<button class="btn submit" ng-disabled="login.$invalid">提交</button>
</form>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/ng.js"></script>
</body>
</html>
angular.module('app',[])
.controller('checkForm',function($scope){
$scope.user={
isShowIcon:true,
showIcon:true,
icon:'images/avatar.png',
name:'',
psd:'',
sex:'1',
job:'2',
hobby:['1','2']
};
$scope.isChecked=function(n){
var isok=false;
for(var i=0;i<$scope.user.hobby.length;i++){
if(n==$scope.user.hobby[i]){
isok=true;
break;
}
}
return isok;
};
$scope.register=function(u){
console.log(u);
}
});
其中ng-submit="register(user)"
是表单提交时触发的事件,ng-disabled="login.$invalid"
,其中login
是表单的name
值,此指令是指含有required
属性的输入框为空,所以此时的提交按钮为灰,不可提交的状态。
验证数据
以下可用于跟踪错误。
$dirty
- 状态指示值已被改变$invalid
- 指示值的状态是无效的$error
- 指出确切的错误
四、内置服务$http
的使用
1. 使用$http
查询MySQL数据
- $http发送请求
- 查询MySQL数据库并返回数据
例子:
angular.module('app',[])
.config(function($httpProvider){
})
.controller('MyCtrl',function($scope,$http){
$http.get('http://127.0.0.1:80/user/getUsers')
.success(function(resp){
console.log(resp);//resp即为返回的数据
})
})
$http.get()
可以改为 $http.post()
,这样请求时就可以带有参数。
2. $http
实现对数据的增删改
- $http带参数发送请求
- 对MySQL数据库增删改
angular.module('app',[])
.config(function($httpProvider){
})
.controller('myCtrl',function($scope,$http){
$scope.id='';
$scope.name='';
$scope.adduser=function(){
$http.post('http://127.0.0.1:80/user/adduser',{id:$scope.id,name:$scope.name})
.success(function(resp){
if(resp.success){
alert('添加成功');
}
})
}
$scope.deluser=function(){
$http.post('http://127.0.0.1:80/user/deluser',{id:$scope.id})
.success(function(resp){
if(resp.success){
alert('删除成功');
}
})
}
})
3. 用户角色权限实例