Skip to content

Instantly share code, notes, and snippets.

@paunin

paunin/frontend-app_angtest.html

Last active August 29, 2015 14:07
Show Gist options
  • Save paunin/9b7fd2fe1042d8a671a1 to your computer and use it in GitHub Desktop.
Save paunin/9b7fd2fe1042d8a671a1 to your computer and use it in GitHub Desktop.
Download ZIP
Angular mix
Raw
frontend-app_angtest.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.26/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app2">
<div ng-controller="SayHelloController as hello">
<button ng-click="sayHello('Dima')" ng-dblclick="sayHello('Dima',true)">{{text}}</button>
</div>
<h1>Router</h1>
<a href="#/route1/">Route 1</a> |
<a ng-href="#/route2/1/Dima">Route 2</a>
<div ng-view></div>
</body>
</html>
Raw
frontend-app_app.js
angular.module('app', [])
.provider('helloService', function () {
var config = {
symbol: '!'
};
return {
setConfig: function (symbol) {
config.symbol = symbol;
},
$get: ['$http', '$q', '$log', function ($http, $q, $log) {
return {
say: function (name) {
return ('Hello ' + name + config.symbol);
},
sayAgain: function (name) {
var allqueries = $q.all([
$http.get('./index.html'),
$http.get('./index.html')
]);
allqueries.then(
function (data) {
$log.info('HTTP Query ' + data[0].data)
},
function (data) {
$log.warn('Wrong http query!')
});
return ('Hello again ' + name + config.symbol);
}
}
}]
}
});
angular.module('app2', ['app', 'ngRoute'])
.config(function (helloServiceProvider) {
helloServiceProvider.setConfig('! :)')
})
.config(function ($routeProvider) {
$routeProvider
.when('/route1/', {
templateUrl: 'tpls/route1.html'
})
.when('/route2/:userid/:username', {
templateUrl: 'tpls/route2.html',
controller: 'UserController',
resolve: {
username: function ($route) {
return $route.current.params.username;
}
}
})
.otherwise({
templateUrl: 'tpls/noroute.html'
})
})
.config(function ($locationProvider) {
//$locationProvider.html5Mode(true);
})
.controller('SayHelloController', ['$scope', 'helloService','$rootScope', function ($scope, helloService, $rootScope) {
$scope.text = 'HI!';
$scope.sayHello = function (name, again) {
$rootScope.$broadcast('myEvent','Event root parameter');
$scope.$broadcast('myEvent','Event parameter');
$scope.text = again && helloService.sayAgain(name) || helloService.say(name);
console.log(helloService.say(name));
};
}])
.controller('UserController', ['$scope', 'helloService', '$routeParams', 'username',
function ($scope, helloService, $routeParams, username) {
$scope.username = username;
$scope.params = JSON.stringify($routeParams);
$scope.sayHello = function () {
alert($scope.helloText());
};
$scope.helloText = function () {
return 'Hello Mr.' + $scope.username
};
}])
.controller('DirectiveController',
function () {
this.sayYes = function () {
alert('Yes');
};
})
.directive('myDirective', function () {
return {
restrict: 'E',
scope: {
username: '@',
helloText: '&'
},
templateUrl: 'tpls/directive.html',
controller: ['$log', '$scope', function ($log, $scope) {
this.makeDirective = function (text) {
$log.info(text+'[1]');
};
$scope.makeDirective = this.makeDirective;
}]
}
})
.directive('myDirective2', function () {
return {
restrict: 'E',
require: '^myDirective',
scope:{
makeDirective2: '&makeDirective',
helloText2: '&helloText',
username: '@'
},
link: function(scope, element, attr, ctlr){
scope.$on('myEvent', function(event, param){
console.log('catch event from scope '+param)
});
element.find('button').css({color : 'red'});
scope.make = function(text){
ctlr.makeDirective(text+ '[2]');
};
},
templateUrl: 'tpls/directive2.html'
}
});
Raw
frontend-app_test2.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.26/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app2">
<div ng-controller="SayHelloController as hello">
<button ng-click="sayHello('Dima')" ng-dblclick="sayHello('Dima',true)">{{text}}</button>
</div>
<h1>Router</h1>
<a href="#/route1/">Route 1</a> |
<a ng-href="#/route2/1/Dima">Route 2</a>
<div ng-view></div>
</body>
</html>
Raw
frontend-app_tpls_directive.html
<button ng-click="makeDirective(helloText())">I.m.directive MAKE FUN</button>
<my-directive2 make-directive="makeDirective(helloText())" hello-text="helloText()"></my-directive2>
Raw
frontend-app_tpls_directive2.html
<button ng-click="make(helloText2())">I.m.directive 2 button</button>
<button ng-click="makeDirective2(helloText2())">I.m.directive 2 button but run directive 1</button>
Raw
frontend-app_tpls_route2.html
<h2>Route {{1+1}}</h2>
<div>{{params}}</div>
<div>{{username}}</div>
<button ng-click="sayHello()">Say hello from params</button>
<my-directive username="{{username}}" hello-text="helloText()"></my-directive>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment