Geek college 9: angularjs

Time:2021-1-9

Geek college 9: angularjs

Introduction to angularjs

Geek college 9: angularjs

Angularjs advantages:

  • utilizeDependency injectionandBidirectional bindingTwo features, do not write a lot of code to achieve complex functions.

  • You don’t need to operate a lot of DOM code like jQuery, you just need to change the data model to greatly improve the development efficiency

Geek college 9: angularjs

<!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 }}"> I am a{{ data.msg }}</div>
</body>
<script></script>
</html>

2. Use of development and debugging tools

Geek college 9: angularjs

3. The first angularjs web application

<!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()" > submit < / button >
        </span>
    </div>
    <h4 ng-if=" tasks.length >0 "> task list < / 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) "> delete</a>
        </li>
    </ul>

</body>
<script></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>

Geek college 9: angularjs

2. Angularjs advanced

Geek college 9: angularjs

2.1 design and construction of angularjs front end MVC

MVC pattern (model view controller) is a software architecture pattern in software engineering, which divides the software system into three basic parts: model, view and controller.

2.2 bidirectional data binding with binding instruction

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title > angularjs advanced < / 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} "> {{'user name:' + uname}} < / div >
    </div>
</body>
<script></script>
</html>

ng-bind:https://docs.angularjs.org/ap…

(bind)

2.3 use of controllers

Geek college 9: angularjs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title > angularjs advanced < / 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></script>
<script></script>
</html>

2.4 use of variables and methods in $scope

Geek college 9: angularjs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title > angularjs advanced < / 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()" > log in < / div >
        <div ng-show='errormsg.length>0' class="alert-box">{{errormsg}}</div>
    </div>
</body>
<script></script>
<script></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 ("login successful");
        }
        else{
            $ scope.errormsg= "Wrong user name or password"
        }
    }
})

3. Application of angularjs advanced services and instructions

Geek college 9: angularjs

3.1 custom services

Geek college 9: angularjs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title > angularjs advanced < / 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></script>
<script></script>
</body>
</html>
angular.module('app',[])
. value ('realname ','zhaoliu') // can be changed
.constant('http','www.baidu.com')
.factory('Data',function () {
     return{
         MSG: 'hello',
         setMsg:function () {
             this.msg= "I'm not good.";
         }
     }
})
    .service('User',function () {
        this.firstname= "Shangguan";
        this.lastname= "Flying Swallow";
        this.getName=function () {
            return this.firstname+this.lastname;
        }
    })

.controller('Myctrl',function ($scope,realname,http,Data,User) {
    $ scope.msg= "Hello";
    $scope.realname=realname;
    $scope.http=http;
    $scope.data=Data;
    Data.setMsg();
    $scope.uname=User.getName();
});

Geek college 9: angularjs

3.2 application of services

Geek college 9: angularjs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title > angularjs advanced < / 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></script>
<script></script>
</html>
angular.module('app',[])
.factory('Data',function () {
    return {
        MSG: 'I'm from factory';
        shopcart:['1','2']
    }
}) // public container

. controller ('fctrl ', function ($scope, data) {// order Ctrl
    $scope.data=Data
})

. controller ('sctrl ', function ($scope, data) {// shopping cart
    $scope.data=Data
})

Geek college 9: angularjs

3.3 use of common instructions

Geek college 9: angularjs

ng-ifThe element is removed from the dom,ng-show/hidecan’t.

// 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 use of common instruction ng repeat

Geek college 9: angularjs

<!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 "> address management < / 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></script>
<script></script>
</html>
angular.module('app',[])
.controller('AddressCtrl',function ($scope) {
    $scope.list = [
        {ID: 1, address: '2 / F, building 14, Lianhu community'},
        {ID: 2, address: '2 / F, building 14, Jianshe community},
        {ID: 3, address: '89 Xinghua Road'},
        {ID: 4, address: 'Beijing bird's nest is so far away'}
    ];
})

Geek college 9: angularjs

4. Use of angularjs built-in service $http

Geek college 9: angularjs

4.1 using $HTTP to query MySQL data

Geek college 9: angularjs

Geek college 9: angularjs

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 to add, delete and modify data

Geek college 9: angularjs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    < title > angularjs advanced $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()" > Add < / button >
    < button class = "button" ng Click = "deluser()" > delete < / button >
</body>
<script></script>
<script></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 ("add successfully");
                }
            })
    }
    $scope.deluser=function () {
        $http.post('http://127.0.0.1:80/user/delUser',{id:$scope.id})
            .success(function () {
                if(resp.success){
                    Alert ('deletion succeeded ');
                }
            })
    }
})
// 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 user role permission instance

Geek college 9: angularjs

6. Angularjs mobile app development

Geek college 9: angularjs

6.1 introduction to ionic

English document:http://ionicframework.com/docs/

Chinese websitehttp://www.ionic.wang/

6.2 introduction to Cordova

Geek college 9: angularjs

https://cordova.apache.org/
http://ngcordova.com/

6.3 construction of development environment

Geek college 9: angularjs

http://ionicons.com/

Browser cross domainhttp://www.cnblogs.com/rainma…

6.4 development of contact app

Geek college 9: angularjs

Geek college 9: angularjs

Recommended Today

Use of source command in Linux

Analysis of execution mode of Linux source command and script When I modify the / etc / profile file, I want it to take effect immediately without logging in again. At this time, I think of using the source command, such as source / etc / profileLearn about source and compare it with SH execution […]