Friday, October 16, 2015

ANGULAR - left menu, multiple controllers

https://www.codecademy.com/courses/javascript-advanced-en-2hJ3J/1/1#

index.html
<!doctype html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
        <script src="app.js"></script>
        <script src="user.js"></script>
        <script src="menu.js"></script>
        <script src="content.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body ng-app="exampleApp">
        <header ng-controller="userCtrl">Welcome {{user}}!</header>
        <nav ng-controller="menuCtrl">
            <h2>Menu</h2>
            <ul>
                <li ng-repeat="link in links">{{link}}</li>
            </ul>
        </nav>
        <article ng-controller="contentCtrl">
            <h1>{{title}}</h1>
            <hr />
            <p>{{paragraph}}</p>
            <small >by {{author}}</small>
        </article>
    </body>
</html>

app.js
// Defining a module
angular.module('exampleApp', []);

user.js
angular.module('exampleApp')
    .controller('userCtrl', function ($scope) {
        $scope.user = "Jan Kowalski";
    });

menu.js
angular.module('exampleApp')
    .controller('menuCtrl', function ($scope) {
        $scope.links = ['Link 1', 'Link 2'];
    });

content.js
angular.module('exampleApp')
    .controller('contentCtrl', function ($scope) {
        $scope.title = "Lorem Ipsum";
        $scope.paragraph = "Completely myocardinate process-centric "
        + "total linkage whereas installed base e-tailers. "
        + "Proactively extend collaborative intellectual capital "
        + "vis-a-vis unique expertise. Dynamically.";
        $scope.author = "Anna Nowak";
    });

style.css
body {
    width: 500px;
}

nav {
    float: left;
    width: 30%;
}

article {
    margin-left: 30%;
    width: 70%;
}

No comments: