Angular.JS學習記錄（一）

時間 2019-11-08

標籤 angular.js angular 學習記錄欄目 AngularJS 简体版

原文原文鏈接

要說如今前端最火熱的東西，node.js以及谷歌推出的Angular絕對是不二之選，本人也是最近纔開始學習這個東西，寫下這篇文章，就當作是本身的一個學習見證吧！javascript

Angular。一聽名字就很高大上啊。那麼它是作什麼的呢，簡單的說就在MVC模式上升級——>MVVM模式。AngularJS經過新的屬性和表達式擴展了HTML。他能夠構建單頁面應用程序，即SPA（SPAs：Single Page Applications）。css

下載

官方網址：https://angularjs.org/（國內的牆，你懂的，通常都很高！）
CDN地址：http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.js

簡單使用

首先它是一個 JavaScript框架，因此使用以前須要使用script標籤引入。html

ng-app

這個指令決定了angularjs的做用域範圍，你能夠以下使用前端

html<html ng-app> 
…  
</html>

若是隻想讓angularjs渲染整個頁面，也可使用java

html<div ng-app='myapp'>
……
</div>

來渲染其中的一部分。node

ng-model

ng-model,當你的數據模型被改變的時候，譬如ng-model=’test’,其中這個test的數值被改變的時候，綁定的{{test}}的數值也將跟隨改變，也就是鏈接到ng-model中的test也跟隨改變,以下jquery

html<!doctype html>
<html>
    <head>
        <script src="angular.min.js" type="text/javascript"></script>
        <title>learing argularjs--widuu</title>
    </head>
    <body ng-app>
    <input ng-model='test' >
    <p> hello {{test}} </p>
    </body>
</html>

結果如圖所示：

怎麼樣。不錯吧。經過短短的幾行代碼就能夠實現幾倍jquery實現的功能。固然這還只是angular的冰山一角，傳聞當時google一個項目在用angular以前有15000+代碼。使用angular之後只用了3000+左右。固然具體的狀況我不敢肯定哈。可是這足以說明angular的強大了！angularjs

controller

controller是angular.Module中的方法。
使用方法爲controller(name,constructor);
其中name是controller的名字，constructor是控制器構造函數，咱們利用代碼來看看：app

html<!doctype html>
<html>
    <head>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        var app = angular.module('myapp',[]);
        app.controller('hockor',function($scope){
            $scope.test="hello word";
        });
        </script>
        <title>learing argularjs--widuu</title>
    </head>
    <body ng-app='myapp' ng-controller='hockor' >
    <input ng-model='test'>
    <p> hello {{test}} </p>
    </body>
</html>

執行代碼之後你們能夠看到和上一個效果是同樣的，這就是controller的做用。即控制器。代碼中的$scope和module可能很陌生。不要緊，接下來我就會解釋了。框架

$scope

顧名思義，這是指做用域。談到JS的做用域，相信不少從事多年JS開發的人都仍是有一點暈，JS的預解析是招聘中的一個重要考察點。好了廢話很少說，我們仍是經過代碼來看問題。（之後的代碼我指貼出重要部分了哈，ng-app指令默認放在HTML標籤上面）

html<p ng-controller="hockor">{{name}}</p>

Javascriptfunction hockor($scope){
        $scope.name = "hello hockor";
    }

代碼中的控制器指向了hockor這個函數，hockor這個函數中我定義了1個形參是$scope，這是angular內置的,我如今是把name這個變量掛載到$scope上的，這樣name這個屬性才能被找到，若是單純的寫var name = "XXX",這樣是無效的，它就是一個普通的變量，而不是咱們想要的數據。

接下來咱們再來看個例子。

html<div ng-controller="hockor">
<p>{{name}}</p>
</div>
<p> {{age}}</p>

javascriptfunction hockor($scope,$rootScope){
        $scope.name = "hello hockor";
        $rootScope.name = "Just test";
    }

這一次你們能夠看到除了$scope之外咱們還有一個參數$rootScope。經過其名字咱們也能夠猜出，它就是一個頂級做用域，也就是全局做用域。原本上面代碼中的{{age}}是沒有掛載到hockor這個控制器下的，可是執行代碼咱們能夠發現他仍是被解析成了Just test這句話，這就是Angular中的做用域！

注意：以上咱們所寫的形參$scope.$rootScope是不能修改成其餘值的哦！

爲何呢？

你們能夠觀察上面的ng-controller，咱們寫的是一個函數名。而且不帶括號，這和咱們普通的調用JS函數不同，普通的調用JS函數是須要加括號的，而且能夠傳參在裏面，並且形參的名字是不受限制的。而在這裏就不須要寫括號了，只須要寫一個函數名，angular自動幫咱們依賴注入了參數，因此形參$scope.$rootScope是不能修改成其餘值的，必須按照angular的格式來寫。

OK，第一篇到此結束！

原創文章：轉載請註明！-hockor