Angular UX is a library that helps you create live, navigable prototypes with the help of AngularJS but without having to learn how to code ;). **DESIGNERS, I'm looking at you!**
Angular UX is a library that helps you create live, navigable prototypes with the help of AngularJS but without having to learn how to code ;). DESIGNERS, I'm looking at you!
You have several options:
bower install angular-ux
npm install angular-ux
<script type="text/javascript" src="https://rawgit.com/mgonto/angular-ux/master/dist/angular-ux.js"></script>
The first thing we need to do is setup a new index.html which will be the point of entry for our app.
Besides linking to the specific CSS and JS files we need for our prototype, we always need to reference jQuery, angular.js, angular-animate and angular-ux in that order.
We also need some way of serving the directory where the
index.htmland the other files will reside. For that, we can usenpmcommandserveorpython -M SimpleHTTPServer
Now, we need to setup the Angular application. This will be the only javascript we need to code to have our prototype running. The good thing is that it’s just copy and paste ;).
<body ng-app=“prototype” ng-ctrl=“MainCtrl”>
</body>
// app.js
angular.module(‘prototype’, [‘ngAnimate’, ‘ux’])
.controller(‘MainCtrl’, function($scope) {
$scope.data = {};
});
The first thing all prototypes need is the ability to navigate through different pages.
For this, we can use the ux-page directive.
<body>
<ux-page name=“Home” home>
<ng-include src=“’home.html’”></ng-include>
</ux-page>
<ux-page name=“Details”>
<ng-include src=“’detail.html’”></ng-include>
</ux-page>
</body>
<!-- home.html -->
<!-- ... -->
<a href=“” ux-go=“Details”>Go to Details page</a>
In this case, we’re creating 2 different pages. The content of each of those pages are in separate files which we’re including using the ng-include directive. Note that we added the home attribute to the ux-page that will be the main one (displayed by default).
Then, in the home.html, we have a link that navigates the user to the Details page. For that, we’re using the ux-go directive with the name of the page that we want to browse to.
Note: It’s important to note that you must put the
href=“”in the link so that it’s clickable.
When you’re prototyping you want to try different themes (colors, typographies, sizes, etc.) at the same time to see which one works better.
For that, you can use a the ux-themeable feature from angular-ux:
<div class=“content” ux-themeable>
<h1>Title</h1>
<p>This is some text</p>
</div>
First you need to add the ux-themeable directive to the parent HTML element that you want to theme. Then, to change themes, you need to specify the theme name as a query parameter in the prototype URL. For example, if you go to http://localhost:3000/#/?page=Details&uxTheme=option1, the div.content will end up having an additional class named option1 which means we can style it as follows:
div.content.option1 h1 {
font-size: 38px;
}
div.content.option1 p {
color: red
}
Alternatively, you can set the query parameter to use for this ux-themeable as follows:
<div class=“content” ux-themeable="contentTheme">
<h1>Title</h1>
<p>This is some text</p>
</div>
Then, the URL to add option1 class to div.content would be http://localhost:3000/#/?page=Details&ucontentTheme=option1
You can see a live example in the example folder.
To start the sample, just run serve or python -M SimpleHTTPServer on the repository root and then go to http://localhost:3000/example/
MIT
FAQs
Angular UX is a library that helps you create live, navigable prototypes with the help of AngularJS but without having to learn how to code ;). **DESIGNERS, I'm looking at you!**
We found that angular-ux demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.