动态

详情 返回 返回

嘗試使用angularjs - 动态 详情

本週完成了新項目兩個issue，由於是前台使用的是angularjs，而不是以往的angular,文件結構也不太相同。所以出現着:angularjs不熟悉，代碼無從下手的情況。 在經過摸索之後，對於angularjs有了一個大致的瞭解，能夠逐漸開始寫代碼。小小地記錄一下。

比如當時看到js文件中的代碼，還不太懂這麼定義的意思。
image.png

模塊

我們可以從這張圖，來初步瞭解angularjs的結構。 同時，我們按照從上到下的順序，介紹他們。
image.png

模塊包含了主要的應用代碼。
一個應用可以包含多個模塊，每一個模塊都包含了定義具體功能的代碼。
可以將module理解成一個容器，可以往其中放入controllers、services、filters、directives等應用的組成部分。

例如：

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []);

</script>

添加config routes

import * templateAbout from './about.html'
import * templatePerson from './person.html'

var app = angular.module('myApp', ['ui.router']);

app.config(function($stateProvider) {
  $stateProvider
    .state({
    name: 'person',
    url: '/person',
    controller: 'personCtrl'
    template: templatePerson
  })
    .state({
      name: 'about',
      url: '/about',
      template: templateAbout
       controller: 'aboutCtrl'
    })
});

添加控制器

定義控制器：

app.controller('personCtrl', function($scope) {
}

第一個參數是控制器的名字。

第二個參數是一個function, 參數代表 controller 依賴注入的service、值等。

比如説，我們可以將service以及值注入進去:

app.value("defaultInput", 5);

app.controller('personCtrl', function($scope, CalcService, defaultInput) {
}

代碼示例:

<div ng-app="myApp" ng-controller="personCtrl">

姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

控制器的含義和angular中的差不多。 初始看代碼的時候，比較令我費解的還是 $scope 這個屬性， 不太瞭解它的作用。 但是看樣子，它能起到 view 與 controller 之間的交互作用。

Scope(作用域)

image.png

從圖中可以看出來:

Scope(作用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。

<div ng-app="myApp" ng-controller="personCtrl">
    <input ng-model="name">
    <h1>{{name}}</h1>
    <button ng-click='changeName()'>改變名字</button>    
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.name = "張三";
    $scope.changeName = function() {
        $scope.name = "李四";
    };
});
</script>

當在控制器中添加 $scope 對象時，視圖 (HTML) 可以獲取了這些屬性。

視圖中，不需要添加 $scope 前綴, 只需要添加屬性名即可，如： {{name}}。


根作用域

所有的應用都有一個 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用於整個應用中。是各個 controller 中 scope 的橋樑。用 rootscope 定義的值，可以在各個 controller 中使用。

image.png



獲取$rootScope示例: 

<div ng-app="myApp" ng-controller="myCtrl">

<h1>$rootScope中rootAttr的值為：{{rootAttr}}</h1>


</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $rootScope.rootAttr = "Refsnes";
});
</script>

directive 指令

其含義和angular中差不多，

比如一些內置指令：

ng-app 指令初始化一個 AngularJS 應用程序。

ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。

自定義指令： 

<body ng-app="myApp">

<my-directive></my-directive>  <!-- 用法1:元素名-->
 
<div my-directive></div>       <!-- 用法2:屬性 -->

<script>
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
    return {
        template : "<h1>自定義指令!</h1>"
    };
});
</script>

</body>

Service 服務

比如: 可以使用自定義的的服務 hexafy 將一個數字轉換為16進制數:

定義service:

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

注入並使用:

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

總結

最後寫代碼的時候其實也有挺多看不懂的， 大概理解它是什麼功能之後，開始抄其他文件中代碼。 之後再打點，修bug。需要多看，多實踐。

菜鳥教程:https://www.runoob.com/angula...

angularjs
点赞

Add a new 评论

Some HTML is okay.