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/

你可能感兴趣的:(AngularJS)