Download as PDF, PPTX
![Core concpets of angular
Your main app module
'use strict';
angular.module('App', [])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});](https://image.slidesharecdn.com/workshop-131116111711-phpapp02/85/Yeoman-AngularJS-and-D3-A-solid-stack-for-web-apps-26-320.jpg)
![Core concepts of angular
Controller
Instantiation of a new controller object along with its child
scope
'use strict';
angular.module('App')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});](https://image.slidesharecdn.com/workshop-131116111711-phpapp02/85/Yeoman-AngularJS-and-D3-A-solid-stack-for-web-apps-28-320.jpg)
![Core concepts of angular
$scope
angular.module('App')
.controller('MainCtrl', function ($scope) {
$scope.hello = [
{ title:'me',color:'blue',value:2 },
{ title:'you',color:'red',value:0 }
];
$scope.btnClicked = function(){ ... };
$scope.falsy = false;
});
<!-- main.html-->
<ul ng-if="!falsy">
<li ng-repeat="item in hello" ng-click="btnClicked()">
<div ng-bind="item.title"></div>
<div>{{item.color}}</div>
<input type="number" ng-model="item.value"/>
</li>
</ul>](https://image.slidesharecdn.com/workshop-131116111711-phpapp02/85/Yeoman-AngularJS-and-D3-A-solid-stack-for-web-apps-31-320.jpg)
![Code for maps
var width = 960,
height = 500;
var projection = d3.geo.albersUsa()
.scale(1000)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var mapContainer = d3.select("#usaMap").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("/data/output.json", function(error, us) {
mapContainer.insert("path", ".graticule")
.datum(topojson.feature(us, us.objects.roads))
.attr("class", "land")](https://image.slidesharecdn.com/workshop-131116111711-phpapp02/85/Yeoman-AngularJS-and-D3-A-solid-stack-for-web-apps-49-320.jpg)
More Related Content
Similar to Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
- 1. Yeoman, AngularJS and D3.js Solid stackfor web apps Created by Oscar Villarreal / @climboid Suman Paul / @sumankpaul
- 2. Structure of thecourse Intros Dive into Yeoman Dive into Angular Dive into D3.js Projects throughout all points Master project using all 3 tools
- 3. Oscar Villarreal UI Lead JSGeneralist AngularJS D3JS CSS Rock climb oscarvillareal.com @climboid
- 4. Suman Paul UI Lead JSGeneralist AngularJS Grunt Yeoman CSS
- 5. Mexico and India Weare very similar in many ways, especially when it comes to working hard and being passionate about our teams
- 6. We need tobe more productive
- 7. We need to achieveutopia faster & better
- 8. How do weachieve a higher level of productivity? The secret sauce is in using the right tools
- 9. Using the righttools also means that we have the power to do things better and more organized with richer interactions
- 10. Start with yourworkflow
- 12. "A collection oftools and best practices working in harmony to make developing for the web even better" Allows you to quickly assemble files and folders along with boilerplate code. Uses grunt for all of its tasks Uses Bower for all of the project dependencies Via the use of generators one can scaffold projects very quickly
- 13. Grunt Takes care ofminification, compilation (sass, coffeescript), unit testing etc Automation
- 14. Bower A package managerfor the web, mainly front end packaging management.
- 15. Generator A way toinstantiate convention over configuration Boilerplate code
- 16. Who contributes toYeoman? Addy Osmani, Hemanth HM and some of the best in the world
- 17. How does Yeomanwork Live example
- 18. Lets install Yeoman Youwill need NodeJS Make sure you have git installed as well If you use SASS you will need ruby and compass Use this link for windows installs (courtesy of Suman Paul) npm install -g yo npm install -g generator-webapp npm install -g generator-angular
- 19. What is anMVC framework A pattern for your code that separates interaction and view Where does it come from? (smalltalk) How has it evolved in the front end DOJO Toolkit JavaScript MVC Backbone.js - Jeremy Ashkenas Spine.js Knockout.js MVVM Ember.js - Yehuda Katz & Tom Dale AngularJS - Misko Hevery
- 20.
- 21.
- 22. You can stillcreate a mess with angular... The key is to learn and understand what Angular is doing to avoid making a mess
- 23. Who contributes toAngular? Google Misko Hevery Igor Minar Vojta Jina Matias Niemela Brian Ford
- 24. The key inangular is always think about the data, not the DOM, the DOM will take care of its self so long as it is data binded with the corresponding $scope of a given controller
- 25. Core concepts ofangular the ng... ng-app="App" ng-view <!doctype html> <html> <head> <meta charset="utf-8"/> </head> <body ng-app="App"> <div class="container" ng-view></div> <script src="components/angular/angular.js"></script> <script src="scripts/app.js"></script> <script src="scripts/controllers/main.js"></script> </body> </html>
- 26. Core concpets ofangular Your main app module 'use strict'; angular.module('App', []) .config(function ($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .otherwise({ redirectTo: '/' }); });
- 27. Core concepts ofangular Router A router allows you to glue a controller to a view, creates a scope underneath that controller and maintains state within the app. $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .when('/directory', { templateUrl: 'views/directory.html', controller: 'DirectoryCtrl' }) .otherwise({ redirectTo: '/' });
- 28. Core concepts ofangular Controller Instantiation of a new controller object along with its child scope 'use strict'; angular.module('App') .controller('MainCtrl', function ($scope) { $scope.awesomeThings = [ 'HTML5 Boilerplate', 'AngularJS', 'Karma' ]; });
- 29. Core concepts ofangular View ng-view Templates that interpolate scope objects that are part of a given controller or are inherited prototypically. <div class="hero-unit"> <h1>'Allo, 'Allo!</h1> <p>You now have</p> <ul> <li ng-repeat="thing in awesomeThings">{{thing}}</li> </ul> <p>installed.</p> <h3>Enjoy coding! - Yeoman</h3> </div>
- 30. Core concepts ofangular $scope Keeps your logic contained to that controller unless you are using $rootScope $scope will allow you to interpolate its properties in a given view $scope.hello = "world" <div ng-bind="hello">...</div> <div>{{hello}}... </div> What gets rendered in the ... ?
- 31. Core concepts ofangular $scope angular.module('App') .controller('MainCtrl', function ($scope) { $scope.hello = [ { title:'me',color:'blue',value:2 }, { title:'you',color:'red',value:0 } ]; $scope.btnClicked = function(){ ... }; $scope.falsy = false; }); <!-- main.html--> <ul ng-if="!falsy"> <li ng-repeat="item in hello" ng-click="btnClicked()"> <div ng-bind="item.title"></div> <div>{{item.color}}</div> <input type="number" ng-model="item.value"/> </li> </ul>
- 32. Core concepts ofangular Services Something that spans multiple controllers and doesn't have a view tied to it. 'use strict'; angular.module('App') .service('Welcoming', function Calculations() { return{ sayHello: function(){ return 'hello' }, sayGoodbye: function(){ return 'goodbye' } } });
- 33. Core concepts ofangular Constants Maintained across the entire application. Can be injected as a service. Use this for constants within your application. 'use strict'; angular.module('App') .constant('Pi', 3.141516);
- 34. Core concepts ofangular Custom Directives UI components, charts, visualization... anything that has specific html conversion and needs to be part of the given scope. 'use strict'; angular.module('App') .directive('chart', function () { return { restrict: 'E', controller: function($scope, $element){ ... }, templateUrl: 'my-dialog.html', link: function (scope, element) { scope.name = 'Jeff'; } }; });
- 35. Goodies of Angularand Yeoman Karma test runner ngMin for minification / concatenation Live reload ...
- 36. Lets make anAngular app If you have Yeoman installed follow the presenter If you do not have Yeoman installed please clone this repo
- 37. What is thecanvas? <canvas> "magic" </canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript) Upon clicking you need to find X and Y and compare to elements inside of canvas Can be super charged for webGL (context 3d) If you need a lot of things in your visualization use Canvas for it will not kill the DOM Raster
- 38. Third party librariesfor Canvas Kinetic JS Fabric JS three JS
- 39. What is SVG? ScalableVector Graphics, vector image format for 2 dimensional graphics It is part of the DOM, can be styled using css Because its part of the DOM one can attach events to it via JavaScript Vectors can be scaled and because of that they will look beautifully on retina displays Ability to use images as SVG format and even fonts
- 40. Third party librariesfor SVG D3.js Raphael Bonsai JS
- 41. Why choose D3.js Fullpower and control over every single vector drawn Extremely easy to data bind Extremely easy to bind events Its vectors so its works beautifully on all displays Huge support from community
- 42.
- 43. Who's behind D3.js MikeBostock Jason Davies many others "I suggest keeping an eye on the work of Bret Victor and Mike Bostock. Both are cutting edge. Bret Victor visualises programming, sees and thinks beautifully, just starting to blossom (see worrydream.com). Mike Bostock (see bost.ocks.org) developed the open-source D3, Data-Driven Documents (d3js.org)." Edward Tufte
- 44. Structure of aD3 visualization Include the library svg container <svg> "magic" <svg> Create your scales using the right domain and range Some boiler plate for your svg container Create SVG items Data bind the SVG item attributes Enter, update, exit
- 45.
- 46. Things to knowabout when using D3 SVG (elements & attributes) Scales (linear, log, exp, ordinal, ... ) Utility functions (max, min, extent, ...) Boilerplate process
- 47.
- 48.
- 49. Code for maps varwidth = 960, height = 500; var projection = d3.geo.albersUsa() .scale(1000) .translate([width / 2, height / 2]); var path = d3.geo.path() .projection(projection); var mapContainer = d3.select("#usaMap").append("svg") .attr("width", width) .attr("height", height); d3.json("/data/output.json", function(error, us) { mapContainer.insert("path", ".graticule") .datum(topojson.feature(us, us.objects.roads)) .attr("class", "land")
- 50. Lets create ourfinal repo! Create an angular application using Yeoman That app should have two routes, main and aboutUs, create them using the generator Include d3 using bower Insert the d3 code into a directive Insert the directive into the aboutUs route