├── css ├── img │ └── search-icon.png └── main.css ├── js ├── vendor │ └── angular-ui │ │ ├── assets │ │ ├── select2.png │ │ ├── github-16px.png │ │ ├── app.js │ │ ├── rainbow.css │ │ ├── rainbow-generic.js │ │ ├── rainbow-html.js │ │ ├── plunker.js │ │ ├── demo.css │ │ ├── rainbow-javascript.js │ │ ├── ui-select2.js │ │ ├── select2.css │ │ ├── bootstrap-responsive.css │ │ └── rainbow.js │ │ ├── img │ │ ├── glyphicons-halflings.png │ │ └── glyphicons-halflings-white.png │ │ ├── ui-bootstrap-0.2.0.min.js │ │ └── ui-bootstrap-tpls-0.2.0.min.js ├── widgets │ └── search │ │ ├── template │ │ └── search.tpl.html │ │ ├── SearchBootstrap.js │ │ ├── Search.js │ │ ├── SearchController.js │ │ └── SearchDirective.js ├── bootstrap.js ├── controllers │ └── AppController.js ├── main.js └── helpers │ └── symbolhelper.js ├── .gitignore ├── readme.md └── index.html /css/img/search-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/odoe/angular-esri/HEAD/css/img/search-icon.png -------------------------------------------------------------------------------- /js/vendor/angular-ui/assets/select2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/odoe/angular-esri/HEAD/js/vendor/angular-ui/assets/select2.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | output/* 3 | *~ 4 | *.swp 5 | .cache/* 6 | .grunt/* 7 | .idea/* 8 | build/* 9 | *.lnk 10 | *ugly.js -------------------------------------------------------------------------------- /js/vendor/angular-ui/assets/github-16px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/odoe/angular-esri/HEAD/js/vendor/angular-ui/assets/github-16px.png -------------------------------------------------------------------------------- /js/vendor/angular-ui/img/glyphicons-halflings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/odoe/angular-esri/HEAD/js/vendor/angular-ui/img/glyphicons-halflings.png -------------------------------------------------------------------------------- /js/vendor/angular-ui/img/glyphicons-halflings-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/odoe/angular-esri/HEAD/js/vendor/angular-ui/img/glyphicons-halflings-white.png -------------------------------------------------------------------------------- /js/widgets/search/template/search.tpl.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # ArcGIS JavaScript API with Angular JS 2 | This is a sample application I've put together to use [AngularJS](http://angularjs.org/) with the [ArcGIS JavaScript API](http://help.arcgis.com/en/webapi/javascript/arcgis/). 3 | 4 | # Demo 5 | [Working demo](http://www.odoe.net/apps/angular-esri/) 6 | -------------------------------------------------------------------------------- /js/widgets/search/SearchBootstrap.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author rrubalcava@odoe.net (Rene Rubalcava) 3 | */ 4 | /*global define:true*/ 5 | 6 | (function() { 7 | "use strict"; 8 | 9 | define([ 10 | 'widgets/search/Search', 11 | 'widgets/search/SearchController', 12 | 'widgets/search/SearchDirective' 13 | ], function(Search, SearchController, SearchDirective) { 14 | 15 | function init(App) { 16 | Search.start(App); 17 | SearchController.start(App); 18 | SearchDirective.start(App); 19 | } 20 | 21 | return { start: init }; 22 | 23 | }); 24 | 25 | }).call(this); -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | #map { 2 | position: absolute; 3 | padding: 0; 4 | top: 0; 5 | left: 0; 6 | right: 0; 7 | bottom: 0; 8 | } 9 | 10 | div.search-container { 11 | position: absolute; 12 | display: block; 13 | z-index: 2; 14 | right: 5px; 15 | width: 350px; 16 | top: 7px !important; 17 | } 18 | 19 | input.search-input { 20 | position: relative; 21 | z-index: 3; 22 | width: 350px; 23 | font-size: 1.2em; 24 | border: 2px solid #34495e; 25 | float: right; 26 | line-height: 25px; 27 | padding-left: 30px; 28 | color: gray; 29 | background-image: url("img/search-icon.png"); 30 | background-repeat: no-repeat; 31 | background-position-x: 0.5em; 32 | background-position-y: 50%; 33 | } 34 | -------------------------------------------------------------------------------- /js/bootstrap.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author rrubalcava@odoe.net (Rene Rubalcava) 3 | */ 4 | /*global define:true */ 5 | 6 | (function() { 7 | "use strict"; 8 | 9 | define([ 10 | 'angular', 11 | 'controllers/AppController', 12 | 'widgets/search/SearchBootstrap' 13 | ], function(angular, AppController, SearchBootstrap) { 14 | 15 | function init() { 16 | var App = angular.module('app', ['ui.bootstrap']); 17 | AppController.start(App); 18 | SearchBootstrap.start(App); 19 | // need to bootstrap angular since we wait for dojo/DOM to load 20 | angular.bootstrap(document.body, ['app']); 21 | return App; 22 | } 23 | 24 | return { start: init }; 25 | 26 | }); 27 | 28 | }).call(this); -------------------------------------------------------------------------------- /js/controllers/AppController.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author rrubalcava@odoe.net (Rene Rubalcava) 3 | */ 4 | /*global define:true*/ 5 | 6 | (function() { 7 | "use strict"; 8 | 9 | define([ 10 | 'angular', 11 | 'esri/map' 12 | ], function(angular, Map) { 13 | 14 | function mapConfigs() { 15 | return { 16 | basemap: 'streets', 17 | center: [-118.1704035141802,34.03597014510993], 18 | zoom: 15 19 | }; 20 | } 21 | 22 | function mapGen(elem) { 23 | return new Map(elem, mapConfigs()); 24 | } 25 | 26 | function AppController($scope) { 27 | $scope.map = mapGen('map'); 28 | } 29 | 30 | function init(App) { 31 | App.controller('AppCtrl', ['$scope', AppController]); 32 | return AppController; 33 | } 34 | 35 | return { start: init }; 36 | 37 | }); 38 | 39 | }).call(this); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | angular-esri 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /js/vendor/angular-ui/assets/app.js: -------------------------------------------------------------------------------- 1 | 2 | angular.module('bootstrapDemoApp', ['ui.directives', 'ui.bootstrap', 'plunker']); 3 | 4 | function MainCtrl($scope, $http, orderByFilter) { 5 | var url = "http://50.116.42.77:3001"; 6 | $scope.selectedModules = []; 7 | //iFrame for downloading 8 | var $iframe = $("