Heim >Web-Frontend >js-Tutorial >AngularJS Front-End-JS-Framework

AngularJS Front-End-JS-Framework

不言Original: 2018-03-31 13:13:381319Durchsuche

Dieser Artikel stellt Ihnen das AngularJS-Front-End-JS-Framework vor.

Verwendung:

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

1 > ng-app: kann für jedes Element verwendet werden, stellt den Angular-Anwendungsbereich dar und ist auch der Programmeinstiegspunkt von AngularJS. Es initialisiert die Elemente innerhalb des Tags

ng-controller: controller.

ng-model: Gibt an, dass das aktuelle Element an das Attribut im Datenmodell ($scope) gebunden ist. Wenn es kein solches Attribut im Datenmodell gibt, wird es benutzerdefiniert erstellt

ng -repeat: Schleife die Attribute in $scope.

ng-bind oder {{attribute name}}: Ruft den Attributwert ab.

2. Zwei-Wege-Bindung:

Definition: Die aktualisierte Ansicht wird automatisch mit dem neuen Modell aktualisiert.

3. AngularJS implementiert MVC basierend auf Modularisierung:

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

. AngularJS-Ereignisbindung:

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

ng-click: AngularJS-Klickereignis.

5. AngularJS-Traversal-Sammlung:

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

ng-repeat: AngularJS wird für die Collection-Traversierung verwendet und Iteration.

6. AngularJS-Routing:

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

JS, das Routing einführt:

ng-view: Zeigt die durch Routing aufgerufene Seite an

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

$routeProvider: Routing-System

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

Verwandte Empfehlungen:

<!-- Angular编程入口 -->
<body ng-app="myapp">
    <p>
        <h1>HEAD</h1>
        <a href="#/aa">首页</a>
        <a href="#/bb">*</a>
        <a href="#/cc">站长推荐</a>
    </p>
    <!-- ng-view显示路由调用页面 -->
    <p ng-view>			
    </p>
    <p>
        <h1>FOOT</h1>
    </p>
</body>
	
<script type="text/javascript">
    var myapp = angular.module("myapp",["ngRoute"]);
		
    myapp.config(["$routeProvider",function($routeProvider){
        $routeProvider.when("/aa",{
            templateUrl:&#39;aa.html&#39;
        }).when("/bb",{
            templateUrl:&#39;bb.html&#39;
        }).when("/cc",{
            templateUrl:&#39;5_3.html&#39;
        }).otherwise({
            redirectTo:"/"
        });
    }]);		
</script>

AngularJS-Frontend-Framework

So implementieren Sie Tab-Wechsel und Auswahlwechsel in AngularJS

Einführung in AngularJS

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

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：Verwenden Sie den Verlauf, um Ajax für die Unterstützung von Vorwärts/Zurück/Aktualisierung zu aktivierenNächster Artikel：Verwenden Sie den Verlauf, um Ajax für die Unterstützung von Vorwärts/Zurück/Aktualisierung zu aktivieren

In Verbindung stehende Artikel

Mehr sehen