Angularjs+ionic 学习（一）：Angularjs常用指令

最新推荐文章于 2023-10-01 23:38:24 发布

LeBron_Six

最新推荐文章于 2023-10-01 23:38:24 发布

阅读量5.6k

点赞数 3

分类专栏： PhoneGap 文章标签： html5 angularjs Android phonegap ionic

本文链接：https://blog.csdn.net/yyh352091626/article/details/49362355

版权

PhoneGap 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

ionic环境搭建请参考：PhoneGap+Angularjs+ionic 环境搭建

使用angular指令，需要angular.min.js这个文件，我们可以使用命令行来下载，下载完后考入我们的HTML5工程，引用一下就可以~如图

那么，在当前木兰就会生成一个node_modules文件夹，点击去angular，可以看到以下内容~那就下载成功了。angular.min.js就是目前我们想要的。

进入整体，先来看一段HTML代码~~

<!DOCTYPE html>
<html>
<head>
    <title>Ionic Template</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <script src="js/angular.min.js"></script>

</head>

<body>
    <div ng-app="">

        input something<br>
        <input type="text" ng-model="my_angular1">
        output：<br>
        {{my_angular1}}

        <br><br>
        input something<br>
        <input type="text" ng-model="my_angular2">
        output：
        <div ng-bind="my_angular2"></div>
    </div>
</body>
</html>

运行后的效果就是我们在文本框输入的内容跟我们输出的内容是绑定的，也就是同步输出~~绑定有两种方式，一种是通过双重花括号{{}}来绑定，{{}}其实可以认为是一种表达式；另一种就是通过ng-bing指令来绑定数据。

上面这段代码就用到了Angularjs的ng-app、ng-model、ng-bind这三个指定，当然，肯定不只这三种指令，下面就来看看Angularjs的指令含义~~

Angularjs指令介绍
ng-app	定义了Angularjs的跟元素节点，通俗点说，就是包装代码块，在这个代码块外面的内容，就没办法识别这个代码块里面的某些东西。所以，ng-app指令告诉Angularjs，当前的div块是Angularjs应用程序的所有者~
ng-model	绑定HTML的元素到应用程序数据，通俗来讲，就是设一个变量来指向HTML的某个标签，实现数据绑定；为应用程序数据提供类型验证（ number、 email、 required）；为应用程序数据提供状态（ invalid、 dirty、 touched、 error）；为 HTML 元素提供 CSS 类；绑定 HTML 元素到 HTML 表单；所以，ng-model 指令把输入域的值绑定到应用程序变量 name。
bg-bind	绑定HTML元素到应用程序数据。与ng-model就可以对应起来了~ 所以，ng-bind对应与ng-model，把应用程序变量 name 绑定到某个段落的 innerHTML。
ng-init	主要用于设置变量在应用程序里面的初始值。
ng_click	HTML元素的点击事件
ng_controller	为应用程序定义控制器对象。
ng_disabled	绑定应用程序数据到HTML的disabled 属性
ng_repeat	为控制器中的每个数据定义一个模板。
ng_show	显示或隐藏 HTML 元素。

ng-bind 与 {{}} 同样可以认为是数据绑定，有着异曲同工之妙，那么就来看看ng-bind 与 {{}} 绑定数据的示例

<body>
    <script src="angular.min.js"></script>
    <div ng-app="">
        <p>在输入框中输入： </p>
        <p>姓名： <input type="text" ng-model="name"></p>
        <p ng-bind="name"></p>
    </div>
    <div ng-app="">
        <p>在输入框中输入： </p>
        <p>姓名： <input type="text" ng-model="name"></p>
        <p>{{name}}</p>
    </div>
</body>

当然，{{}}不仅仅只能表示是字符串，数据拼接、数字、对象、数组，都是可以的，表达式规范跟Java语言差不多，自个儿领悟吧~~

ng-controller 指令定义了应用程序控制器。控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。控制器的 $scope 是控制器所指向的应用程序 HTML 元素。angularjs 中$scope 是连接 controllers(控制器)和 templates(模板 view/视图)的主要胶合体。我们可以把我们的 model 存放在 scope 上，来达到双向你绑定。来看段示例先~

<body>
    <div ng-app="" ng-controller="personController">
        <!-- 输出绑定的数据 -->
        名 : <input type="text" ng-model="person.firstName"><br>
        姓: <input type="text" ng-model="person.lastName"><br><br>
        姓名 : {{person.fullName()}}
    </div>
    <script>
        function personController($scope) { // personController为控制器对象名
            $scope.person = { // 构造一个对象
                firstName: "John",
                lastName: "Doe",
                fullName: function() { // 拼接全名
                    var x = $scope.person;
                    return x.firstName + " " + x.lastName;
                }
            };
        }
    </script>
    <script src="angular.min.js"></script>
</body>

ng-repeat指令主要是定义一个模版，提供给应用程序来使用。配合ng-controller使用，来看段示例

<div ng-app="" ng-controller="namesController">
    <ul>
        <li ng-repeat="x in names">
            {{ x.name + ', ' + x.country }}
        </li>
    </ul>
</div>
<script src="namesController.js"></script>
<script>
    function namesController($scope) {
        $scope.names = [
            {name:'Jani',country:'Norway'},
            {name:'Hege',country:'Sweden'},
            {name:'Kai',country:'Denmark'}
        ];
    }
</script>

最后来看段简单的综合示例

<!DOCTYPE html>
<html>
<head>
    <title>Ionic Template</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <script src="js/angular.min.js"></script>

</head>

<body>
    <!-- 定义根节点 初始化myName变量 -->
    <div ng-app="myApp" ng-init="myName = 'yuyh'">

        input something<br>
        <input type="text" ng-model="my_angular1"> <!-- 绑定 -->
        output：<br>
        {{my_angular1}}

        <br><br>
        input something<br>
        <input type="text" ng-model="my_angular2"> <!-- 绑定 -->
        output：
        <div ng-bind="my_angular2"></div>

        <br><br>
        My name is {{myName}} <!-- 表达式取值 -->
        <br><br>
        <div ng-controller="myControl"> <!-- 控制器 -->
            {{title}}

            <ul>
                <li ng-repeat="x in names"> <!-- 模版取值 -->
                    {{ x.name + ', ' + x.country }}
                </li>
            </ul>
        </div>
    </div>

    <script type="text/javascript">
        var app = angular.module("myApp",[]);
        app.controller('myControl',function($scope){ // 控制器
            $scope.title = "Hello World";

            $scope.names = [
                {name:'James',country:'U.S.A'},
                {name:'Yao',country:'CHN'},
                {name:'Wade',country:'American'}
            ];
        });
    </script>
</body>
</html>

run起来试试~~

LeBron_Six

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Angularjs+ionic 学习（一）：Angularjs常用指令

ionic环境搭建请参考：PhoneGap+Angularjs+ionic 环境搭建使用angular指令，需要angular.min.js这个文件，我们可以使用命令行来下载，下载完后考入我们的HTML5工程，引用一下就可以~如图那么，在当前木兰就会生成一个node_modules文件夹，点击去angular，可以看到以下内容~那就下载成功了。angular.min.js就是目前我
复制链接

扫一扫