RcBuilder@walla.com
call centre: 054-5614020

angular phone finder basic example

Posted by: RcBuilder  /   Category: AngularJS / Controllers / Data Bind / Data Providers / Directives / Events / Examples / Factories / Filters / Model / module / Services / Views   /   No Comments
26
Jan
2016

angular phone finder basic example <!doctype html> <html> <head> <title>Test 888</title> <style type="text/css"> select { width: 120px;} div.filters > div{ padding:4px 0; border-right:solid 1px #ddd; } div.header{ height:40px; line-height:40px; text-align:center; border-bottom:solid 2px #000; } span.required { font-size:12px; color:red; } </style> </head> <body> <div ng-app="myApp"> <div ng-controller="homeController"> <div class="row header"> Phone Finder </div> <div class="row"> <div class="col-md-2 filters"> <div> <select ng-model="selectedCountry"> <option value="" selected>select</option> <option ng-repeat="country in countries">{{country}}</option> </select> <span ng-show="!hasSelectedCountry" class="required"> required </span> </div> <div> <select ng-model="selectedCity"> <option value="" selected>select</option> <option ng-repeat="city in cities">{{city}}</option> </select> <span ng-show="!hasSelectedCity" class="required"> required </span> </div> <div> <input type="button" ng-click="Search()" value="Search" /> </div> </div> <div class="col-md-10"> <table class="table table-bordered table-striped"> <tr ng-repeat="user in users"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td>{{user.phone}}</td> </tr> </table> </div> </div> </div> </div> <script type="text/javascript".

Read more

Angular basic Example

Posted by: RcBuilder  /   Category: $http / AngularJS / Config / Controllers / Data Bind / Data Providers / Directives / Events / Examples / Factories / Filters / Model / module / Routing / Services / Views   /   No Comments
27
Oct
2014

Angular basic Example index.htm <!doctype html> <html ng-app="my_application"> <head> <title>AngularJS</title> <style> body{ font: normal normal 400 12px/1.2em arial; background-color:#FFFFFE;} </style> </head> <body> <ul> <li> <a href="#users">Users</a> <ul> <li><a href="#users/Roby">Users1</a></li> <li><a href="#users/Shirly">Users2</a></li> </ul> </li> <li><a href="#products">Products</a></li> </ul> <!-- active view placeholder--> <div ng-view class="slide-animation"></div> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="angular-route.min.js"></script> <script type="text/javascript" src="angular-animate.min.js"></script> <script type="text/javascript" src="app/config.js"></script> <script type="text/javascript" src="app/factories/products.js"></script> <script type="text/javascript" src="app/factories/users.js"></script> <script type="text/javascript" src="app/controllers/products.js"></script> <script type="text/javascript" src="app/controllers/users.js"></script> <script type="text/javascript" src="app/directives/global.js"></script> <script type="text/javascript" src="app/directives/products.js"></script> <script type="text/javascript" src="app/filters/global.js"></script> <script type="text/javascript" src="app/filters/products.js"></script> <script type="text/javascript" src="app/app.js"></script> </body> </html> app.js // define the page as application (module is a.

Read more

AngularJS Project

Posted by: RcBuilder  /   Category: $http / AngularJS / Config / Controllers / Data Bind / Data Providers / Directives / Events / Factories / Filters / Model / module / Services / Views   /   No Comments
26
Oct
2014

AngularJS Project define angularJS project (steps) 1. (page) add reference to the base necessary js files: angular.min.js and angular-route.min.js 2. define a factory/service that serves as the data supplier (DAL Layer) 3. define a controller that serves as the logic (BLL Layer) notice! this file rely on the factory so you need to inject the factory in its constructor 4. define.

Read more

AngularJS Modules (Apps)

Posted by: RcBuilder  /   Category: $http / AngularJS / Config / Controllers / Data Bind / Data Providers / Directives / Events / Factories / Filters / HTML / HTML 5 / JAVASCRIPT / Model / module / Services / Views   /   No Comments
26
Oct
2014

AngularJS Modules (Apps) you can refer to module as a container or a namespace it's recommended to bind a module to your page and turn it to some sort of an application you can add config to each module and then add a routes mechanism to it bind a page to specific module * to bind a page to a.

Read more

AngularJS Custom Filters

Posted by: RcBuilder  /   Category: AngularJS / Controllers / Data Bind / Filters / HTML / HTML 5 / JAVASCRIPT / Model / module   /   No Comments
26
Oct
2014

AngularJS Custom Filters same rules as the built-in filters (see 'built-in filters') notice! don't forget to add your custom filter to the application steps to implement custom filter you can add custom filter for single item or for collection with or without params 1.create custom function (see structures below) 2.in the app.js - add your created function to the application(see 'bind.

Read more

AngularJS built-in Filters

Posted by: RcBuilder  /   Category: AngularJS / Controllers / Data Bind / Filters / HTML / HTML 5 / JAVASCRIPT / Model / module   /   No Comments
26
Oct
2014

AngularJS built-in Filters use the '|' pipe to apply filter on data binding or repeater clause (see filters list at the api reference) types * static filter - works on data binding single value (not on collection) * collection filter - works on repeater items collection * collection filter + parameters * controller filter - only for the current scope using structure | : built-in.

Read more

AngularJS Events

Posted by: RcBuilder  /   Category: AngularJS / Controllers / Data Bind / Events / Model / module   /   No Comments
26
Oct
2014

AngularJS Events $watch * event that fired any change at the specified model * apply from the $scope structure $scope.$watch(, function); example // this event will replace any 'e' letter to 'E' <input type="text" ng-model="message_model" /> $scope.$watch('message_model', function(){ $scope.message = $scope.message.replace('e', 'E'); }); example // this event will show a message when the input value is too long <input type="text" ng-model="someModel" placeholder="enter text" style="width:100px;" /> <span ng-show="isTooLong" ng-class="'redTitle'">Too long!!!</span> $scope.isTooLong =.

Read more

AngularJS Custom Directives

Posted by: RcBuilder  /   Category: AngularJS / Controllers / createElement / Data Bind / Directives / HTML / HTML 5 / JAVASCRIPT / Model / module   /   No Comments
26
Oct
2014

AngularJS Custom Directives same rules as the built-in directives (see 'built-in directives') you can add your custom directive which can be any of the 4 directive types (see 'types' under built-in directives) notice! don't forget to add your custom directive to the application types - Element (E) <ng-my-directive></ng-my-directive> - Attribute (A) <span ng-my-directive></span> - CSS class (C) <span class="ng-my-directive: expression;"></span> - Comment (M) <!-- directive: ng-my-directive expression.

Read more

AngularJS Data Bind

Posted by: RcBuilder  /   Category: AngularJS / Controllers / Data Bind / HTML / HTML 5 / JAVASCRIPT   /   No Comments
26
Oct
2014

AngularJS Data Bind bind data use double brackets {{ ... }} to bind data you can bind data from model or repeater you can bind a function {{ fun() }} you can make calculation within it {{ 1 + 1 }} you can bind variables allocated within the current scope (using controller) example // any text entered by the user will automatically bind.

Read more
  • פיתוח מערכות
  • פתרונות טכנולוגים
  • קידום אתרים
  • בניית אתרים