Guest User

Untitled

a guest
Sep 14th, 2018
59
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.17 KB | None | 0 0
  1. angular diectives
  2.  
  3. -----------------------------------------------------------------
  4.  
  5. get user detail $http 
  6.  
  7. var app = angular.module('myApp', []);
  8. app.controller('myCtrl', function($scope,$http) {
  9. //Define scope variable users here
  10. $scope.users;
  11. //Use http service that consumes https://jsonplaceholder.typicode.com/users
  12. $scope.users=$http.get('https://jsonplaceholder.typicode.com/users');
  13. });
  14.  
  15. ---------------------------------------------------------------------------------------
  16.  
  17. form validations
  18.  
  19. var app = angular.module('myApp', []);
  20. app.controller('myCtrl', function($scope) {
  21. var imgPath = "img/";
  22. $scope.dtsinCart=0;
  23. $scope.products = [
  24. {
  25. name : "Happy Cycle",
  26. discount:"20%",
  27. price: "2500",
  28. brand : "Wheels",
  29. addedToCart:false,
  30. image : imgPath + "cycle.jpg",
  31. quantity:0
  32. },
  33. {
  34. name : "Kids Shoes",
  35. discount:"10%",
  36. price: "1460",
  37. brand : "Feel Good",
  38. addedToCart:false,
  39. image : imgPath + "shoes.jpg",
  40. quantity:0
  41. },
  42. {
  43. name : "Polo Baby Care Dress",
  44. discount:"20%",
  45. price: "2500",
  46. brand : "Super Hero",
  47. addedToCart:false,
  48. image : imgPath + "shirt.jpg",
  49. quantity:0
  50. },
  51. ];
  52. $scope.addToCart=function(){
  53. alert('Product Added to Cart successfully');
  54. return "success";
  55. }
  56. //add your code for registerUser which return successful message
  57. $scope.registerUser = function(){
  58. alert('Registration Successful');
  59. return "successful";
  60. }
  61.  
  62. });
  63.  
  64. -----------------------------------------------------
  65.  
  66. display product image
  67.  
  68. var app = angular.module('myApp', []);
  69. app.controller('myCtrl', function($scope) {
  70. $scope.quantity=0;
  71. //Add image property to the products and the image should have the url of images
  72. $scope.products = [
  73. {
  74. name : "Happy Cycle",
  75. discount:"20%",
  76. price: "2500",
  77. brand : "Wheels",
  78. addedToCart:false,
  79. image:'img/cycle.jpg',
  80. quantity:0
  81. },
  82. {
  83. name : "Kids Shoes",
  84. discount:"10%",
  85. price: "1460",
  86. brand : "Feel Good",
  87. addedToCart:false,
  88. image:'img/cycle.jpg',
  89. quantity:0
  90. },
  91. {
  92. name : "Polo Baby Care Dress",
  93. discount:"20%",
  94. price: "2500",
  95. brand : "Super Hero",
  96. addedToCart:false,
  97. image:'img/cycle.jpg',
  98. quantity:0
  99. },
  100. ]
  101. $scope.addToCart=function(){
  102. alert('Product Added to Cart successfully')
  103. return "success";
  104.  
  105. }
  106. });
  107.  
  108. -----------------------------------------------------------------------------------------
  109.  
  110. hello with angular js
  111.  
  112. var myApp = angular.module('myApp',[]);
  113. myApp.controller('myCtrl',function($scope){
  114. $scope.fullName = "Harry Potter";
  115. });
  116.  
  117. ------------------------------------------------------------------
  118.  
  119. sort and search product
  120.  
  121. var app = angular.module('myApp', []);
  122. app.controller('myCtrl', function($scope) {
  123. var imgPath = "img/";
  124. $scope.priceFilter='';
  125. $scope.dtsinCart=0;
  126. $scope.products = [
  127. {
  128. name : "Happy Cycle",
  129. discount:"20%",
  130. price: 2500,
  131. brand : "Wheels",
  132. addedToCart:false,
  133. image : imgPath + "cycle.jpg",
  134. quantity:0
  135. },
  136. {
  137. name : "Polo Baby Care Dress",
  138. discount:"20%",
  139. price: 500,
  140. brand : "Super Hero",
  141. addedToCart:false,
  142. image : imgPath + "shirt.jpg",
  143. quantity:0
  144. },
  145. {
  146. name : "Kids Shoes",
  147. discount:"10%",
  148. price: 1000,
  149. brand : "Feel Good",
  150. addedToCart:false,
  151. image : imgPath + "shoes.jpg",
  152. quantity:0
  153. }
  154.  
  155. ];
  156. $scope.addToCart=function(){
  157. alert('Product Added to Cart successfully')
  158. return "success";
  159. }
  160. //create scope variable options that has 'Low Price to High' and 'High Price to Low' values.
  161. $scope.options = ['Low Price to High' , 'High Price to Low'];
  162.  
  163. //add selectPriceFilter function that assign scope priceFilter to true / false based on condition
  164. $scope.selectPriceFilter = function(){};
  165.  
  166. });
  167.  
  168. -----------------------------------------------------------------------------------------------------------------------------
  169.  
  170. even or oddd
  171.  
  172. var app = angular.module('myApp', []);
  173. app.controller('myCtrl', function($scope) {
  174. //add your code here
  175. $scope.number1=9;
  176. $scope.number2=9;
  177. $scope.odd_even = function(number){
  178. return number%2==0?'even':'odd';
  179. };
  180. });
  181.  
  182. ------------------------------------------------------
  183.  
  184. hello name
  185.  
  186. var app = angular.module('myApp', []);
  187. app.controller('myCtrl', function($scope) {
  188. //write your code here
  189. $scope.fullName='anuj';
  190. });
  191.  
  192. -------------------------------------------------------------------
  193.  
  194. firstname lastname
  195.  
  196. Hello {{first_name+" "+last_name}} !
  197.  
  198. var app = angular.module('myApp', []);
  199. app.controller('myCtrl', function($scope) {
  200. //write your code here
  201. $scope.first_name ='mean';
  202. $scope.last_name ='mom';
  203. });
  204.  
  205. ------------------------------------------------------------------------
  206.  
  207. display all products
  208.  
  209. var app = angular.module('myApp', []);
  210. app.controller('myCtrl', function($scope) {
  211. var imgPath = "img/";
  212. //add your $scope variable products here with below provided product details.
  213. $scope.products = [{name : "Happy Cycle",
  214. discount:"20%",
  215. price: "2500",
  216. brand : "Wheels",
  217. addedToCart:false,
  218. image : imgPath + "cycle.jpg",
  219. quantity:0},
  220. {name : "Kids Shoes",
  221. discount:"10%",
  222. price: "1460",
  223. brand : "Feel Good",
  224. addedToCart:false,
  225. image : imgPath + "shoes.jpg",
  226. quantity:0},
  227. {name : "Polo Baby Care Dress",
  228. discount:"20%",
  229. price: "2500",
  230. brand : "Super Hero",
  231. addedToCart:false,
  232. image : imgPath + "shirt.jpg",
  233. quantity:0}
  234. ];
  235. });
  236.  
  237. /*
  238. -----------------
  239. Product Details
  240. -----------------
  241. product1
  242. {name : "Happy Cycle",
  243. discount:"20%",
  244. price: "2500",
  245. brand : "Wheels",
  246. addedToCart:false,
  247. image : imgPath + "cycle.jpg",
  248. quantity:0},
  249.  
  250. product2
  251. name : "Kids Shoes",
  252. discount:"10%",
  253. price: "1460",
  254. brand : "Feel Good",
  255. addedToCart:false,
  256. image : imgPath + "shoes.jpg",
  257. quantity:0
  258.  
  259. product3
  260. name : "Polo Baby Care Dress",
  261. discount:"20%",
  262. price: "2500",
  263. brand : "Super Hero",
  264. addedToCart:false,
  265. image : imgPath + "shirt.jpg",
  266. quantity:0
  267.  
  268. */
  269.  
  270. -----------------------------------------------------------------------------------------------------------------------------------------------------------------------
  271.  
  272. //add to cart
  273.  
  274. var app = angular.module('myApp', []);
  275. app.controller('myCtrl', function($scope) {
  276. var imgPath = "img/";
  277. $scope.quantity=0;
  278. $scope.products = [
  279. {
  280. name : "Happy Cycle",
  281. discount:"20%",
  282. price: "2500",
  283. brand : "Wheels",
  284. addedToCart:false,
  285. image : imgPath + "cycle.jpg",
  286. quantity:0
  287. },
  288. {
  289. name : "Kids Shoes",
  290. discount:"10%",
  291. price: "1460",
  292. brand : "Feel Good",
  293. addedToCart:false,
  294. image : imgPath + "shoes.jpg",
  295. quantity:0
  296. },
  297. {
  298. name : "Polo Baby Care Dress",
  299. discount:"20%",
  300. price: "2500",
  301. brand : "Super Hero",
  302. addedToCart:false,
  303. image : imgPath + "shirt.jpg",
  304. quantity:0
  305. },
  306. ];
  307. $scope.addToCart = function(){
  308. alert("Product added to Cart successfully");
  309. return "success";
  310. }
  311. });
  312.  
  313. -------------------------------------------------------------------------------------------------------------------------------
  314.  
  315. internals
  316.  
  317. ------------------------------------------------------------------------------
  318.  
  319. sqaure root and cube root using services
  320.  
  321. // Add your code here!
  322.  
  323. var myApp = angular.module('myApp', []);
  324.  
  325. // define MathService here
  326. myApp.service('MathService', function() {
  327. //define all the arithmetic functions here like add, subtract. multiply and divide here
  328. this.multiply = function(num1,num2){
  329. return num1*num2;
  330. }
  331. });
  332.  
  333. // define CalculatorService here which uses Math service
  334. myApp.service('CalculatorService', function(MathService) {
  335. // consume MathService multiply function for getting square and cube of the parameter
  336. this.square = function(a) {
  337. return MathService.multiply(a,a);
  338. };
  339. this.cube = function(a) {
  340. return MathService.multiply(a,MathService.multiply(a,a));
  341. };
  342.  
  343. });
  344.  
  345. // define CalculatorController here
  346. myApp.controller('CalculatorController', function($scope, CalculatorService) {
  347. $scope.answer = 0;
  348. $scope.num=0;
  349. // consume CalculatorService- square and cube function for getting square of the input
  350. // set the result in scope variable answer
  351. $scope.Square = function() {
  352. $scope.answer = CalculatorService.square($scope.num);
  353. }
  354.  
  355. $scope.Cube = function() {
  356. $scope.answer= CalculatorService.cube($scope.num);
  357. }
  358. });
  359.  
  360. --------------------------------------------------------------------------
  361.  
  362. cube with factory
  363.  
  364. var myApp = angular.module('myApp', []);
  365.  
  366. myApp.factory('MathFactory', function() {
  367. //define all the arithmetic functions here like add, subtract. multiply and divide here
  368. var test={};
  369. test.multiply = function(num1,num2){
  370. return num1*num2;
  371. }
  372. return test;
  373. });
  374.  
  375. // define CalculatorService here which uses Math service
  376. myApp.factory('CalculatorFactory', function(MathFactory) {
  377. // consume MathService multiply function for getting square and cube of the parameter
  378. var res={};
  379. res.square = function(a) {
  380. return MathFactory.multiply(a,a);
  381. };
  382. res.cube = function(a) {
  383. return MathFactory.multiply(a,MathFactory.multiply(a,a));
  384. };
  385. return res;
  386. });
  387.  
  388. // define CalculatorController here
  389. myApp.controller('CalculatorController', function($scope, CalculatorFactory) {
  390. $scope.answer = 0;
  391. $scope.num=0;
  392. // consume CalculatorService- square and cube function for getting square of the input
  393. // set the result in scope variable answer
  394. $scope.Square = function() {
  395. $scope.answer = CalculatorFactory.square($scope.num);
  396. };
  397.  
  398. $scope.Cube = function() {
  399. $scope.answer= CalculatorFactory.cube($scope.num);
  400. };
  401. });
  402.  
  403. ---------------------------------------------
  404.  
  405. try it out with constants
  406.  
  407. var myApp = angular.module('myApp', []);
  408. var res={};
  409. res.cmp_url='';
  410. res.cmp_md='';
  411. res.cmp1_url='';
  412. res.cmp1_md='';
  413. res.cmp2_url='';
  414. res.cmp2_md='';
  415.  
  416. myApp.constant('app_api',res);
  417. // define CalculatorController here
  418. myApp.controller('myCtrl', function($scope,app_api) {
  419. console.log(app_api);
  420. $scope.app_api = app_api;
  421. $scope.cmp_name='';
  422. });
  423.  
  424. --------------------------------------------------------------------
  425.  
  426. watch
  427.  
  428. // write your code here
  429. var myApp = angular.module('myApp',[]);
  430. myApp.controller('myCtrl',function($scope){
  431. $scope.fullName = "Harry Potter";
  432. });
  433.  
  434. --------------------------------------------------------------------
  435.  
  436. scope and rootScope
  437.  
  438. // Write your code here.
  439. var myApp = angular.module('myApp', []);
  440.  
  441. myApp.controller('RController', function($scope,$rootScope){
  442. $scope.color = 'Red';$rootScope.color = 'White';
  443. });
  444.  
  445. myApp.controller('GController', function($scope,$rootScope){
  446. $scope.color = 'Blue';$rootScope.color = 'White';
  447. });
  448.  
  449. myApp.controller('BController', function($scope,$rootScope){
  450. $rootScope.color = 'White';
  451. $scope.color='';
  452. });
  453.  
  454. jQuery
  455.  
  456. _------------------------------------------------------------------------
  457.  
  458. EVENT HANDLING
  459.  
  460. function login() {
  461. var user = $("#username").val();
  462. var pass = $("#password").val();
  463. if(user == "admin" && pass == "password"){
  464. alert("You are a valid user");
  465. }else{
  466. alert("You are not a valid user")
  467. }
  468. };
  469.  
  470. ---------------------------------------------------------------------------
  471.  
  472. Addition of number
  473.  
  474. function add() {
  475. var num1 = $("#num1").val();
  476. var num2 = $("#num2").val();
  477. var res = parseInt(num1)+parseInt(num2)
  478. console.log(num1+" + "+num2+" = "+res);
  479. $("#total").val(res);
  480. };
  481.  
  482. ------------------------------------------------------
  483.  
  484. DOM manipulation
  485.  
  486. function login() {
  487. var user = $("#username").val();
  488. var pass = $("#password").val();
  489. if(user == "admin" && pass == "password"){
  490. doRedirect("home.html");
  491. }else{
  492. alert("You are not a valid user")
  493. }
  494. };
  495.  
  496. ------------------------------------------------------------------------
  497.  
  498. Animations
  499.  
  500. function login() {
  501. var user = $("#username").val();
  502. var pass = $("#password").val();
  503. if(user == "admin" && pass == "password"){
  504. doRedirect("home.html");
  505. }else{
  506. alert("You are not a valid user")
  507. }
  508. };
  509.  
  510. function hover1(){
  511.  
  512. $("item1-des").slideToggle();
  513. };
  514.  
  515. function hover2(){
  516. $("item2-des").slideToggle();
  517.  
  518. };
  519.  
  520. function big(){
  521. $("#buy").animate({height:"300px",width : "300px"});
  522.  
  523. };
  524.  
  525. function doRedirect(href) {
  526.  
  527. window.location = href;
  528.  
  529. };
  530.  
  531. -------------------------------------------------------
  532.  
  533. Ajax call
  534.  
  535. function login() {
  536. var user = $("#username").val();
  537. var pass = $("#password").val();
  538. if(user == "admin" && pass == "password"){
  539. doRedirect("home.html");
  540. }else{
  541. alert("You are not a valid user")
  542. }
  543. };
  544.  
  545. function hover1(){
  546.  
  547. $("#item1-des").slideToggle();
  548. };
  549.  
  550. function hover2(){
  551. $("#item2-des").slideToggle();
  552.  
  553. };
  554.  
  555. function big(){
  556. $("#buy").animate({height:"300px",width : "300px"});
  557.  
  558. };
  559.  
  560. function load_des() {
  561. $("#item1-des").load("https://codepen.io/anon/pen/KyRbKM.html");
  562.  
  563. };
  564.  
  565. function doRedirect(href) {
  566.  
  567. window.location = href;
  568.  
  569. };
  570.  
  571. _------_----------------------------------------------------------------------------------
  572.  
  573. JavaScript
  574.  
  575. Generate random characters
  576.  
  577. var element= document.getElementById('num').value;
  578. var val = Math.random().toString(36).replace('0.','').substr(0,element);
  579. document.getElementById('result').innerHTML=val;
  580. console.log(val);
  581. //Type your code here.
  582. return val;
  583.  
  584. ---------------------------------------------
  585.  
  586. Fibonacci Series
  587.  
  588. function fibonacciSequence(input) {
  589.  
  590. var v1=0,v2=1,v3;
  591. var res=[0,1];
  592.  
  593. for(var i = 3;i<=input+1;i++){
  594.  
  595. v3=v1+v2;
  596.  
  597. v1=v2;
  598.  
  599. v2=v3;
  600. res.push(v3);
  601. }
  602.  
  603. return res;
  604. }
  605.  
  606. -------------------------
  607.  
  608. Dropdown
  609.  
  610. function runList(){
  611. //Type your code here.
  612. var select = document.getElementById('list');
  613. var option = document.createElement('option');
  614.  
  615. option.innerHTML="japan";
  616. option.value="japan";
  617.  
  618. select.appendChild(option);
  619. }
  620.  
  621. ------------------------------------------------------------------------------------
  622.  
  623. to read user data from from
  624.  
  625. function myFunction() {
  626. // Type your code here.
  627. var name = document.getElementById("myname").value;
  628. var phone = document.getElementById("myphone").value;
  629. var country = document.getElementById("mycontry").value;
  630. var mail = document.getElementById("mymail").value;
  631. var res=name+","+phone+","+country+","+mail;
  632. alert(res);
  633. return res;//Enter your return statement here
  634. }
  635.  
  636. ----------------------------------------------------
  637.  
  638. simple calculator
  639.  
  640. function update(value) {
  641. //Type the code here.
  642. var out = document.getElementById("screen").value;
  643. out = out+""+value;
  644. document.getElementById("screen").value = out;
  645. }
  646.  
  647. function result() {
  648. //Type the code here.
  649. var out = document.getElementById("screen").value;
  650. out = eval(out);
  651. document.getElementById("screen").value = out;
  652. }
  653.  
  654. function reset() {
  655. //Type the code here.
  656. document.getElementById("screen").value = "";
  657. }
Add Comment
Please, Sign In to add comment