极客学院#9：AngularJS
AngularJS 简介
AngularJS优势：javascript
利用 依赖注入 和 双向绑定 两个特性，不用编写大量代码来实现复杂功能。css
不用像jQuery操做大量DOM代码，只须要改变数据模型，极大地提升开发效率html
<!DOCTYPE html>
<html ng-app="">
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/foundation.min.css"/>
<title></title>
</head>
<body style="padding:10px;">
<input type="text" ng-model="data.msg"/>
<div ng-show="1==1" class="{{data.msg}}">我是一个{{data.msg}}</div>
</body>
<script src="js/angular.min.js"></script>
</html>
2.开发和调试工具的使用
3.第一个 AngularJS Web 应用
<!DOCTYPE html>
<html lang="en" ng-app = "todoList">
<head>
<meta charset="UTF-8">
<title>todoList</title>
<link rel = "stylesheet" type="text/css" 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-item">
<li ng-repeat="item in tasks track by $index" class="list-group-item">{{item}}
<a ng-click = "tasks.splice($index,1)">删除</a>
</li>
</ul>
</body>
<script 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>
</html>
2.AngularJS进阶
2.1 AngularJS前端MVC的设计与搭建
MVC模式（Model–view–controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。前端
2.2 Binding 指令实现双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS进阶</title>
</head>
<body style="padding: 10px;" ng-app="">
<div>
<h1>{{2+2}}</h1>
<input type="text" ng-model="uname">
<h1 ng-bind="uname">{{uname}}</h1>
<h1 ng-clock class="ng-clock">{{uname}}</h1>
<h1>{{uname}}</h1>
<div class="{{uname}}">{{'用户名:'+uname}}</div>
</div>
</body>
<script src="js/angular.min.js"></script>
</html>
ng-bind：https://docs.angularjs.org/ap...java
（bind 绑定）angularjs
2.3 Controllers 的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 进阶</title>
</head>
<body style="padding: 10px" ng-app="app">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="msg">
<h1 ng-bind="msg"></h1>
</div>
<div ng-controller="NextCtrl">
<input type="text" ng-model="msg">
<h1>{{msg}}</h1>
</div>
</body>
<script src="js/angular.min.js"></script>
<script src="js/myctrl.js"></script>
</html>
2.4 在$scope中变量和方法的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS进阶</title>
<link rel = "stylesheet" type="text/css" href="css/foundation.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.pwd">
<!--<h1>{{reverse()}}</h1>-->
<div class="button" ng-click="login()">登陆</div>
<div ng-show='errormsg.length>0' class="alert-box">{{errormsg}}</div>
</div>
</body>
<script src="js/angular.min.js"></script>
<script src="js/myctrl.js"></script>
</html>
angular.module('app',[])
.controller('FirstCtrl',function($scope){
$scope.msg="hello angular";
})
.controller('NextCtrl',function($scope) {
$scope.msg="hello angular";
})
.controller('MyCtrl',function($scope) {
$scope.msg='ddd';
$scope.errormsg='';
$scope.reverse=function () {
return $scope.msg.split("").reverse().join("");
}
$scope.login=function () {
if($scope.user.uname=="admin" && $scope.user.pwd=="123"){
alert("登录成功");
}
else{
$scope.errormsg="用户名或密码错误"
}
}
})
3. AngularJS进阶-Services与指令的运用
3.1 自定义Sevices服务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 进阶</title>
<link rel="stylesheet" href="css/foundation.css">
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="Myctrl">
<h1>{{msg}}</h1>
<h1>{{realname}}</h1>
<h1>{{http}}</h1>
<h2>{{data.msg}}</h2>
<h2>{{uname}}</h2>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
angular.module('app',[])
.value('realname','zhaoliu') // 是能够改变值的
.constant('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.msg="你好";
$scope.realname=realname;
$scope.http=http;
$scope.data=Data;
Data.setMsg();
$scope.uname=User.getName();
});
3.2 Services的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 进阶</title>
</head>
<body style="padding:10px;" ng-app="app">
<div ng-controller="Fctrl">
<input type="text" ng-model="data.msg">
<h2>{{data.msg}}</h2>
</div>
<div ng-controller="Sctrl">
<input type="text" ng-model="data.msg">
<h2>{{data.msg}}</h2>
</div>
</body>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</html>
angular.module('app',[])
.factory('Data',function () {
return {
msg:'我来自factory';
shopcart:['1','2']
}
}) // 公共容器
.controller('Fctrl',function ($scope,Data) { //下单ctrl
$scope.data=Data
})
.controller('Sctrl',function ($scope,Data) { // 购物车
$scope.data=Data
})
3.3 经常使用指令的使用
ng-if会把元素从dom中移除，ng-show/hide不会。apache
// ng-bind,{{}},ng-model,ng-show/hide,ng-if
// ng-checked,ng-src,ng-href,ng-class,ng-selected,ng-submit,ng-disabled
angular.module('app',[])
.controller('UserCtrl',function ($scope) {
$scope.user={
isShowImg:true,
showicon: true,
icon: 'image/logo.jpg',
uname: '',
pwd: '',
zw: '1',
sex: '0',
aihao: [1]
};
$scope.isChecked=function (n) {
var isok = false;
for(var i = 0;i< $scope.user.aihao.lrngth;i++){
if(n == $scope.user.aihao[i]){
isok=true;
break;
}
}
return isok;
}
$scope.register=function (u) {
console.log(u);
}
})
3.4 经常使用指令ng-repeat的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngualrJS</title>
<link rel = "stylesheet" type="text/css" href="css/foundation.min.css">
</head>
<body ng-app="app" ng-controller="AddressCtrl">
<div style="padding:10px;font-weight:bold">地址管理</div>
<ul class="ui-list ui-list-link ui-list-text ul-list-active ui-border-tb">
<li ng-repeat="a in list" class="ui-border-t">
<h4>{{$index + 1 + '.' + a.address + $first + ' ' + $last}}</h4>
</li>
</ul>
<br>
<ul>
<li ng-repeat="a in list" class="ui-border-t">
<h4 ng-if="!$last">{{$index+1+'.'+a.address}}</h4>
</li>
</ul>
<br>
<ul>
<li ng-repeat="a in list" class="ui-border-t" ng-if="!$last">
<h4>{{$index + 1 + '.' + a.address}}</h4>
</li>
</ul>
<br>
<ul class="ui-list ui-list-link ui-list-text ul-list-active ui-border-tb">
<li ng-repeat="a in list" ng-class="{'selected':$first}">
<h4>{{$index + 1 + '.' + a.address}}</h4>
</li>
</ul>
</body>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</html>
angular.module('app',[])
.controller('AddressCtrl',function ($scope) {
$scope.list = [
{id:1,address:'莲湖小区14栋2层'},
{id:2,address:'建设小区14栋2层'},
{id:3,address:'兴化路89号'},
{id:4,address:'北京鸟巢好远的地方'}
];
})
4.AngularJS内置服务$http的使用
4.1 使用$http查询MySQL数据
angular.module('app',[])
.config(function ($httpProvider) {
})
.controller('MyCtrl',function ($scope,$http) {
$http.get('http://127.0.0.0.1:80/user/getUsers')
.success(function (resp) {
console.log(resp);
})
})
4.2 $http实现对数据的增删改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJS 进阶$http</title>
<link rel="stylesheet" href="css/foundation.min.css">
<style type="text/css">
html,body{font-size: 14px;}
</style>
</head>
<body style="padding: 10px;" ng-app="app">
<div ng-controller="Myctrl"></div>
<input type="text" ng-model="id">
<input type="text" ng-model="name">
<button class="button" ng-click="adduser()">添加</button>
<button class="button" ng-click="deluser()">删除</button>
</body>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</html>
angular.module('app',[])
.config(function ($httpProvider) {
})
.controller('MyCtrl',function ($scope,$http) {
$scope.id = "";
$scope.name="";
$scope.adduser = function(){
$http.get('http://127.0.0.0.1:80/user/getUsers',{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 () {
if(resp.success){
alert('删除成功');
}
})
}
})
// UserController.java
import java.util.List;
import com.jfinal.core.Controller;
import com.model.User;
public class UserController extends Controller{
public void getUser(){
List<User> Users = User.dao.find("select * from t_user");
renderJson(users);
}
public void addusers(){
String name = getPara("name");
User user = new User();
boolean isok = user.set("name",name).save();
renderJson("success",isok);
}
public void delUser(){
String id = getPara("id");
boolean isok = User.dao.deleteById(id);
renderJson("success",isok);
}
}
4.3 用户角色权限实例
6.AngularJS之移动APP开发
6.1 Ionic简介
英文文档：http://ionicframework.com/docs/bootstrap
中文网站 http://www.ionic.wang/api
6.2 Cordova简介
https://cordova.apache.org/
http://ngcordova.com/跨域
6.3 开发环境的搭建
浏览器跨域 http://www.cnblogs.com/rainma...
6.4 联系人APP的开发