angularjs的簡單應用（一）

時間 2019-12-09

標籤 angularjs 簡單應用欄目 AngularJS 简体版

原文原文鏈接

AngularJS是爲了克服html在構建應用上的不足而設計的。HTML是一門很好的爲靜態文本展現設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。html

AngularJS使用了不一樣的方法，它嘗試去補足HTML自己在構建應用方面的缺陷。AngularJS經過使用咱們稱爲標識符(directives)的結構，讓瀏覽器可以識別新的語法。例如：

使用雙大括號{{}}語法進行數據綁定；

支持表單和表單的驗證；

能將邏輯代碼關聯到相關的DOM元素上；

能將HTML分組成可重用的組件。

AngularJS的出現就是爲了解決頁面上頻繁的DOM操做。能夠構建完整的CRUD（增長Create、查詢Retrieve、更新Update、刪除Delete）的應用。

構建一個CRUD應用可能用到的所有內容包括：數據綁定、基本模板標識符、表單驗證、路由、深度連接、組件重用、依賴注入。

AngularJS的架構思想：MVVM(model,view,viewmodel)

AngularJS中的數據綁定分爲單向綁定和雙向綁定，其中ng-model是雙向綁定，這種綁定的方式會互相影響，模型的改變影響視圖，視圖的改變影響模型。

$scope方式實現的綁定是單向綁定。模型影響視圖。

AngularJS的引入：

簡單經常使用的語法：

ng-app="mainApp" 綁定在最外層根元素上（主模塊），好比<html ng-app="...">

　　ng-controller:肯定做用域
ng-model="name" 把名字叫name的屬性綁定到viewmodel中

　　ng-repeat:循環
    {{name}}  把view中的數據顯示在視圖上

    ng-model是雙向綁定
    $scope是單向綁定

     循環：
    ng-repeat

AngularJS在script中的應用：
    <script>
    加載主模塊：
     var indexApp=angular.module("indexApp",[]);
    建立做用域：
      indexApp.controller("Index",function($scope,$http) {
    定義變量：
        $scope.age=20
      }
    </script>

html中：
     肯定做用域:
    <body ng-controller="Index">
    做用域內：
    <p>{{age}}</p>

    循環：
     <tr ng-repeat="stu in stuAll">
                <td>{{stu.s_id}}</td>
                <td>{{stu.s_name}}</td>
                <td>{{stu.s_age}}</td>
    </tr>

方法的定義和調用：

$scope.init=function(){};

ng-blur="init()"//直接調用：$scope.init()

angularjs中提交數據的方式有兩種,get,post

get請求：

$http.get("/users/init?username=abc").success(function(){ })
post請求：
$http.post("/users/postdata",{username:abc}).success(function(){ })

內置的過濾器：

{{5000|currency}} //將前面的數字過濾成錢的形式，默認爲$,結果爲：$5,000.00

{{5000|currency:"￥"}} //結果爲：￥5,000.00

{{date|date:"yyyy-MM-dd HH:mm:SS"}}//過濾成日期並指定日期格式

{{abcArray|filter:6}}//查詢數組中有6的項

{{name|orderBy: 「...」}}//按照"..."排序

內置方法：

ng-class="{red:true}"//爲元素綁定類名

ng-style：//設置樣式（如：ng-style=「{background：'blue'}」）

ng-show="true/false" ng-show="num>1"//設置元素是否顯示,能夠跟條件

ng-checked="true/false"//設置單選鈕，複選框是不是選中狀態

ng-selected="true/false"//設置下拉列表是不是選中狀態

ng-click//點擊事件

<img ng-src="{{url}}">//ng-src的做用是當網絡緣由致使圖片尚未被加載出來時，不會出現帶×的圖片

angularjs中的模塊化：

angularjs要實現單頁面應用，須要用到模塊化

模塊化須要引進的js文件有：

<script src="js/angularjs_module/angular.min.js"></script>//主文件
<script src="js/angularjs_module/angular-route.min.js"></script>//配置路由的文件

<script src="js/module/reg/reg.js"></script>//模塊的JS

模塊化中，將路由配置在main.js中

main.js中的配置：

var mainApp=angular.module("mainApp",["ngRoute","regModule","loginModule","studentModule"]);//加載主模塊及其餘模塊

mainApp.config(["$routeProvider",function($routeProvider){
　　$routeProvider.when("/reg",{templateUrl:"js/module/reg/reg.html",controller:"regController"})//配置路徑及控制範圍
　　$routeProvider.otherwise({
　　　　redirectTo:"/reg"
})//設置主頁面中默認顯示的模塊


}//每一個模塊的路徑配置主頁面中可替換的區域用：ng-view$location.path("/login")//設置跳轉到的模塊

相關標籤/搜索

每日一句

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