【AngularJS】AngularJS 新手村(第一次使用Angular)

2014-04-25

3453
0
AngularJS

這幾天公司正在使用AngularJS，令原本跟前端絕緣的我開始頭痛...但是頭痛幾天後開始有了嶄新的發現！小弟就在這邊分享一下這幾天遇到的小問題，希望也可以幫助到剛開始接觸的朋友們
這幾天第一個遇到的問題是ngController，這個問題其實並不大，只是小弟我在使用的時候，不斷出現大量的錯誤...這邊分享幾個在Angularjs上幾個宣告Controller的方法
饅頭是第一次接觸AngularJS，本篇是在說明饅頭遇到的問題，分享給大家一起來學習入門，因為用過之後才知道這個有多好！不然饅頭常常在用jQuery來建立這些列表...也希望前輩們可以分享一些在AngularJS上學習的方式，造福饅頭

這幾天公司正在使用AngularJS，令原本跟前端絕緣的我開始頭痛...但是頭痛幾天後開始有了嶄新的發現！小弟就在這邊分享一下這幾天遇到的小問題，希望也可以幫助到剛開始接觸的朋友們

這幾天第一個遇到的問題是ngController，這個問題其實並不大，只是小弟我在使用的時候，不斷出現大量的錯誤...這邊分享幾個在Angularjs上幾個宣告Controller的方法

1. 直接宣告

這個方法是最簡單的宣告方法，只要你的View上會有這個Controller就會自動執行相對應的method！


<div ng-controller="Main">
@*  Html... *@
 </div>

function Main($scope) {


  //JavaScript Code
}

像這樣的宣告方法只要搭配這樣的JavaScript，就可以執行相對應的程式碼了！是否非常好上手呢？但是，世界上沒有這麼美好的事情...只少饅頭遇到的的狀況不適用這個...

2. 搭配模組宣告Controller

饅頭就是遇到這樣的問題，造成了錯誤許久...或許饅頭我沒有前端工程的天分吧！


<html ng-app="eMenu">
<head>
    
</head>
<body style="" ng-controller="Main">
    
</body>
</html>


var eMenu = angular.module("eMenu", []);
eMenu.controller('Main',  function Main($scope) {
    //JavaScript Code 
});

或者是...


eMenu.controller('Main', ['$scope', '$location',  function Main($scope, $location) {
//JavaScript Code
}]);

大家注意到了嗎，在html的tag上多了一個ng-app，所以饅頭在宣告controller前先做了一個宣告模組的動作，讓angularJS可以認識饅頭的網站；而這兩個JavaScript差別在於這中間有沒有注入了其他AngularJS的原件，如果你有需要用到其他的原件就緒要用到第二個的宣告方式，或是你開發了其他相關的AngularJS的物件可以引用到這個Controller中，像蠻頭就引用了$location


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

在module宣告中，第一個是你的app的名稱，第二個中括弧是放置這個模組包含了哪些的AngularJS的模組，Ex. ngRouter、ngResource...等等

接下來，饅頭覺得很神奇的東西....就是ng-repeat！


<div ng-repeat="item in data" class="col-md-12">
        <div class="col-md-3" >{{item.Account}}</div>
        <div class="col-md-9">{{item.Name}}</div>
</div>


    //JavaScript Code
    $http({
        method: 'GET',
        url: DataSource,
    }).success(function (data) {
        $scope.data = data;
    });

在饅頭的頁面上，只寫了這個樣子，但卻可以出現一整個的列表資料！但是饅頭後來發現這樣寫，在一開始的時候畫面會出現那些大括弧中的文字...我想讓使用這看到這樣子的東西應該很不專業吧？

後來饅頭有找到一個好方法來解決這個問題！

利用ng-Bind 讓大括弧消失！


<div ng-repeat="item in data" class="col-md-12">
        <div class="col-md-3" ng-Bind="item.Account"></div>
        <div class="col-md-9" ng-Bind="item.Name"></div>
</div>

如此一來惱人的大括弧就消失得無影無蹤了！

後記

饅頭是第一次接觸AngularJS，本篇是在說明饅頭遇到的問題，分享給大家一起來學習入門，因為用過之後才知道這個有多好！不然饅頭常常在用jQuery來建立這些列表...也希望前輩們可以分享一些在AngularJS上學習的方式，造福饅頭

參考資料

BiBBy前輩

http://blog.miniasp.com/post/2013/07/23/AngularJS-five-ways-to-register-ngController.aspx

大家好我是饅頭，希望大家喜歡我的文章

如果有錯誤的地方請不吝指教 ^_^

AngularJS

回首頁