AngularJS-Frontend-Framework-js-Tutorial-php.cn

AngularJS-Frontend-Framework

零到壹度

Freigeben： 2018-03-30 14:32:10

Original

1935 Leute haben es durchsucht

Dieser Artikel teilt Ihnen hauptsächlich die Anforderungsmethode des JAngularJS-Front-End-Frameworks mit. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Verwendung:

<script type="application/javascript" src="../js/angular.min.js "></script>

Nach dem Login kopieren

1. Allgemeine Attribute:

ng-app: kann für jedes Element verwendet werden, das Winkel darstellt Der Anwendungsbereich ist auch der Programmeingang von AngularJS, der die Elemente innerhalb des Tags initialisiert

ng-controller: controller

ng-model: Gibt das aktuelle Element und Datenmodell an ($ Bereich) Attributbindung in $scope. bind oder {{attribute name} }: Attributwerte abrufen. 2. Zwei-Wege-Bindung:

Definition: Die Aktualisierung der Ansicht folgt automatisch dem neuen Modell. und durch das Aktualisieren des Modells wird die Ansicht automatisch aktualisiert.

3. AngularJS implementiert MVC basierend auf der Modularisierung:

<!-- Angular编程入口 -->
<body ng-app>
    <p>
        <!-- 模型 -->
        <input type="text" name="name" ng-model="name " />
    </p>
    <p>
        Hello,{{name}}!!! 
    </p>
</body>

Nach dem Login kopieren

4 Bindung:

ng-click: AngularJS-Klickereignis.

<body>
    <!-- Angular编程入口,定义一个模块 -->
    <p ng-app="myapp" ng-controller="myctrl">
        <p>
            <!-- 模型 -->
            <input type="text" name="name" ng-model="name " />
        </p>
        <p>
            Hello,{{name}}!!! 
        </p>
    </p>
</body>
<script type="text/javascript">
    //初始化模块,第一个参数是对应的模块名称,第二个参数对应的拓展功能插件数组
    var myapp = angular.module("myapp",[]);
		
    //定义模块的控制器
    /*myapp.controller("myctrl",["$scope",function($scope){
        $scope.name="沃德发";
    }])*/
		
    //$scope页面与控制器的桥梁
    myapp.controller("myctrl",function($scope){
        $scope.name="法克鱿";
    });
</script>

Nach dem Login kopieren

5. AngularJS-Traversal-Sammlung:

ng-repeat: AngularJS wird zum Durchlaufen und Iterieren von Sammlungen verwendet.

<body>
    <!-- Angular编程入口,定义一个模块 -->
    <p ng-app="myapp" ng-controller="myctrl">
        <p>
            <!-- 模型 -->
            <input type="text" name="name" ng-model="name " />
            <input type="button" value="清空" ng-click="clearVal()"/>
        </p>
        <p>
            Hello,{{name}}!!! 
        </p>
    </p>
</body>
<script type="text/javascript">
    //初始化模块,第一个参数是对应的模块名称,第二个参数对应的拓展功能插件数组
    var myapp = angular.module("myapp",[]);
		
    //$scope页面与控制器的桥梁
    myapp.controller("myctrl",function($scope){
        $scope.name="嗯嗯啊";
        //事件绑定
        $scope.clearVal = function() {
            $scope.name = "";
        }
    });
</script>

Nach dem Login kopieren

6. AngularJS-Routing:

JS zur Einführung des Routings:

<body>
    <!-- Angular编程入口,定义一个模块 -->
    <p ng-app="myapp" ng-controller="myctrl">
        <table border="1" width="90%">
            <tr>
                <td>序号</td>
                <td>商品编号</td>
                <td>商品名称</td>
                <td>商品价格</td>
            </tr>	
            <tr ng-repeat="product in products">
                <td>{{$index+1}}</td>
                <td>{{product.id}}</td>
                <td>{{product.name}}</td>
                <td>{{product.price}}</td>
            </tr>
        </table>
    </p>
</body>
<script type="text/javascript">
    //初始化模块,第一个参数是对应的模块名称,第二个参数对应的拓展功能插件数组
    var myapp = angular.module("myapp",[]);		
    myapp.controller("myctrl",function($scope){
        $scope.products=[
            {
                id:&#39;A001&#39;,
                name:&#39;狗子&#39;,
                price:3306
            },{
                id:&#39;A002&#39;,
                name:&#39;啥子哟&#39;,
                price:8080
            }			
        ]			
    });
</script>

Nach dem Login kopieren

ng-view: nach Route aufgerufene Seite anzeigen$routeProvider: Routingsystem

when..when..otherwise: ähnlich wie switch..case..case..default

<script type="text/javascript" src="../js/angular-route.min.js" ></script>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAngularJS-Frontend-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!