PANIOV: 10/16/15

Friday, October 16, 2015

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%;
}

PANIOV

Friday, October 16, 2015

ANGULAR - add logo image in navbar

ANGULAR - 15 Best AngularJS Tutorials for Developers

ANGULAR - left menu, multiple controllers