AngularJS ialah rangka kerja MVC bahagian hadapan untuk membangunkan aplikasi RWD responsif berasaskan penyemak imbas Ia merupakan projek sumber terbuka yang asalnya dibangunkan oleh Google telah menarik sejumlah besar peminat dan sesuai untuk membina perniagaan jenis CRUD aplikasi. Ia tidak sesuai untuk pembangunan Aplikasi seperti permainan menggunakan pengaturcaraan deklaratif untuk antara muka pengguna dan pengaturcaraan penting untuk logik, menyokong pelayar moden dan Internet Explorer versi 8.0 dan ke atas.
AngularJS ialah rangka kerja javascript MVC sisi klien, dan MVC sisi klien mewakili seni bina masa hadapan (mengapa menggunakan seni bina MVC+REST+CQRS
), jika anda mempunyai Struts atau SpringMVC, dsb. . Dengan pengalaman dalam pengaturcaraan rangka kerja MVC akhir, saya akan mempelajari Angular dengan cepat ia dilaksanakan mengikut idea MVC yang sama.
1 AngularJS
AngularJS Selain arahan terbina dalam, kami juga boleh mencipta arahan tersuai. Anda boleh menambah arahan tersuai menggunakan fungsi .directive. Untuk memanggil arahan tersuai, nama arahan tersuai perlu ditambahkan pada elemen HTMl. Gunakan kes unta untuk menamakan arahan, runoobDirective, tetapi anda perlu memisahkannya dengan - apabila menggunakannya, runoob-directive:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h>自定义指令!</h>"
};
});
</script>
</body>AngularJS juga boleh mentakrifkan penapis, seperti berikut:
<div ng-app="myApp" ng-controller="costCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>AngularJS mempunyai kaedah pengendalian acara HTML sendiri:
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">>隐藏/显示</button>
<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
});
</script>Selain itu, helaian gaya pilihan AngularJS ialah Twitter Bootstrap, yang pada masa ini merupakan rangka kerja bahagian hadapan yang paling popular.
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/../css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/../angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
<h>Users</h>
<table class="table table-striped">
<thead><tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr></thead>
<tbody><tr ng-repeat="user in users">
<td>
<button class="btn" ng-click="editUser(user.id)">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>
<hr>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>
<h ng-show="edit">Create New User:</h>
<h ng-hide="edit">Edit User:</h>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm- control-label">First Name:</label>
<div class="col-sm-">
<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label class="col-sm- control-label">Last Name:</label>
<div class="col-sm-">
<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="col-sm- control-label">Password:</label>
<div class="col-sm-">
<input type="password" ng-model="passw" placeholder="Password">
</div>
</div>
<div class="form-group">
<label class="col-sm- control-label">Repeat:</label>
<div class="col-sm-">
<input type="password" ng-model="passw" placeholder="Repeat Password">
</div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>
</div>
<script src = "myUsers.js"></script>
</body>
</html>Kod di atas boleh didapati di http://www.runoob.com/angularjs/ Untuk maklumat lanjut, sila rujuk http: //www .runoob.com/angularjs/
2 Groovy
Ada orang kata kalau ada java, akan ada groovy. kita boleh menggunakan rangka kerja grails Sangat mudah untuk membangunkan aplikasi web. Kenyataan Groovy adalah serupa dengan Java, tetapi mempunyai beberapa ciri khas. Sebagai contoh, koma bertitik bagi pernyataan adalah pilihan. Jika terdapat satu pernyataan setiap baris, anda boleh meninggalkan koma bertitik jika terdapat berbilang pernyataan pada baris, ia perlu dipisahkan dengan koma bertitik. Rentetan dalam Groovy membenarkan petikan berganda dan tunggal. Apabila menggunakan petikan berganda, anda boleh membenamkan beberapa ungkapan dalam rentetan dan Groovy membenarkan anda menggunakan sintaks ${expression} serupa dengan bash untuk penggantian. Ungkapan Groovy arbitrari boleh disertakan dalam rentetan.
name="James"
println "My name is ${name},'00${6+1}'" //prints My name is James,'007'Jika terdapat blok teks yang besar, ia perlu bermula dengan petikan tiga seperti Python (""") dan diakhiri dengan petikan tiga kali ganda.
name = "James"
text = """
hello
there ${name} how are you today?
"""3 Pelaksanaan log masuk
Arahan AngularJS ialah atribut HTML lanjutan dengan awalan ng- app. Arahan ng-init memulakan data aplikasi Arahan model-ng mengikat nilai elemen (seperti nilai medan input) index.html berikut mentakrifkan nama pengguna dan kotak input kata laluan >
Aplikasi aplikasi AngularJS (sebenarnya dikendalikan oleh app.js) ditakrifkan oleh ng-app Atribut ng-controller="LoginController" ialah arahan AngularJS yang digunakan untuk mentakrifkan fungsi pengawal Ia adalah fungsi JavaScript objek $scope untuk menyimpan objek Model AngularJS Pengawal mencipta dua atribut (nama pengguna dan kata laluan) dalam skop. mengikat kaedah log masuk latar belakang() yang ditakrifkan dalam<!DOCTYPE html>
<!--index.html -->
<html ng-app="app" lang="en">
<head>
<meta charset="UTF-">
<title>Title</title>
<script src="angular.min.js">
</script>
<script src="scripts/app.js">
</script>
</head>
<body ng-controller="LoginController">
<form ng-submit="login()">
<h>用户名:</h><input ng-model="user.username">
<h>密码:</h><input ng-model="user.password">
<h>{{info}}</h><br><input type="submit" value="登陆">
</form>
</body>
</html>Logik pemprosesan latar belakang log masuk berikut ditulis dalam Groovy:
/**
* app.js angular module define
*/
//ng-app="app"
angular.module('app', [])
//ng-controller="LoginController"
.controller('LoginController', function ($scope, $http) {
//user model define
//ng-model="user.username"
$scope.user = {}
$scope.info = '欢迎登陆'
//ng-submit="login()"
$scope.login = function () {
console.log($scope.user)
//Application.groovy post
$http.post('/login', $scope.user).then(function (res) {
console.log(res.data)
if (res.status == ) {
alert('登陆成功')
}
}, function (reason) {
//{{info}}
$scope.info = reason.data;
})
}
});/**
* Application.groovy
*/
import groovy.json.JsonBuilder
import groovy.json.JsonSlurper
import groovy.sql.Sql
import static spark.Spark.*;
class Application {
static JsonSlurper jsonSlurper = new JsonSlurper()
static Sql db = Sql.newInstance("jdbc:jtds:sqlserver://...:/lrtest;instance=sql",
"username", "password"
, "net.sourceforge.jtds.jdbc.Driver")
public static void main(String[] args) {
port()
//default index.html
staticFileLocation("/static");
get("/hello", { req, res -> "Hello World" });
//app.js $http.post('/login', $scope.user)
post('/login', { req, res ->
//debug
println(req.body())
def user = jsonSlurper.parseText(req.body())
//debug
println(user)
def u = db.firstRow("select * from test_user WHERE username = ?.username and password = ?.password", user)
if (u) {
//return
halt(, new JsonBuilder(u).toString())
} else {
halt(, '用户名密码不正确')
}
})
}
}Kandungan di atas adalah berdasarkan AngularJS+HTML+Groovy untuk melaksanakan log masuk Untuk pengetahuan yang berkaitan tentang fungsi, sila beri perhatian kepada bahasa Cina PHP laman web (www.php.cn) untuk kandungan yang lebih relevan!
Antivirus telefon mudah alih Apple
Tutorial membeli dan menjual Bitcoin di Huobi.com
Apakah maksud memformat telefon mudah alih?
Apakah perpustakaan kecerdasan buatan python?
penyelesaian pengecualian mysql
Apakah format m4a?
Ringkasan pengetahuan asas java
Penyelesaian laporan ralat fail sql import MySQL
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
