Created
July 18, 2014 19:40
-
-
Save aalinat/d93f278979d90b96ee79 to your computer and use it in GitHub Desktop.
angular + ruby on rails demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var app = angular.module('TestAngular', ['ngCookies','ngRoute', 'ngAnimate']) | |
| .config(['$routeProvider', '$locationProvider', | |
| function($routeProvider, $locationProvider) { | |
| $routeProvider | |
| .when('/Book/:bookId', { | |
| templateUrl: '/angular/book', | |
| controller: 'BookCtrl', | |
| controllerAs: 'book' | |
| }) | |
| .when('/Book/:bookId/ch/:chapterId', { | |
| templateUrl: '/angular/chapter', | |
| controller: 'ChapterCtrl', | |
| controllerAs: 'chapter' | |
| }); | |
| // configure html5 to get links working on jsfiddle | |
| $locationProvider.html5Mode(true); | |
| }]); | |
| app.controller('Numbers', function($scope,$http,$cookieStore){ | |
| $scope.alert = function(text) | |
| { | |
| alert(text); | |
| } | |
| $scope.count = $cookieStore.get('count'); | |
| $scope.SaveCookie = function(){ | |
| $cookieStore.put('count',$scope.count); | |
| } | |
| $scope.PrintCookie = function(){ | |
| alert($cookieStore.get('count')); | |
| } | |
| $scope.Increment = function() | |
| { | |
| $scope.count = $scope.count +1; | |
| $scope.SaveCookie(); | |
| } | |
| $http({method: 'GET', url: '/angular/Get.json'}). | |
| success(function(data, status, headers, config) { | |
| // this callback will be called asynchronously | |
| // when the response is available | |
| $scope.response = data.message; | |
| }). | |
| error(function(data, status, headers, config) { | |
| // called asynchronously if an error occurs | |
| // or server returns response with an error status. | |
| console.log(data); | |
| }); | |
| }); | |
| app.controller('MainCtrl', ['$route', '$routeParams', '$location', | |
| function($route, $routeParams, $location) { | |
| this.$route = $route; | |
| this.$location = $location; | |
| this.$routeParams = $routeParams; | |
| }]) | |
| .controller('BookCtrl', ['$routeParams', function($routeParams) { | |
| this.name = "BookCtrl"; | |
| this.params = $routeParams; | |
| }]) | |
| .controller('ChapterCtrl', ['$routeParams', function($routeParams) { | |
| this.name = "ChapterCtrl"; | |
| this.params = $routeParams; | |
| }]); | |
| app.controller('ExampleController',function($scope) { | |
| $scope.text = '[email protected]'; | |
| }); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class AngularController < ApplicationController | |
| def Index | |
| end | |
| def Get | |
| respond_to do |format| | |
| msg = { :status => "ok", :message => "Success!", :html => "<b>Hello</b>" } | |
| format.json { render :json => msg } # don't do msg.to_json | |
| end | |
| def book | |
| end | |
| def chapter | |
| end | |
| end | |
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .view-animate-container { | |
| position:relative; | |
| height:100px!important; | |
| position:relative; | |
| background:white; | |
| border:1px solid black; | |
| height:40px; | |
| overflow:hidden; | |
| } | |
| .view-animate { | |
| padding:10px; | |
| } | |
| .view-animate.ng-enter, .view-animate.ng-leave { | |
| -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; | |
| transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; | |
| display:block; | |
| width:100%; | |
| border-left:1px solid black; | |
| position:absolute; | |
| top:0; | |
| left:0; | |
| right:0; | |
| bottom:0; | |
| padding:10px; | |
| } | |
| .view-animate.ng-enter { | |
| left:100%; | |
| } | |
| .view-animate.ng-enter.ng-enter-active { | |
| left:0; | |
| } | |
| .view-animate.ng-leave.ng-leave-active { | |
| left:-100%; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="TestAngular"> | |
| <head> | |
| <title>Angular2</title> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-cookies.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-animate.min.js"></script> | |
| <link href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.2.0+1/custom/bootstrap.min.css" rel="stylesheet"/> | |
| <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> | |
| <%= javascript_include_tag "application", "data-turbolinks-track" => true %> | |
| <%= csrf_meta_tags %> | |
| </head> | |
| <body > | |
| <%= yield %> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| controller: {{book.name}}<br /> | |
| Book Id: {{book.params.bookId}}<br /> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| controller: {{chapter.name}}<br /> | |
| Book Id: {{chapter.params.bookId}}<br /> | |
| Chapter Id: {{chapter.params.chapterId}} | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Angular</h1> | |
| <div ng-controller="Numbers" ng-cloak> | |
| <button ng-click="SaveCookie()">Save Cookie</button> | |
| <button ng-click="PrintCookie()">Print Cookie</button> | |
| <button ng-click="Increment()">Increment</button> | |
| count: {{count}} | |
| <p> | |
| <button ng-click="alert('hello');">Say Hello</button> | |
| </p> | |
| {{response}} | |
| </div> | |
| <p> | |
| <form name="myForm" ng-controller="ExampleController"> | |
| <div class="form-group" show-errors> | |
| <label class="control-label">Email</label> | |
| <input type="email" class="form-control" placeholder="Name" name="input" ng-model="text" required/> | |
| <span class="error" ng-show="myForm.input.$error.required"> | |
| Required!</span> | |
| <span class="error" ng-show="myForm.input.$error.email"> | |
| Not valid email!</span> | |
| </div> | |
| </form> | |
| </p> | |
| <h1>Single</h1> | |
| <div ng-controller="MainCtrl as main"> | |
| Choose: | |
| <a href="/Book/Moby">Moby</a> | | |
| <a href="/Book/Moby/ch/1">Moby: Ch1</a> | | |
| <a href="/Book/Gatsby">Gatsby</a> | | |
| <a href="/Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> | | |
| <a href="/Book/Scarlet">Scarlet Letter</a><br/> | |
| <div class="view-animate-container"> | |
| <div ng-view class="view-animate"></div> | |
| </div> | |
| </div> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment