zoukankan      html  css  js  c++  java
  • angularjs探秘<一>认识angularjs

    首先聊聊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的作用域。

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

  • 相关阅读:
    【大数据学习与分享】技术干货合集
    K8S集群搭建
    字节跳动面试难吗,应该如何应对?(含内推方式)
    我的新书《C++服务器开发精髓》终于出版啦
    同事内推的那位Linux C/C++后端开发同学面试没过......
    死磕hyperledger fabric源码|Order节点概述
    死磕以太坊源码分析之EVM如何调用ABI编码的外部方法
    死磕以太坊源码分析之EVM动态数据类型
    死磕以太坊源码分析之EVM固定长度数据类型表示
    死磕以太坊源码分析之EVM指令集
  • 原文地址:https://www.cnblogs.com/MirageFox/p/5583620.html
Copyright © 2011-2022 走看看