Maison > Article > interface Web > Framework js frontal AngularJS

Framework js frontal AngularJS

不言original: 2018-03-31 13:13:381285parcourir

Cet article vous présente le framework js front-end AngularJS. Les amis dans le besoin peuvent y jeter un œil

Utilisation :

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

Attributs communs :

ng-app : peut être utilisé sur n'importe quel élément, représente la portée de l'application angulaire et est également le point d'entrée du programme AngularJS. Il initialise les éléments dans la balise

ng-controller : contrôleur.

ng-model : Spécifie que l'élément actuel est lié à l'attribut dans le modèle de données ($scope) S'il n'y a pas un tel attribut dans le modèle de données, il sera créé de manière personnalisée

ng. -repeat : bouclez les attributs dans $scope.

ng-bind ou {{attribute name}} : obtenez la valeur de l'attribut.

Liaison bidirectionnelle :

Définition : La vue mise à jour sera automatiquement mise à jour avec le nouveau modèle. Le modèle mettra automatiquement à jour la vue

3. AngularJS implémente MVC basé sur la modularité :

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

4. . Liaison d'événement AngularJS :

<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 : événement de clic d'AngularJS.

5. Collection de parcours d'AngularJS :

<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 est utilisé pour le parcours de collection. et itération.

6. Routage AngularJS :

<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 qui introduit le routage :

ng-view : Affiche la page appelée par routage.

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

$routeProvider : Système de routage

when..when..otherwise : similaire à switch..case..case..default

Recommandations associées :

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

Framefront-end AngularJS

Comment implémenter le changement d'onglet et le changement de sélection dans AngularJS

Introduction à AngularJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utiliser l'historique pour permettre à ajax de prendre en charge l'avance/le retour/l'actualisationArticle suivant：Utiliser l'historique pour permettre à ajax de prendre en charge l'avance/le retour/l'actualisation

Articles Liés

Voir plus