angularjs探秘<一>

时间：2022-01-24 20:40:25

首先聊聊angularjs是啥。

首先AngularJS 是一个 JavaScript 框架。(PS：其实就是外部引用的js文件)

所以AngularJS的使用依然是外部引用js文件。

附上引用地址

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

AngularJS的使用：

首先上代码。(容我先举个栗子)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>angularJS</title>

</head>

<body>

    <div ng-app="">

        <p>试试效果吧：<input type="text" ng-model="My_model" /></p>

        <h1>这里是你的model值：{{My_model}}</h1>

    </div>

    <!--引用js-->

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

</body>

</html>

解析：

这个例子是个简单的angularjs取值model。

angularjs特性之一：可嵌入任何框架使用。

各位请看栗子，在div后面有个ng-app，这个是告诉浏览器从这里开始里面的代码都归angularjs管(不关你的事儿了，angularjs全权管理后面的区域)。至于ng-app的值目前本菜还没测试。后面测试了本菜会说明。有大神知道的也可以说下。也就是说ng-app加在哪里，哪块内容就使用angularjs。强调一点，ng-app一个页面有且只能有一个，不能出现多个ng-app。这里可以吧ng-app理解为main方法，入口程序有且只能有一个。

angularjs特性之二：mvc模式开发。

回到栗子，input标签是不是也有个ng开头的东东，没错这就是model，mvc里的model。不要怀疑，angularjs就是这么牛逼，就是这么强大。然后h1中间的{{}}就是获取model的值(相信很多玩过其他模板的大牛一看就明白)，详细解析：<input type="text" ng-model="My_model" />这里是ng-model就是model。而{{My_model}}是用来展现model的值。(好了表问我controler去哪儿了。说到controler会说到module，所以后面再叨叨)。

补充个小案例：(一个简单的计算器)

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>angularJS</title>

</head>

<body>

    <div ng-app>

        <div>

            <input type="number" ng-model="num_1"/>

            <span>&nbsp;&nbsp;+&nbsp;&nbsp;</span>

            <input type="number" ng-model="num_2"/>

            <span>&nbsp;&nbsp;=&nbsp;&nbsp;{{num_1 + num_2}}</span>

        </div>

        <p>&nbsp;</p>

        <div>

            <input type="number" ng-model="num_3"/>

            <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>

            <input type="number" ng-model="num_4"/>

            <span>&nbsp;&nbsp;=&nbsp;&nbsp;{{num_3 - num_4}}</span>

        </div>

        <p>&nbsp;</p>

        <div>

            <input type="number" ng-model="num_5"/>

            <span>&nbsp;&nbsp;×&nbsp;&nbsp;</span>

            <input type="number" ng-model="num_6"/>

            <span>&nbsp;&nbsp;=&nbsp;&nbsp;{{num_5 * num_6}}</span>

        </div>

        <p>&nbsp;</p>

        <div>

            <input type="number" ng-model="num_7"/>

            <span>&nbsp;&nbsp;÷&nbsp;&nbsp;</span>

            <input type="number" ng-model="num_8"/>

            <span>&nbsp;&nbsp;=&nbsp;&nbsp;{{num_7 / num_8}}</span>

        </div>

    </div>

    <!--引用js-->

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>

</body>

</html>

通过这个案例可以看出{{}}中间可以进行简单的数值运算。

补充：有人问到ng-app的作用域到底多大？

ng-app写在哪个标签，那个标签内都是angularjs的作用域，

　　   举个栗子：

<html ng-app></html>就是当前整个页面都是angularjs的作用域。

　　　 <body ng-app></body>就是整个body都是angularjs的作用域。

<div ng-app></div>就仅仅当前这个div是angularjs的作用域。

初次探秘就哔哔这么多。原创文章，感谢支持。大牛勿喷

相关文章