iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 4
0
Modern Web

不負責任系列,胡言亂語AngularJS快速上手系列 第 4

[鐵人賽Day4]胡言亂語AngularJS 模組(Modules)

  • 分享至 

  • xImage
  •  

Angular Modules 模組就像一個模型
你玩過模型嗎?
什麼模型?
像是鋼彈啊,之類的啊…

唷,有啊有啊
那問你唷,那你組這個模型是不是一個一個零件慢慢組合的啊?
是啊,那跟這個主題Angular Modules有什麼關係嗎...?

當然有,Angular Modules就像模型一樣,把需要的功能零件一個一個個組合起來
唷,還不是很清楚,可以詳細點說明嗎?

那我們用實際例子來說吧
(JS Bin:https://jsbin.com/cixadaluru/3/edit?html,js,output)

首先我們來建立一個叫做angAPP的Module(這裡需注意ng-app為ng-app=“angAPP")
並使用angular.module(name, requires)的方法去產生Module
Source:

var angAPP = angular.module('angAPP',[]);

好了,之後我們在我們的View加入等等我們要的畫面零件
(這邊需要注意ng-controller=“angCtrl”,此行下一段會提到)
Source:

<form ng-controller=“angCtrl">
       <input type="number" ng-model="num1">
       <span>+</span>
       <input type="number" ng-model="num2">
       <span>=</span>
       {{num1 + num2}}
</form>

那好,之後我們要給num1,num2初始值
首先,建立Controller給它使用,在設定初始值
並使用.controller(name, constructor)的物件方法去產生Model
(參考資訊:https://docs.angularjs.org/api/ng/type/angular.Module
(這裡需注意Controller的名稱跟上段的ng-controller=“angCtrl”需要是一樣的唷)
Source:

angAPP.controller('angCtrl', function($scope){
     $scope.num1 = 90;
     $scope.num2 = 10;
});

這樣就完成了,你看看吧,有沒有像模型或積木一樣
有耶,真的是逐層建立起來的說
那後面我們會在簡易介紹一些AngularJS Directives方面的東西,讓你稍微有點概念


上一篇
[鐵人賽Day3]胡言亂語AngularJS 表達式(Expressions)
下一篇
[鐵人賽Day5]胡言亂語AngularJS 操作指令(Directives)(上卷)
系列文
不負責任系列,胡言亂語AngularJS快速上手8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言