如何組織我的第一個angularJS簡單項目？

我的目標是使用AngularJS創建一個SPA。我知道AngularJS的概念，但我缺乏規劃整個項目的經驗，因爲我從來沒有用它創建過真正的項目。如何組織我的第一個angularJS簡單項目？

該模板非常簡單：頂部有一個導航頭（該開關可以是用戶登錄或不登錄）以及網站的內容。

頭部有2次（取決於用戶是否是loggedon與否）和容器有許多意見（圖片庫，視頻庫等）

也可以有一個簡單的頁腳，工作以同樣的方式作爲標題。

enter image description here

1）我應該使用1個整個網站全球CONTROLER或有headerController和的ContainerController？

2）這兩個控制器有通信嗎？（例如：標題控制器存儲已登錄用戶的用戶名和密碼）？

也許有人可以提供這樣一個網站AngularJS arhcitecture一個簡單的存根（stub）？

問候

來源

2014-08-28 yarek

你可以（也應該）使用「全球」控制器，控制頂層視圖和範圍，以及其他的控制器可以控制有其自己的行爲每個組件。

<!DOCTYPE html> 
<html data-ng-app="myapp"> 
<head> 
    <!-- ... --> 
</head> 
<body data-ng-controller="BodyCtrl"> 

<section id="navbar" data-ng-controller="NavbarCtrl"> 
    <!-- ... --> 
</section> 

<section id="content" data-ng-controller="ContentCtrl"> 
    <div data-ng-controller="FirtSubCtrl"> 
     <!-- ... --> 
    </div> 
    <div data-ng-controller="SecondSubCtrl"> 
     <!-- ... --> 
    </div> 
</section> 

</body> 
</html>

控制器可以使用事件在它們自己之間進行通信，但它應該用於受限制的情況。相反，您應該編寫一些服務（或工廠，值，提供者）來將共享邏輯封裝在您的應用程序（和共享對象）中。然後，您可以在需要它的每個控制器中注入任何服務。

angular.module('myapp',[]) // define the myapp module 

.factory('myService', ['', function(){ // define a service to share objects and methods 

    var _myLogic = function(){ 
     // ... 
     return ret; 
    }; 

    var _myObject = { 
     prop1: "my first prop value", 
     prop2: "my second prop value" 
    }; 

    return { 

     myLogic: _myLogic, 
     myObject: _myObject 

    }; 
}]) 

.controller('BodyCtrl', ['$scope', 'myService', function($scope, myService){ 

    $scope.myScopeMethod = myService.myLogic; 

    $scope.myObject = myService.myObject; 

}]) 

.controller('FirtSubCtrl', ['$scope', 'myService', function($scope, myService){ 

    $scope.myScopeMethod = myService.myLogic; 

    $scope.myObject = myService.myObject; 

}]) 

;

在這裏，你可以看到，兩個控制器可以共享精確（或不）對象或方法，注入所述的共享服務。

與NG-視圖處理手段處理模板：

在這裏，你指數：

<!-- index.html --> 
<!DOCTYPE html> 
<html data-ng-app="myapp"> 
    <head> 
     <!-- ... --> 
    </head> 
    <body data-ng-controller="BodyCtrl"> 

     <section id="navbar" data-ng-controller="NavbarCtrl"> 
      <!-- ... --> 
     </section> 

     <ng-view></ng-view> 

    </body> 
</html>

而且你的觀點：

<!-- template/contentIfLogged.html --> 
<section id="contentIfLogged" data-ng-controller="ContentCtrl"> 
    <div data-ng-controller="FirtSubCtrl"> 
     <!-- ... --> 
    </div> 
    <div data-ng-controller="SecondSubCtrl"> 
     <!-- ... --> 
    </div> 
</section>

和

<!-- template/contentIfNOTLogged.html --> 
<section id="contentIfNOTLogged" data-ng-controller="Content2Ctrl"> 

    <div data-ng-controller="ThirdSubCtrl"> 
     <!-- ... --> 
    </div> 
    <div data-ng-controller="FourthSubCtrl"> 
     <!-- ... --> 
    </div> 

</section>

現在，你必須配置你r路線啓用正確的視圖，onevent或按鈕點擊。現在

angular.module('myapp').config(function($routeProvider){ 
    $routeProvider 
     .when('/notlogged', 
      {templateUrl: 'template/contentIfLogged.html'} 
     ) 
     .when('/logged', 
      {templateUrl: 'template/contentIfNOTLogged.html'} 
     ) 
     .otherwise({redirectTo: '/notlogged'}) 
});

，在你<section id="nav">元素，你可以添加這些按鈕：

<section id="navbar" data-ng-controller="NavbarCtrl"> 
    <a class="btn" href="#logged"> 
     Logged view 
    </a> 
    <a class="btn" href="#notlogged"> 
     Not logged view 
    </a> 
</section>

，然後，點擊它你的視圖之間切換。

或者programmaticaly，在你的控制器（或服務），您可以切換使用$位置角服務：

.controller('NavbarCtrl', ['$scope', '$location', 'myService', function($scope, $location, myService){ 

    $scope.myScopeMethod = myService.myLogic; 

    $scope.myObject = myService.myObject; 

    var login = function(){ 
     $location.path('/logged'); 
    }; 
    var logout = function(){ 
     $location.path('/notlogged'); 
    }; 

}])

你來填補國內空白，滿足您的應用，但由於基數組織你的簡單應用程序在那裏。

來源

2014-08-28 10:34:04

您現在可以檢查 – 2014-08-28 11:16:48

對我來說更清楚除了：網站內容的視圖在哪裏？（模板中的綠框）N – yarek 2014-08-28 11:41:10

該視圖由index.html中的''提供（請參閱我的answe中的第二個HTML代碼塊）。該元素將被替換爲* partial *模板'template/contentIfLogged.html'和'template/contentIfNotLogged.html'。在我的例子中，你有一個很大的看法，提供網站的內容，這是由部分或其他。 – 2014-08-28 12:03:58

如何組織我的第一個angularJS簡單項目？

回答

相關問題