zoukankan      html  css  js  c++  java
  • JS框架~Angularjs

    无意中看到anytao的项目,工作台,使用了Angularjs框架,感觉在前端表现上用户体验比较好,于是就简单看了一下,原来使用很简单,或者说,人家把代码封装的很好,以至于开发人员调用时比较简单,呵呵,使用Angularjs必须将你的html标记进行标识一下,告诉人家,我要用Angularjs来渲染页面了,事实上,Angularjs带合我们最重要的不是页面表现上,而是数据绑定上,它使HTML标记不那么死板,下面看一个DEMO就会明白了。

    下面是一个页面元素绑定的例子

    <html lang="en" ng-app>
    <body>
      <div ng-controller="Ctrl">
            Enter name:
            <input type="text" ng-model="name"><br>
            Hello <span ng-bind="name"></span>!
        </div>
    </body>
    </html>
    //对应的JS代码如下:
     function Ctrl($scope) {
                $scope.name = 'Whirled';
           }

    如果不希望改变页面的html标记,也可以手动为Angularjs初始化,代码如下:

       angular.element(document).ready(function () {
                angular.bootstrap(document);
            });

    而且Angularjs支持对象模型,你可以很方便的使用面向对象的特性

    看下面例子,是有一个对象user,user有name和last两个属性

    <div  ng-controller="Ctrl3">
            User name:
                <input type="text" name="userName" ng-model="user.name" required>
            Last name:
                <input type="text" name="lastName" ng-model="user.last">
            <p>
                你输入的内容为:
                user.name:<span ng-bind="user.name"></span>
                user.last:<span ng-bind="user.last"></span>
            </p>
    
        </div>
    //对应的JS代码如下:
    function Ctrl3($scope) {
                $scope.user = { name: 'zhang', last: 'zhanling' };
            }

    对于Angularjs的引用可以直接使用下面的地址:

    URL:http://code.angularjs.org/1.2.3/angular.min.js
    <script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>

    对于Angularjs的API请查看

    http://docs.angularjs.org/

  • 相关阅读:
    常系数齐次线性递推
    【CF961G】Partitions(第二类斯特林数)
    【CF715E】Complete the Permutations(容斥,第一类斯特林数)
    【BZOJ4671】异或图(斯特林反演)
    【CF960G】Bandit Blues(第一类斯特林数,FFT)
    【BZOJ2159】Crash的文明世界(第二类斯特林数,动态规划)
    【LOJ#6374】网格(二项式反演,容斥)
    组合计数和反演
    有标号的DAG计数(FFT)
    [复习]多项式和生成函数相关内容
  • 原文地址:https://www.cnblogs.com/lori/p/3457040.html
Copyright © 2011-2022 走看看