Angularjs is a front-end MVC framework for developing browser-based responsive RWD applications, the open source project developed by Google, and the clean architecture that attracts a large number of fans to create crud-type business applications that are not suitable for applications such as game development, Using the declarative programming of the user interface and the logic of imperative programming, support for modern desktop and mobile browsers Internet Explorer version 8.0 and above.
Angularjs is a JavaScript framework for client MVC, and client MVC represents the future architecture (why use MVC+REST+CQRS
Architecture), if you have struts or SPRINGMVC, and so on back-end MVC framework programming experience, learning angular will soon, basically according to the same MVC idea to achieve.
1 Angularjs
Angularjs In addition to the built-in instructions, we can also create custom directives. You can use the. directive function to add custom instructions. To invoke the custom directive, you need to add a custom directive name on the HTMl element. Use the Hump method to name an instruction, runoobdirective, but when using it you need to split, runoob-directive:
<body ng-app= "myApp" >
<runoob-directive></runoob-directive>
<script>
var app = Angular.module ("myApp", []);
App.directive ("Runoobdirective", function () {return
{
Template: '
Angularjs can also define filters, as follows:
<div ng-app= "myApp" ng-controller= "Costctrl" >
<input type= "number" ng-model= "Quantity" >
< Input type= "number" ng-model= "Price" >
<p> Lump sum = {{(quantity * prices) | currency}}</p>
</DIV >
ANGULARJS has its own way of handling HTML events:
<div ng-app= "myApp" ng-controller= "Personctrl" >
<button ng-click= "toggle ()" >> Hide/Show </button >
<p ng-hide= "MyVar" >
name: <input type= "text" ng-model= "FirstName" ><br>
Name: < 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>
Another Angularjs preferred style sheet is Twitter Bootstrap, and Twitter Bootstrap is the most popular front-end framework at the moment.
<! DOCTYPE html>
The above code is refer to http://www.runoob.com/angularjs/, more information can refer to http://www.runoob.com/angularjs/
2 Groovy
Some people say that there is groovy in Java, and in groovy, we can use the Grails framework and feel it is very convenient to develop Web applications. Groovy's statements are similar to Java's, but there are some special places. For example, the semicolon of a statement is optional. If you have one statement per line, you can omit the semicolon; If you have more than one statement on a line, you need to separate it with a semicolon. Strings in groovy allow you to use double quotes and single quotes. When you use double quotes, you can embed some expressions within the string, and groovy allows you to replace them with the ${expression} syntax similar to bash. You can include any groovy expression in the string.
Name= "James"
println "My Name are ${name}, ' 00${6+1} '"//prints My name is James, ' 007 '
If you have a large chunk of text, it needs to start with a triple quote like Python ("") and end with triple quotes.
Name = "James"
text = ""
Hello
there ${name} How are you?
""
3 Login Implementation
The ANGULARJS directive is an extended HTML attribute with a prefix ng-. The ng-app instruction Initializes a ANGULARJS application. The ng-init instruction initializes the application data. The Ng-model directive binds an element value (such as the value of an input field) to an application. The following index.html defines a username and a password input box control.
The ANGULARJS application app (which is actually app.js) is defined by Ng-app. The ng-controller= "Logincontroller" property is a angularjs instruction. Used to define a controller. The Logincontroller function is a JavaScript function. Angularjs uses $scope object to invoke the controller, using $scope to hold the object of the ANGULARJS model (model). The controller created two properties (username and password) in the scope. The ng-model instruction binds the input domain to the controller's properties (username and password). ng-submit= "Login ()" Binds the background login () method.
<! DOCTYPE html> <!--index.html-->
App.js defines a ng-app= "app" named App module, which corresponds to the HTML page, where user and info can be used for foreground model bindings, and a login () method is defined for the foreground to submit calls. $http is a core service in Angularjs that reads data from a remote server.
/**
* 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 = ' Welcome to login '
//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 (' Login succeeded ')
}
the function (reason) {
//{{info}}}
$scope. info = reason.data}}
);
The following logon background processing logic is written in groovy:
/**
* 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 (
)
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 (, ' User name password is incorrect '}}}}
To visualize the relationships between the components, use one of the following graphs to describe how the three are related:
The above content is based on Angularjs+html+groovy to implement the relevant knowledge of the login function, I hope to help.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
