JS框架~Angularjs

时间 2019-11-20

原文原文链接

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

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

<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>
//对应的ＪＳ代码以下：
 function Ctrl($scope) {
            $scope.name = 'Whirled';
       }

若是不但愿改变页面的html标记，也能够手动为Angularjs初始化，代码以下：前端

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

并且Angularjs支持对象模型，你能够很方便的使用面向对象的特性angularjs

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

<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>
//对应的ＪＳ代码以下：
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的ＡＰＩ请查看

http://docs.angularjs.org/app