AngularJs入门

最新推荐文章于 2024-07-11 15:59:35 发布

小贺。

最新推荐文章于 2024-07-11 15:59:35 发布

阅读量501

点赞数

分类专栏： web前端 JavaScript 文章标签： angularjs html

本文链接：https://blog.csdn.net/Run_the_youth/article/details/71774385

版权

web前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

示例Demo

Hello，欢迎学习AngularJs

<!DOCTYPE html>
<!--
    ng-app:和C语言的main方法有相同的作用，表示程序的入口，
    这里表示的是从这个html标签开始是由angularJS解析。
-->
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>AngularJsTest0</title>
    <!-- 加载AngularJs文件 -->
    <script src="./js/angular.min.js"></script>
</head>
<body>
    用户名: <input type="text" ng-model="username" placeholder="请输入用户名"/>
    <hr/>
    Hello <strong>{{username || ''}}</strong>,欢迎学习AngularJs!
</body>
</html>

效果

这里写图片描述

AngularJs的两种作用域

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJs作用域</title>
    <!--加载angularJs-->
    <script src="./js/angular.js"></script>
    <!--加载js文件-->
    <script src="./js/app.js"></script> 
</head>
<body ng-app="myApp">
    <h1>ctrl01控制器</h1>
    <div ng-controller="ctrl01">
        <!--$parent：父作用域,因为是最后一个节点所以父作用域就是根作用域-->
        <h3>父作用域：{{$parent.username}}</h3>
        <h3>当前作用域：{{username}}</h3>
    </div>
    <hr/>
    <!--在scope作用域范围内，数据是不能共享的，
    这里如果要能访问到username就必须在app.js中使用rootScope作用域-->
    <h2>ctrl02控制器</h2>
    <div ng-controller="ctrl02">
        <h3>调用了根作用域的username:{{username}}</h3>
        <h3>当前作用域：{{phone}}</h3>
    </div>
</body>
</html>

AngularJS代码

angular.module("myApp",[])
    .controller("ctrl01",function($scope,$rootScope){
        $scope.username = "xiaoming";
        $rootScope.username = "张三";
    })
    .controller("ctrl02",function($scope){
        $scope.phone = "110";
    });

效果

这里写图片描述

ng-repeat和ng-click的应用

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>list_app</title>
</head>
<body ng-app="myApp">
    <table ng-controller="ctrl01" border="1">
        <tr>
            <td>id</td>
            <td>name</td>
            <td>phone</td>
            <td>index</td>
            <td>操作</td>
        </tr>
        <!--ng-repeat遍历-->
        <tr ng-repeat="user in users">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.phone}}</td>
            <td>{{$index}}</td>
            <td>
                <button ng-click="delUser($index);">删除</button>
            </td>
        </tr>
    </table>
</body>
<script src="./js/angular.js"></script>
<script src="./js/list_app.js"></script> 
</html>

AngularJS代码

angular.module("myApp",[])
    .controller("ctrl01",function($scope){
        var users=[
            {id:1,name:'KCN1',phone:'110'},
            {id:2,name:'KCN2',phone:'110'},
            {id:3,name:'KCN3',phone:'110'},
            {id:4,name:'KCN4',phone:'110'},
        ];
        //把users绑定到scope域中
        $scope.users = users;

        //在scope域中定义删除函数
        $scope.delUser = function(index){
            console.info("删除"+index);
            // 获取id。。可以将id传到后台进行数据库的删除
            console.info("id = "+$scope.users[index].id);
            // 删除index开始的一个元素
            $scope.users.splice(index,1);
        }
    });

效果

这里写图片描述

AngularJs内置过滤器（filter）

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内置过滤器</title>
</head>
<body ng-app="myApp">
   <div ng-controller="ctrl01">
        <h2>格式化</h2>
       <h4>{{money | currency}}</h4>
       <h4>{{birthday | date:'yyyy年MM月dd日'}}</h4>
       <hr/>
       <h2>遍历数组</h2>
       <div ng-repeat="user in users">
           {{user.name}}------{{user.phone}}
       </div>
       <hr/>

       <h2>过滤出user中任何一个属性值含有小明的</h2>
       <div ng-repeat="user in (users | filter:'小明')">
           {{user.name}}--->{{user.phone}}
       </div>

       <h2>双向交互,在表单中输入要过滤的内容，显示到view上</h2>
       <input ng-model="condition">
       <div ng-repeat="user in (users | filter:condition)">
           {{user.name}}--->{{user.phone}}
       </div>

       <hr/> 
       <h2>双向交互,在表单中输入要过滤的name值，显示到view上</h2>
       <input ng-model="username">
       <div ng-repeat="user in (users | filter:{name:username})">
           {{user.name}}--->{{user.phone}}
       </div>

        <hr/> 
       <h2>调用函数func，将年龄大于20岁的显示到view上</h2>
       <div ng-repeat="user in (users | filter:func)">
           {{user.name}}--->{{user.phone}}---->{{user.age}}岁
       </div>
   </div>
</body>
<script src="./js/angular.js"></script>
<script src="./js/filter_app.js"></script> 
</html>

AngularJs代码

angular.module("myApp",[])
    .controller("ctrl01",function($scope,$rootScope){

       $scope.money = 34535;
       $scope.birthday = new Date();

        var users=[
            {id:1,name:'小明',phone:'110',age:21},
            {id:2,name:'刘小明',phone:'111',age:19},
            {id:3,name:'KCN',phone:'112小明',age:20},
            {id:4,name:'刘利达',phone:'113',age:22},
        ];
        //把users绑定到scope域中
        $scope.users = users;
        //初始化username
        $scope.username = "";

        //定义func函数
        $scope.func=function(user){
            return user.age>20;
        }
    });