Question

我的目标是使用AngularJS创建SPA。我知道AngularJS的概念，但是我缺乏规划整个项目的经验，因为我从未用它创建过一个真实的项目。

模板非常简单：顶部有一个导航标题（用户登录或不登录）和网站内容。

标题有2个视图（取决于用户是否登录），容器有很多视图（照片库，视频库等......）

可能还有一个简单的页脚，其工作方式与标题相同。

enter image description here

1）我应该为整个网站使用1个全局控制器还是有一个headerController和containerController？

2）这两个控制器会沟通吗？（例如：头控制器存储登录用户的用户名和密码）？

也许有人可以为这样的网站提供AngularJS arhcitecture的简单存根？

此致

Answer 1

你可以（并且应该）使用＆＃34;全球＆＃34;控制器，控制顶级视图和范围，以及其他控制器可以控制每个具有自己行为的组件。

<!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-view意味着处理模板：

在这里你索引：

<!-- 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>

现在，您必须配置路由以启用正确的视图，单击或单击按钮。

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，在您的控制器（或服务）中，您可以使用$ location角度服务进行切换：

.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');
    };

}])

要填补空白以适应您的应用程序，但您的简单应用程序的基本组织就在那里。

如何组织我的第一个angularJS简单项目？

1 个答案: