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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。