Angularjs簡介

時間 2019-12-13

原文原文鏈接

　　好久沒有系統學習一個新技術了，angularjs將會比較系統的講解這個技術的語法、應用。次類型的博客將會持續更新，博主也是一個初學者，若是有問題歡迎留言討論。javascript

　　angularjs簡介。

　　angularjs在建立優質的web應用的方面有着使人難以置信的能力。你將會用到一些概念，這個概念將會貫穿整個應用。並不是杜撰了這些概念，而只是從其餘開發環境中大量地借用了這些比較成功的習慣用語，而後以適合HTML、瀏覽區一塊兒其餘常見的web標準的方式來實現了這些概念。html

　　多頁面的應用會在服務端建立HTML，把HTML和數據裝配並混合起來，而後把生成的頁面發送到瀏覽器中。在某種程度上，大部分單頁應用也叫做AJAX應用，也會作一樣的事情。在這一方面。Angularjs在處理方式徹底不一樣，模版和數據都會發送到瀏覽器中，而後客戶端進行專配。這樣一來，服務器的角色就是僅僅爲這些模版提供一些靜態資源，而後爲這些模版提供所需的正確的數據。java

　　咱們能來看一個例子，看看angular是如何把數據和模版進行裝配的。咱們會例行公事的寫一個「Hello World!」，可是不會把「Hello world！」寫成一個完整的字符串打印出來。angularjs

　　爲了實現這一功能，我把模版放在hello.html中：web

 1 <!DOCTYPE html>
 2 <html ng-app="hello">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello World!</title>
 6     <script src="static/js/angular.js" type="text/javascript"></script>
 7     <script src="static/app/controller/controller.js" type="text/javascript"></script>
 8 </head>
 9 <body ng-controller="HelloController">
10 <p>{{greeting.text}},world</p>
11 </body>
12 </html>

View Code

1 !(function (){
2     var app= angular.module('hello',[]);
3     app.controller('HelloController', function ($scope) {
4         $scope.greeting = {text: "Hello"};
5     });
6 }());

View Code

　　使用任意的瀏覽器打開hello.html,你會看到以下效果:瀏覽器

　　與以前普遍的應用相比，這裏有些很是有趣的東西須要注意：服務器

　　一、HTML裏沒有ID或者class來定義事件和監聽器。app

　　二、當把HelloController中的greeting.text設置成其餘的文本的時候，咱們沒有必要設置任何的監聽事件和回調函數ide

　　三、HelloController只是一個普通的javascript類，並無繼承任何angularjs類函數

　　四、HelloController能夠獲取到它的$scope類，而沒有必要去建立它

　　五、沒有必要去本身調用HelloController的構造方法，或者指定合適調用它

　　數據綁定

　　當數據改變的時候，咱們會把HTML模版和數據混合起來，而後把得到的DOM數據插入到UI中，可是，當根據用戶的修改狀態來修改數據的時候可能要編寫極其複雜度代碼來保證數據的狀態是正確的，而且UI和JAVASCRIPT是屬性要同時正確。

　　可是，咱們不須要編寫代碼就能作到以上全部事情會怎樣呢？若是咱們能夠僅僅聲明UI中某個部分須要映射到javascript屬性，而後它們本身去同步又會怎樣呢？這樣是編碼風發就叫數據綁定。

　　爲了實戰中看到這一點，咱們把第一個例子，讓它變成動態的。目前的狀況是greeting.text是一個靜態的值，以後不再會修改它。爲了讓它變成動態的，咱們來增長一個輸入框，會把greeting.text值變成用戶輸入的值：

 1 <!DOCTYPE html>
 2 <html ng-app="hello">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Hello World!</title>
 6     <script src="static/js/angular.js" type="text/javascript"></script>
 7     <script src="static/app/controller/controller.js" type="text/javascript"></script>
 8 </head>
 9 <body ng-controller="HelloController">
10 <input type="text" ng-model="greeting.text"/>
11 <p>{{greeting.text}},world</p>
12 </body>
13 </html>

View Code

1 !(function (){
2     var app= angular.module('hello',[]);
3     app.controller('HelloController', function ($scope) {
4         $scope.greeting = {text: "Hello"};
5     });
6 }());

View Code

咱們在沒有添加任何事件的時候UI就自動刷新了，這一機制對於來自服務器的數據一樣有效。angular會自動把輸入框和花括號中的文本更新爲所得到的新值。

依賴注入

如代碼所示，咱們並不須要編寫任何代碼去得到$scope對象，而是$scope對象會自動傳遞給咱們，咱們並不須要調用任何函數去調用它，只須要辦$scope對象放到HelloController中咱們就可以使用它了，正如之後的講解當中，$scope並非咱們惟一能得到的對象，如：若是咱們想得到瀏覽器中URL上的操做，能夠適應$location對象，只需把$location對象放到HelloController中就可使用了。

1 !(function (){
2     var app= angular.module('hello',[]);
3     app.controller('HelloController', function ($scope,$location) {
4         $scope.greeting = {text: "Hello"};
5         //在這裏進行一些$locaotion操做
6     });
7 }());