Geek college 9: angularjs

Introduction to 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

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

Introduction to angularjs

2. Use of development and debugging tools

3. The first angularjs web application

2. Angularjs advanced

2.1 design and construction of angularjs front end MVC

2.2 bidirectional data binding with binding instruction

2.3 use of controllers

2.4 use of variables and methods in $scope

3. Application of angularjs advanced services and instructions

3.1 custom services

3.2 application of services

3.3 use of common instructions

3.4 use of common instruction ng repeat

4. Use of angularjs built-in service $http

4.1 using $HTTP to query MySQL data

4.2 $HTTP to add, delete and modify data

4.3 user role permission instance

6. Angularjs mobile app development

6.1 introduction to ionic

6.2 introduction to Cordova

6.3 construction of development environment

6.4 development of contact app

Recommended Today

Use of source command in Linux