suchen

Heim >Web-Frontend >js-Tutorial >AngularJS-Frontend-Framework

AngularJS-Frontend-Framework

零到壹度
零到壹度Original
2018-03-30 14:32:101931Durchsuche

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>

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

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>

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>

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>

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

mvc angular 前端框架 switch 循环 JS 作用域 事件 default
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So erhalten Sie die Uhrzeit des Vortages oder des nächsten Tages in PHPNächster Artikel：So erhalten Sie die Uhrzeit des Vortages oder des nächsten Tages in PHP

In Verbindung stehende Artikel

Mehr sehen