Angular.js！（附：聊聊非原生框架項目）

時間 2020-07-12

標籤 angular.js angular 聊聊原生框架項目欄目 AngularJS 简体版

原文原文鏈接

　　最近，爲了項目接觸了一個很火的前端框架Angular.js，下面就Angular作一個簡介吧（大牛請繞步，只針對沒有接觸過angular的人）。css

　　Angular.js是一款精簡的前端框架，若是要追溯它的起源，它是2009年Google Feedback項目團隊的一個成員Misko Hevery，在兩週內重寫的一個開源庫，把原先的17000行前端代碼精簡到1500行！你怕不怕？html

　　AngularJS有着諸多特性，最爲核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。若是你是一個jquery控，你也能夠在angular中盡情地使用jquery，由於angular封裝了jquery類庫。那麼，爲何angular這麼火呢？前端

　　我認爲關鍵在於它的精簡，好比：jquery

　　1.雙向數據綁定：能使模型（model）和視圖（view）進行數據同步，而免去了複雜的js語句。舉個例子吧：android

　　html：ios

<body ng-app="ngApp">
  <div ng-controller="ngCtl">
    <label ng-model="myLabel"></label>
    <input type="text" ng-model="myInput" />
    <button ng-model="myButton" ng-click="btnClicked"></button>
  </div>
</body>

　　js：css3

// angular app
var app = angular.module("ngApp", [], function(){
  console.log("ng-app : ngApp");
});
// angular controller
app.controller("ngCtl", [ '$scope', function($scope){
  console.log("ng-controller : ngCtl");
  $scope.myLabel = "text for label";
  $scope.myInput = "text for input";
  $scope.btnClicked = function() {
    console.log("Label is " + $scope.myLabel);
  }
}]);

　　在html中，咱們用ng-model關鍵字將label和input欄中的數據，和js中controller裏模型中的數據綁定在了一塊兒。git

　　只要view裏的數據改變，model中的數據也會改變。反之，也成立。angularjs

　　這就是雙向數據綁定！很酷吧！github

　　2.指令：可以自定義你想要的指令，去控制DOM元素、實現語義化標籤等。舉個簡單的小栗子：

　　在myapp模塊下，咱們編寫了一個helloworld指令。

var app = angular.module('myapp', []);
 
app.directive('helloWorld', function() {
  return {
      restrict: 'AE',
      replace: 'true',
      template: '<h3>Hello World!!</h3>'
  };
});

　　這樣，咱們在html中就能使用它了。

<hello-world/>
//OR
<hello:world/>

　　最後，經過指令執行機制，

<hello-world/>
//OR
<hello:world/>

　會被解析成template中的

<h3>Hello World!!</h3>

　　固然，angular也內置了不少指令供你們調用，如ng-click、ng-show、ng-model 等。

　　3.控制器：AngularJS應用主要依賴於控制器來控制數據在應用程序中的流動。如：定義scope供視圖層調用數據模型，暴露一組模型處理函數供外層調用等。

　　控制器的定義以下：

<script>
function studentController($scope) {
  $scope.student = {
   firstName: "yiibai",
   lastName: "com",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>

studentController 定義 $scope 做爲JavaScript對象參數。
$scope 表示應用程序，使用studentController對象。
$scope.student 是studentController對象的屬性。
firstName和lastName是$scope.student 對象的兩個屬性。咱們已經經過了默認值給他們。
fullName 是$scope.student對象的函數，它的任務是返回合併的名稱。
在fullName函數中，咱們如今要學生對象返回組合的名字。
做爲一個說明，還能夠定義控制器對象在單獨的JS文件，並把有關文件中的HTML頁面。
下面是整個先後臺代碼：

<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">

Enter first name: <input type="text" ng-model="student.firstName"><br><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script>
function studentController($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>
<script src="/ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

　　咱們經過ng-model進行數據綁定，將控制器scope範圍下的student信息綁定到view裏，最終輸出student的fullname。　

　　4.服務：負責爲控制器提供服務接口，angular內置瞭如$http服務用來進行服務器交互等。

　　下面，咱們舉個複雜點的例子，用來調用GitHub的API。

　　咱們利用factory建立了一個服務，名叫githubService，再利用$http服務經過JSONP方式去調用github的api。

angular.module('myApp.services', []) 
  .factory('githubService', ['$http', function($http) { 
  
    var doRequest = function(username, path) { 
      return $http({ 
        method: 'JSONP', 
        url: 'https://api.github.com/users/' + username + '/' + path + '?callback=JSON_CALLBACK' 
      }); 
    } 
    return { 
      events: function(username) { return doRequest(username, 'events'); }, 
    }; 
  }]);

　　咱們建立了一個只有一個方法的GitHub Service，events能夠獲取到給定的GitHub用戶最新的GitHub事件，爲了把這個服務添加到咱們的controller中。

　　咱們創建一個controller並加載（或者注入）githubService做爲運行時依賴，咱們把service的名字做爲參數傳遞給controller 函數（使用中括號[])。

app.controller('ServiceController', ['$scope', 'githubService', 
    function($scope, githubService) { 
}]);

　　咱們的githubService注入到咱們的ServiceController後，咱們就能夠像使用其餘服務（咱們前面提到的$http服務）同樣的使用githubService了。

　　咱們來修改一下咱們的示例代碼，對於咱們視圖中給出的GitHub用戶名，調用GitHub API，咱們綁定username屬性到視圖中。

<div ng-controller="ServiceController"> 
  <label for="username">Type in a GitHub username</label> 
  <input type="text" ng-model="username" placeholder="Enter a GitHub username, like auser" /> 
  <pre ng-show="username">{{ events }}</pre> 
</div>

　　如今咱們能夠監視 $scope.username屬性，基於雙向數據綁定，只要咱們修改了視圖，對應的model數據也會修改。

app.controller('ServiceController', ['$scope', 'githubService', 
    function($scope, githubService) { 
    // Watch for changes on the username property. 
    // If there is a change, run the function 
    $scope.$watch('username', function(newUsername) { 
            // uses the $http service to call the GitHub API 
            // and returns the resulting promise 
      githubService.events(newUsername) 
        .success(function(data, status, headers) { 
                    // the success function wraps the response in data 
                    // so we need to call data.data to fetch the raw data 
          $scope.events = data.data; 
        }) 
    }); 
}]);