[Liferay] Create Liferay portlet with front end use AngularJS
Why AngularJS? HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
So easy to create liferay portlet with front end use Angularjs. You need only copy your code below into the portlet view.jsp. And It works for you!
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>That 's it!
<p>This is the <b>liferay6.2</b>.- Liferay portlet with angularjs</p>
<div ng-app="phoneApp">
<div ng-controller="PhoneCtrl">
<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="phone in phones ">
{{ phone.name }}
<p>{{ phone.snippet }}</p>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var phonecatApp = angular.module('phonecatApp', []); phonecatApp.controller('PhoneListCtrl',['$scope', function ($scope) {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.',
'age': 1},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.',
'age': 2},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.',
'age': 3}
];
$scope.orderProp = 'age';
}]);
</script>
