git clone
https://github.com/marcin-wosinek/workshop-1.gitgit config --global alias.tree "log --oneline --graph --decorate --all"
git checkout slide-1
## ng-include
* git checkout slide-2
* dynamiczne wczytywanie części widoku
* pliki: views/main.html & index.html +7
```html
<!-- index.html -->
<div ng-include src="'views/main.html'">
</div>
<!-- views/main.html -->
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello !</h1>
$scope.title
będzie dostępny jako w widokugit checkout slide-3
<br>
<div ng-controller="InputCtrl">
<input ng-model="sharedData.value" />
<p></p>
</div>
workshop.controller("HelloCtrl", function($scope) {
$scope.helloMessage = "Hello world";
});
git checkout todo-1
git add .
git commit -m '(commit message)'
git checkout done-1
<div ng-controller="MenuCtrl">
<a ng-href=""></a>
</div>
workshop.controller("MenuCtrl", function($scope) {
$scope.href = "http://google.pl";
$scope.text = "go to google";
});
$routeProvider
.when("/hello", {
templateUrl: "views/hello.html",
controller: "HelloCtrl"
})
.otherwise({
redirectTo: '/main'
});
<ul>
<li ng-repeat="project in projects">
<a href=""></a>:
</li>
</ul>
git checkout todo-2
var object = {};
var array = [];
var arrayOfObjects = [
{
lorem: 1,
ipsum: 2
},
{
test: 4
}
]
git add .
git commit -m '(commit message)'
git checkout done-2
<li ng-repeat="link in links">
<a ng-href=""></a>
</li>
$scope.links = [
{
url: '#/main',
text: 'Main'
}]
git checkout todo-3
git add .
git commit -m '(commit message)'
git checkout done-3
workshop.controller("ListCtrl", function($scope) {
// checkout http://www.json-generator.com/
$scope.list = [
{
"firstName": "Serenity",
"lastName": "Oldridge",
"picture": "http://placehold.it/70x70/632955",
<table>
<tr><th>Picture</th><th>Firstname</th><th>Lastname</th><th>Age</th><th>Gender</th><tr>
<tr ng-repeat="person in list">
<td><img ng-src=''></td>
git checkout slide-5
<tr ng-repeat="person in list | orderBy:'lastName'">
<td><img ng-src=''></td>
git checkout todo-4
git add .
git commit -m '(commit message)'
git checkout done-4
First name: <input ng-model="orderKey" type='radio' value='firstName'/><br/>
Last name: <input ng-model="orderKey" type='radio' value='lastName'/><br/>
git checkout slide-6
<tr ng-repeat="person in list | orderBy:orderKey | filter:'oo'"
{expresion} zwraca:
git checkout todo-5
git add .
git commit -m '(commit message)'
git checkout done-5
Everywhere: <input ng-model="search.$" type='text'/><br/>
First name: <input ng-model="search.firstName" type='text'/><br/>
Last name: <input ng-model="search.lastName" type='text'/><br/>
git checkout slide-7
$scope.name = function () {
return $scope.firstName + " " + $scope.lastName;
}
$scope.counter = 0;
$scope.valueUpdated = function () {
$scope.counter++;
};
<h1>Hello !</h1>
<input type="text" ng-change="valueUpdated()" ng-model="value" placeholder="Edit me">
git checkout slide-8
<form name="exampleForm">
Required field: <input ng-model="required" required/><br>
Email field: <input ng-model="email" type="email" required/><br>
<button ng-disabled='!exampleForm.$valid'>Submit</button>
</form>
git checkout todo-6
git add .
git commit -m '(commit message)'
git checkout done-6
<form>
Picture: <input ng-model="newPerson.picture" type='text' placeholder="http://"/><br/>
First name: <input ng-model="newPerson.firstName" type='text'/><br/>
Last name: <input ng-model="newPerson.lastName" type='text'/><br/>
$scope.add = function () {
$scope.list.push($scope.newPerson);
$scope.newPerson = {};
}
git checkout slide-9
$scope.firstName = 'Jan';
$scope.lastName = 'Kowalski';
<input type="text" ng-model="firstName" placeholder="Enter a first name here">
<input type="text" ng-model="lastName" placeholder="Enter a last name here">
git checkout slide-10
// Create serices
workshop.factory("SharedData", function(){
return {
value: "Example value"
};
});
git checkout todo-7
git add .
git commit -m '(commit message)'
git checkout done-7
workshop.factory("People", function() {
return [ {"firstName": "Serenity" /*...*/}];
workshop.controller("ListCtrl", function($scope, People) {
$scope.list = People;
{
"about": "I'm an object",
"structure": {
"key": "value"
},
"arrays": [ "I", "can", "keep", "them", "too" ]
}
[
{
"objectId": 1
},
{
"objectId": 2
},
{
"objectId": 3
}
]
var userResource = $resource('/user/:userId', {});
userResource.get({userId: 1});
git checkout slide-11
workshop.factory("People", function($resource){
var peopleResource = $resource('data/people', {});
return peopleResource.query();
});
Pierwsze warsztaty będą wprowadzeniem do świata frontendowych aplikacji. Następne spotkania będą poruszać takie tematy, jak: