11 | They return presentation directly on callback.
12 |
Void Elements
13 | They doesn't have any return type and value by default.
14 |
15 |
--------------------------------------------------------------------------------
/detailsSummary.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Summary
4 |
5 |
Depending on how you obtained the Windows software, this is a license agreement between (i) you and the device manufacturer or software installer that distributes the software with your device; or (ii) you and Microsoft Corporation (or, based on where you live or, if a business, where your principal place of business is located, one of its affiliates) if you acquired the software from a retailer.
10 |
11 |
12 | Samsung LED TV
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/orderedlist.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Data List
4 |
7 |
8 |
9 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/ishop-Project/notes.txt:
--------------------------------------------------------------------------------
1 | MEAN Stack with UI
2 |
3 | M - MongoDb - Database
4 | E - Express - Middleware
5 | A - Angular [JS] - Client Side
6 | N - Node JS - Server Side
7 |
8 |
9 | IEEE Project
10 | 1. Visit
11 | http://ieeexplore.ieee.org/Xplore/home.jsp
12 |
13 | 2. Visit the "i-shop" project abstract
14 |
15 | https://ieeexplore.ieee.org/document/7941952
16 |
17 | 3. Copy DOI number of Project
18 |
19 | 4. Vist a website
20 | "https://sci-hub.tw/"
21 |
22 | 5. Paste the DOI number and click Open
23 |
24 | 6. Download PDF Document [base paper]
25 |
26 |
27 | Task:
28 | - Read the Project Documentation
29 | - Prepare an Ms-Word Document
30 | - Project Name is "i-shop"
31 | - In Ms-word document prepare the following topics
32 |
33 | a) Abstract [ max 4 lines ]
34 | b) Existing System [without this project
35 | how generally
36 | shopping]
37 | c) Proposed System [With this project
38 | how benifited]
39 | d) Modules [in this project]
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/textPresentation.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Text Presentation
4 |
5 |
6 |
Web Development
7 |
8 |
9 | Depending on how you obtained the Windows software, this is a license agreement between (i) you and the device manufacturer or software installer that distributes the software with your device; or (ii) you and Microsoft Corporation (or, based on where you live or, if a business, where your principal place of business is located, one of its affiliates) if you acquired the software from a retailer.
10 |
11 |
12 |
13 | Depending on how you obtained the Windows software, this is a license agreement between (i) you and the device manufacturer or software installer that distributes the software with your device; or (ii) you and Microsoft Corporation (or, based on where you live or, if a business, where your principal place of business is located, one of its affiliates) if you acquired the software from a retailer.
14 |
49 |
50 |
--------------------------------------------------------------------------------
/OnlineClassNotes/18-04-2020/Notes.txt:
--------------------------------------------------------------------------------
1 | Angular JS
2 | - Angular JS is an open source, cross platform, JavaScript based Framewok developed by Google and maintained by a large community of organizations and developers to address the issues in SPA.
3 |
4 | - Angular Js uses JavaScript based library.
5 | - It allows to build application and control application flow.
6 | - It uses frameworks like MVC, MVP and MVVM for building applications.
7 | - It also uses frameworks like Cordova, Ionic and NativeScript, which are are used to build cross platform mobile apps.
8 | - Angular JS started in 2010 with 1.0
9 | - Angular JS latest version till data is 1.7.9
10 |
11 | Installing Angular JS for Project
12 | ----------------------------------------------
13 | 1. Open your project location in Terminal or command prompt
14 | 2. Install Angular Js core library.
15 |
16 | > npm install angular
17 |
18 | node_modules
19 | |_angular
20 | |_angular.js
21 |
22 | Ex: Home.html
23 |
24 |
25 |
26 |
27 | Angular JS {{1+1}}
28 |
29 |
30 |
31 |
68 |
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/ishop-Project/04-05-2020Notes.txt:
--------------------------------------------------------------------------------
1 | Node JS
2 | - Server Scripting Technology
3 | - It is javascript based.
4 | - Server side scripting is a technique used in web development, where scripts are employed on server in order to generate a response customized for every client request.
5 | - Node JS server side programs are written in ".js" file
6 | - To Compile and run Node JS program you can use the Node JS compiler.
7 |
8 | > node program.js
9 |
10 | Connecting with MongoDb from Node JS:
11 | ==================================
12 | 1. You have to install a package for MongoDb, this package contains all library to communicate with MongoDb.
13 |
14 | C:\Ishop\ServerSide> npm install mongodb
15 |
16 | 2. Create a new JavaScript file by name "test.js"
17 |
18 |
19 | "test.js"
20 | var mongoClient = require("mongodb").MongoClient;
21 | var url = "mongodb://127.0.0.1:27017";
22 |
23 | mongoClient.connect(url, function(err, clientObj){
24 | if(!err) {
25 | console.log("Connected Successfully..");
26 | } else {
27 | console.log(err);
28 | }
29 | })
30 |
31 | 3. Open in Terminal or Command Prompt
32 |
33 | C:\Ishop\ServerSide>node test.js
34 |
35 | Ex: Program to Connect with Database and Read all records from "tblproducts" table.
36 |
37 | "test.js"
38 | ========
39 | var mongoClient = require("mongodb").MongoClient;
40 | var url = "mongodb://127.0.0.1:27017";
41 |
42 | mongoClient.connect(url, function(err, clientObj){
43 | if(!err) {
44 | var database = clientObj.db("shoppingdb");
45 | database.collection("tblproducts").find({}).toArray(function(err, documents){
46 | if(!err) {
47 | console.log(documents);
48 | } else {
49 | console.log(err);
50 | }
51 | })
52 | } else {
53 | console.log(err);
54 | }
55 | })
56 |
57 | Ex: Insert Records into table from Node JS
58 |
59 | var mongoClient = require("mongodb").MongoClient;
60 | var url = "mongodb://127.0.0.1:27017";
61 |
62 | mongoClient.connect(url, function(err, clientObj){
63 | if(!err) {
64 | var database = clientObj.db("shoppingdb");
65 | database.collection("tblcategories").insert({CategoryId:4, CategoryName:"Groceries"}, function(err, result){
66 | if(!err) {
67 | console.log("Record Inserted");
68 | }
69 | })
70 | }
71 | })
72 |
73 |
74 |
75 |
76 |
77 |
78 |
--------------------------------------------------------------------------------
/OnlineClassNotes/21-04-2020Notes.txt:
--------------------------------------------------------------------------------
1 | Angular JS Directives
2 | - Directive is Angular JS is used for
3 | a) Extending Markup
4 | b) Making markup Dynamic
5 | c) Making the markup more interactive
6 | - Angular JS provides several built-in directives
7 | - The core library for directives in Angular Js is "angular.js".
8 |
9 | 1. ng-app : It is used to configure angular module
10 | to the document scope.
11 |
12 |
13 |
14 | 2. ng-controller: It is used to configure a controller.
15 |
16 |
17 |
18 | 3. ng-init : It is used to initialize value in angular scope. The initialized variables are accessbile from any location within the Angular scope.
19 |
20 | Ex:
21 |
22 |
23 |
24 |
25 |
26 | Mouse is over div {{count}} times.
27 |
28 |
29 |
30 |
31 | Ex:
32 |
33 |
34 |
35 |
36 |
37 | Mouse is over div {{count}} times.
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | Ex: Any Type of value can be initialized by using
47 | "ng-init"
48 |
49 |
50 |
57 |
58 |
59 |
60 |
Initialize String
61 |
{{msg}}
62 |
Initialize Array
63 |
Cities[0]-{{cities[0]}} Cities[1]-{{cities[1]}}
64 |
Initialize Object
65 |
Name : {{product.Name}} Price : {{product.Price}} InStock : {{(product.InStock==true)?"Available":"Out of Stock"}}
66 |
67 |
68 |
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/OnlineClassNotes/15-04-2020Notes.txt:
--------------------------------------------------------------------------------
1 | Bootstrap Pagination
2 | - Pagination allows to navigate between contents in a page.
3 | - It allows navigation within the data i.e next, previous, first, last etc..
4 |
5 | Classes:
6 | 1. pagination , pagination-sm, pagination-lg
7 | 2. page-item
8 | 3. page-link
9 | 4. active
10 | 5. disabled
11 | 6. justify-content-center, between, end
12 |
13 | Ex:
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
32 |
33 |
34 |
35 | Bootstrap Popover
36 | - It is used to display tool-tip for your contents
37 | - It requires "popper.js"
38 |
39 | Attributes:
40 | 1. data-container = "body"
41 | 2. data-toggle = "popover"
42 | 3. data-placement = "top, right, bottom, left"
43 | 4. data-content = "any content"
44 |
45 | To Enable Popper you need a JQuery function
46 | "popover()"
47 |
48 | EX:
49 |
50 |
51 |
52 |
53 |
58 |
59 |
60 |
Popper
61 |
62 |
63 |
64 | Note: Add title attribute with popover to display titles.
65 |
66 | Syntax:
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/ishop-Project/Database.txt:
--------------------------------------------------------------------------------
1 | Creating Database
2 | ===============
3 | 1. Open MongoDb Terminal
4 |
5 | C:\Program Files\MongoDB\Server\4.0\bin>mongo.exe
6 |
7 | 2. View Existing Databases
8 |
9 | > show dbs
10 |
11 | 3. To Create a new Database
12 |
13 | Syntax:
14 | > use databaseName
15 | Ex:
16 | > use shoppingdb
17 |
18 |
19 | Create Database Tables for I-Shop Project
20 | ------------------------------------------------------------
21 | [Mongodb Tables are known as Collections]
22 |
23 | Required Tables for Modules:
24 |
25 | Module Name Table Name with fields
26 | -------------------------------------------------------------------
27 | Registration tblregister
28 | -UserId : string
29 | -UserName : string
30 | -Password : string
31 | -Email : string
32 | -Mobile : string
33 | -Address : string
34 |
35 | Products Browse ]
36 | Products Search ] tblcategories
37 | - CategoryId : number
38 | - CategoryName: string
39 |
40 | tblproducts
41 | - ProductId : number
42 | - Name : string
43 | - Price : number
44 | - IsInStock : boolean
45 | - Photo : string
46 | - CategoryId : number
47 |
48 | Creating Tables
49 | =============
50 | Tables are known as collections and they are created by using the command "db.createCollection()". The command "db" refers to current database.
51 |
52 | > db.createCollection("tblregister")
53 | > db.createCollection("tblcategories")
54 | > db.createCollection("tblproducts")
55 |
56 | > show dbs → to view list of databases
57 | > show collections → to view list of tables
58 |
59 | Note: To Remove Database
60 | > use yourDatabaseName
61 | > db.dropDatabase()
62 |
63 | To Remove Table [collection]
64 | > db.collectionName.drop()
65 | > db.tableName.drop()
66 | > db.tblregister.drop()
67 |
68 | Insert Records into Tables:
69 | ======================
70 | - Records [rows] are known as Documents in MongoDb.
71 | - To insert a new record you have to use
72 |
73 | > db.collectionName.insert({}) one record
74 | > db.collectionName.insert([{},{}]) many
75 |
76 | * Register Table [ tblregister ]
77 |
78 | >db.tblregister.insert({UserId:"john_nit", UserName:"John", Password:"john123", Email:"john@gmail.com", Mobile:"+919876543210", Address:"Ameerpet - Hyderabad - 500073"})
79 |
80 | * Categories Table [tblcategories]
81 |
82 | > db.tblcategories.insert([{CategoryId:1, CategoryName:"Electronics"}, {CategoryId:2, CategoryName:"Footwear"}, {CategoryId:3, CategoryName: "Fashion"}])
83 |
84 | * Products Table [tblproducts]
85 |
86 | >db.tblproducts.insert([{ProductId:1, Name:"Samsung TV", Price:45000.53, IsInStock:true, Photo:"../Images/tv.jpg", CategoryId:1}])
87 |
88 | To View List of Records:
89 | > db.tblcategories.find().pretty()
90 | > db.tblproducts.find().pretty()
91 |
92 |
93 | Node JS
94 |
95 |
--------------------------------------------------------------------------------
/shop.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Shopping Cart
4 |
17 |
18 |
19 |
82 |
83 |
--------------------------------------------------------------------------------
/OnlineClassNotes/08-04-2020_Notes.txt:
--------------------------------------------------------------------------------
1 | JQuery Ajax
2 | - Ajax is Asynchronous JavaScript and XML
3 | - Async is a technique used to handle multiple tasks simultaneously at the same time i.e without locking any task it can process other tasks.
4 | - In Synchronous technique other tasked are locked when any one task is being performed.
5 | - JQuery provide a set of Ajax functions and methods that allow us to load data into page without reloading the page.
6 | - Ajax Enable Partial Post Back mechanism.
7 | - Only Specific portion of page is loaded or posted without refreshing the complete page.
8 | - The various Ajax methods provided by JQuery are
9 |
10 | 1. ajaxComplete()
11 | 2. ajaxError()
12 | 3. ajaxSend()
13 | 4. ajaxStart()
14 | 5. ajaxStop()
15 | 6. ajaxSuccess()
16 | 7. jquery.get()
17 | 8. jquery.getJson()
18 | 9. jquery.post()
19 | 10. load() etc..
20 |
21 |
22 | .getJson() : Loads JSON-encoded data from the server using Http GET request.
23 |
24 | Syntax:
25 | .getJson(url, function(data) {
26 |
27 | })
28 |
29 | Ex:
30 | 1. Create a new folder by name "data"
31 | 2. Add a new file into data folder by name
32 | "products.json"
33 | [
34 | {
35 | "Name": "Samsung TV",
36 | "Price": 34000.44,
37 | "IsInStock": true
38 | },
39 | {
40 | "Name":"Nike Casuals",
41 | "Price": 2000.44,
42 | "IsInStock":false
43 | }
44 | ]
45 |
46 | 3. Add a new HTML file
47 | "Demo.html"
48 |
49 |
50 |
51 |
52 |
53 |
66 |
67 |
68 |
69 |
Products Data
70 |
71 |
72 |
73 |
74 |
75 |
Name
76 |
Price
77 |
Stock Status
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 | Note: Ajax examples you can run only from WebServer. [Open with Live Server]
90 |
91 | $.getJson("url", function(){
92 | })
93 | .done(function() { })
94 | .fail(function(){ })
95 | .always(function{})
96 |
97 | JQuery Bootstrap
98 |
--------------------------------------------------------------------------------
/OnlineClassNotes/31-03-2020_Notes.txt:
--------------------------------------------------------------------------------
1 | JQuery
2 | - JQuery is a JavaScript Library.
3 | - JQuery is a fast, small and feature-rich JavaScript Library.
4 | - It is a collection of JavaScript functions.
5 | - It is lightweight
6 | - JQuery means "write less and do more".
7 | - Introduced in Early 2006 by "John Resign".
8 | - JQuery is written in JavaScript.
9 | - JQuery simplifies AJAX calls and DOM Manipulations.
10 | - Simplifies CSS animations and Event Handling.
11 | - Latest version of JQuery till date in "3.4.1" May 1, 2019.
12 |
13 | Features of JQuery:
14 | - HTML Manipulation
15 | - DOM Manipulation
16 | - DOM element selection
17 | - CSS Manipulation
18 | - Effects and Animations
19 | - Utilities with pre-defined functionality.
20 | - Ajax for "Asynchronous Techniques"
21 | - HTML events
22 | - JSON Parsing [converting]
23 | - Extensibility by using plug-ins
24 | - It is very fast and extensibile
25 | - It handle complex functionalities by writing very less code.
26 | - It can reduce browser compatibility issues.
27 | - It supports feature for modern browsers.
28 |
29 | Versions:
30 | - 1.0 in 26 August 2006 [First]
31 | - 3.4.1 May 1, 2019 [Lastest]
32 |
33 | Install JQuery for your Project
34 | =========================
35 | 1. Open your project in command prompt or in Terminal [Ctrl + ` ] backtick
36 |
37 | 2. Install from NPM
38 | C:\Ishop>npm install jquery
39 |
40 | node_modules
41 | |_JQuery
42 | |_dist
43 | |_jquery.js [core library for jquery]
44 |
45 | 3. Link the library in your HTML page
46 |
47 |
48 |
50 |
51 |
52 | 4. Invoke the library and make it active [ $() ]
53 |
54 | Syntax:
55 | $(document).ready(function(){
56 |
57 | });
58 | or
59 | $().ready(function(){
60 |
61 | });
62 | or
63 | $(function(){
64 |
65 | });
66 |
67 | Ex:
68 |
69 |
70 |
71 | JQuery Demo
72 |
73 |
78 |
79 |
80 |
81 |
82 |
83 |
84 | Ex:
85 |
86 |
87 |
88 | JQuery Demo
89 |
101 |
103 |
108 |
109 |
110 |
111 |
112 |
113 |
--------------------------------------------------------------------------------
/OnlineClassNotes/24-04-2020Notes.txt:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
15 |
52 |
53 |
54 |
55 |
56 |
Products List
57 |
58 |
59 |
Product Id
60 |
Name
61 |
Price
62 |
Action
63 |
64 |
65 |
66 |
{{item.ProductId}}
67 |
{{item.Name}}
68 |
{{item.Price}}
69 |
70 |
71 |
72 |
73 |
74 |
75 |
Add Product
76 |
87 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/OnlineClassNotes/02-04-2020Notes.txt:
--------------------------------------------------------------------------------
1 | 8. appendTo() : It is used to append any content to a specific element. The content can be
2 | text or a template.
3 | A template is combination of HTML
4 | and Logic.
5 |
6 | Syntax:
7 | $(` ${expression} `).appendTo("element");
8 |
9 | Ex:
10 |
11 |
12 |
27 |
28 |
29 |
Cities List
30 |
31 |
32 |
33 |
34 |
35 |
Name
36 |
Price
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | 9. $.each() : It is an iterator, which is used to read values and keys from a collection.
45 |
46 | Syntax:
47 | $.each(collection, function(key, value) {
48 |
49 | })
50 |
51 | Ex:
52 |
53 |
54 |
69 |
70 |
71 |
107 |
108 |
109 |
110 |
111 |
--------------------------------------------------------------------------------
/OnlineClassNotes/27-03-2020_Notes.txt:
--------------------------------------------------------------------------------
1 | JavaScript Browser Objects
2 | - JavaScript BOM & DOM
3 | - JavaScript Browser Objects
4 | a) window
5 | b) location
6 | c) navigator
7 | d) history
8 | e) document
9 | - JavaScript Window Object
10 | "window" object provides a set of properties and methods that are used to control the browser window.
11 |
12 | Member Description
13 | ====================================
14 | open() Opens any document in a new window
15 | close() Closes the current document.
16 | print() Print the current document.
17 |
18 | Syntax:
19 | window.open("filePath", "Title", "properties");
20 |
21 | properties in open method:
22 | - toolbar= yes/no
23 | - scrollbars=yes/no
24 | - resizable=yes/no
25 | - top = 300
26 | - left = 200
27 | - width = 200
28 | - height= 100
29 |
30 | window.close();
31 | window.close(windowRefernce);
32 | window.print();
33 |
34 | Ex: Window Object
35 |
36 |
48 |
49 |
50 |
Browser Window Object
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | JavaScript Location Object
59 | ======================
60 | - It provides a set of properties and methods that are used to handle the client location details.
61 |
62 | Member Description
63 | ----------------------------------------------------------------------------
64 | host It returns the server Name or
65 | IP address
66 | port It returns the port number.
67 | protocol It returns the current protocol.
68 | href It returns the complete URL.
69 | pathname It returns the current path.
70 | hash It returns the current hash name.
71 | search It returns the querystring.
72 | [?name=value&name=value]
73 | reload() It reloads the window.
74 |
75 | Ex: Get Client Location Details
76 |
77 |
78 |
85 |
90 |
91 |
92 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
/OnlineClassNotes/27-04-2020Notes.txt:
--------------------------------------------------------------------------------
1 | uppercase
2 | lowercase
3 | number
4 | currency
5 | date
6 | filter
7 | orderBy
8 | limitTo
9 | json
10 |
11 | limitTo : It specifies the number of records to display
12 |
13 |
14 |
15 |
16 |
17 | json : It is used to convert the data into JSON format.
18 |
19 | {{data | json}}
20 |
21 |
22 | Http Service
23 | - It allows to configure communication with Services.
24 | - It can make are request and access the response details to display client side.
25 | - It is used for WebServices and RESTful services.
26 | [Representational State Transfer]
27 | - Angular JS uses "$http" service to handle the request from client side.
28 |
29 | Syntax:
30 | $http.get("url")
31 | .then(function sucess(response) {
32 | // on success
33 | }, function failure(response){
34 | // on failure
35 | });
36 |
37 | Response Object contains several details like
38 | a) status : It returns status code
39 | 200, 404
40 | b) statusText: It returns status text.
41 | OK, NotFound
42 | c) data : It contains data present in file
43 |
44 | Ex:
45 | 1. Create a new folder by name "Data"
46 |
47 | 2. Add a new file into folder by name
48 | "products.json"
49 | [
50 | {
51 | "Name": "Samsung TV",
52 | "Price": 34000.44,
53 | "IsInStock": true
54 | },
55 | {
56 | "Name":"Nike Casuals",
57 | "Price": 2000.44,
58 | "IsInStock":false
59 | },
60 | {
61 | "Name":"Mobile",
62 | "Price": 13000.44,
63 | "IsInStock":true
64 | }
65 | ]
66 |
67 | 3. Create a new Angular JS App to consume data
68 | "index.html"
69 |
70 |
71 |
72 |
73 |
74 |
93 |
94 |
95 |
48 |
49 |
50 | Ajax Request Status:
51 | - Ajax calls in a page will be processing by using the following methods.
52 | - The status of ajax is shown by using these methods.
53 |
54 | .ajaxComplete()
55 | .ajaxError()
56 | .ajaxStart()
57 | .ajaxStop()
58 | .ajaxSuccess()
59 | .ajaxError()
60 |
61 | Syntax:
62 | $(function() {
63 |
64 | })
65 | .ajaxComplete(function(){ })
66 | .ajaxSuccess(function(){ })
67 |
68 | Ex:
69 |
70 |
71 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
Name
104 |
Price
105 |
Stock
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 | JQuery Bootstrap
115 | - Install Boostrap
116 | - Install JQuery
117 |
118 | JQuery Bootstrap provides a set of Templates that makes the presentation more interactive and responsive.
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
--------------------------------------------------------------------------------
/OnlineClassNotes/28-04-2020Notes.txt:
--------------------------------------------------------------------------------
1 | Routing
2 | - Routing is a technique used in Web Applications.
3 | - Routing technique allows to handle navigation in application.
4 | - User can stay on single page and can get access to everything from the page.
5 | - User will not navigate outside the page.
6 | - New components are added to page without reloading the complete page.
7 | - This type of Application interface is known as SPA.
8 | [Single Page Application].
9 |
10 | - Routing Requires "ngRoute" module which is present in "angular-route.js"
11 |
12 | - ng-view is a directive used to specific where the result must be displayed in page.
13 |
14 | - Routes are configured by using "angular.config()" with a service called "$routeProvider"
15 |
16 | Syntax:
17 | app.config(function($routeProvider){
18 | $routeProvider
19 | .when("/home", {
20 | templateUrl: "home.html"
21 | })
22 | })
23 | Home
24 |
25 |
26 |
27 | Ex:
28 | 1. Visit the following URL
29 | https://code.angularjs.org/1.7.9
30 | 2. Right Click on "angular-route.js"
31 | 3. Select "Save Link as"
32 | 4. Save into your project
33 | C:\Ishop\node_modules\angular
34 | "angular-route.js"
35 |
36 | 5. Create a new folder by name
37 | "Website"
38 | 6. Add following files
39 | - index.html
40 | - home.html
41 | - about.html
42 | - contact.html
43 | - login.html
44 | 7. design all pages with your own content
45 | 8. Index.html code
46 | "Index.html"
47 |
48 |
49 |
50 |
51 |
56 |
57 |
58 |
82 |
83 |
84 |
24 |
25 |
26 |
27 | KeyEvents:
28 | - The key events specify actions to perform while user is keying in the characters. [Typing]
29 |
30 | Event Description
31 | ===========================================
32 | onkeyup It specifies actions to perform
33 | when key is released.
34 | onkeydown It specifies actions to perform
35 | when user hold down key.
36 | onkeypress It specifies actions to perform
37 | when user finish a key.
38 |
39 |
40 | KeyEvent Properties Description
41 | ============================================
42 | keyCode It returns the actual key code
43 | ASCII value of key.
44 | A=65, Z=90
45 | charCode It also returns the character code
46 | only on char keys.
47 |
48 | which It is also same as keyCode but
49 | it is suitable for all keyboard
50 | layouts.
51 |
52 | altKey It returns true if alt key used
53 | shiftKey It returns true if shift key used
54 | ctrlKey It returns true if ctrl key used.
55 |
56 | Ex:
57 |
58 |
59 |
60 |
66 |
97 |
98 |
99 |
Register User
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 | Caps is ON
112 |
113 |
114 |
115 |
--------------------------------------------------------------------------------
/OnlineClassNotes/20-04-2020Notes.txt:
--------------------------------------------------------------------------------
1 | Angular JS Framework Components
2 |
3 | Component Description
4 | -----------------------------------------------------------------------------
5 | 1. Module A module is collection of various
6 | component in angular. Every module
7 | contains controllers, models, views,
8 | directives, filters, services.
9 | 2. Controller It contains application specific logic
10 | 3. Model It represents the data and contains
11 | data.
12 | 4. View It represents user interface [UI]
13 | 5. Factory It is a collection of functions.
14 | 6. Service It is a collection of factories.
15 | 7. Directive It is used to make the static DOM into
16 | dynamic DOM.
17 |
18 |
19 | Angular JS Modules
20 | ------------------------------
21 | 1. A module comprises of several components, which include factory, services, directives, filters etc.
22 |
23 | 2. A module is like a container with components.
24 | 3. It is similar to a Class in OOP.
25 | 4. Angular JS provide several built-in modules like:
26 | ngRoute, ngMessages, ngAnimations
27 | ngSanitize etc..
28 | 5. Modules are present in a libary like
29 | angular.js
30 | angular-route.js
31 | angular-sanitize.js
32 | 6. You can create a new Module by using
33 | "angular.module()"
34 |
35 | Syntax:
36 | var app = angular.module("moduleName", [ dependencies ]);
37 | var app = angular.module("DemoModule", ['ngRoute', 'ngSanitize',...]);
38 |
39 | 7. A module is applied to HTML document by using the directive "ng-app"
40 |
41 |
42 |
43 | 8. Every HTML document can use only one module i.e there can be only one "ng-app" defined in a page.
44 |
45 | Angular JS Controller
46 | ===================
47 | - Controller contains application specific logic.
48 | - The logic required for angular js interactions is defined in controller.
49 | - Every application can have several controllers.
50 | - Controller is created by using
51 | "angular.controller()"
52 |
53 | Syntax:
54 | angular.controller("ControllerName", function(){
55 |
56 |
57 | })
58 |
59 | - Controller is applied to document by using "ng-controller" directive
60 |
61 |
62 |
63 |
64 | Ex:
65 |
66 |
67 |
68 |
69 |
75 |
76 |
77 |
78 |
79 |
80 |
81 | - The members declared in a controller are accesible only within the controller.
82 | - To define the members for global access you have to use a service called "$scope" in controller function.
83 |
84 | Ex:
85 |
86 |
87 |
88 |
89 |
99 |
100 |
101 |
{{message}}
102 |
103 | Addition : {{add(60,40)}}
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
--------------------------------------------------------------------------------
/OnlineClassNotes/20-04-2020notes.txt:
--------------------------------------------------------------------------------
1 | Angular JS Framework Components
2 |
3 | Component Description
4 | -----------------------------------------------------------------------------
5 | 1. Module A module is collection of various
6 | component in angular. Every module
7 | contains controllers, models, views,
8 | directives, filters, services.
9 | 2. Controller It contains application specific logic
10 | 3. Model It represents the data and contains
11 | data.
12 | 4. View It represents user interface [UI]
13 | 5. Factory It is a collection of functions.
14 | 6. Service It is a collection of factories.
15 | 7. Directive It is used to make the static DOM into
16 | dynamic DOM.
17 |
18 |
19 | Angular JS Modules
20 | ------------------------------
21 | 1. A module comprises of several components, which include factory, services, directives, filters etc.
22 |
23 | 2. A module is like a container with components.
24 | 3. It is similar to a Class in OOP.
25 | 4. Angular JS provide several built-in modules like:
26 | ngRoute, ngMessages, ngAnimations
27 | ngSanitize etc..
28 | 5. Modules are present in a libary like
29 | angular.js
30 | angular-route.js
31 | angular-sanitize.js
32 | 6. You can create a new Module by using
33 | "angular.module()"
34 |
35 | Syntax:
36 | var app = angular.module("moduleName", [ dependencies ]);
37 | var app = angular.module("DemoModule", ['ngRoute', 'ngSanitize',...]);
38 |
39 | 7. A module is applied to HTML document by using the directive "ng-app"
40 |
41 |
42 |
43 | 8. Every HTML document can use only one module i.e there can be only one "ng-app" defined in a page.
44 |
45 | Angular JS Controller
46 | ===================
47 | - Controller contains application specific logic.
48 | - The logic required for angular js interactions is defined in controller.
49 | - Every application can have several controllers.
50 | - Controller is created by using
51 | "angular.controller()"
52 |
53 | Syntax:
54 | angular.controller("ControllerName", function(){
55 |
56 |
57 | })
58 |
59 | - Controller is applied to document by using "ng-controller" directive
60 |
61 |
62 |
63 |
64 | Ex:
65 |
66 |
67 |
68 |
69 |
75 |
76 |
77 |
78 |
79 |
80 |
81 | - The members declared in a controller are accesible only within the controller.
82 | - To define the members for global access you have to use a service called "$scope" in controller function.
83 |
84 | Ex:
85 |
86 |
87 |
88 |
89 |
99 |
100 |
101 |
{{message}}
102 |
103 | Addition : {{add(60,40)}}
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
--------------------------------------------------------------------------------
/OnlineClassNotes/14-04-2020Notes.txt:
--------------------------------------------------------------------------------
1 | Bootstrap Modal
2 | - It is similar to a dialog in JQuery UI.
3 | - It shows a dialog you can open and close dynamically.
4 |
5 | Classes:
6 | 1. modal
7 | 2. modal-dialog
8 | 3. modal-content
9 | 4. modal-header
10 | 5. modal-title
11 | 6. modal-body
12 | 7. modal-footer
13 |
14 | JQuery attributes:
15 | 1. role = dialog
16 | 2. role = document
17 | 3. data-toggle : On and OFF
18 | 4. data-target : It specifies the target dialog
19 | 5. data-dismiss : close the modal
20 |
21 | Ex:
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
User Login
34 |
35 |
36 |
37 |
51 |
52 |
57 |
58 |
59 |
60 |
61 | Bootstrap Navbar
62 | - To create a responsive navigation bar using JQuery and Bootstrap
63 |
64 | Classes
65 | 1. navbar-brand
66 | 2. navbar-nav
67 | 3. navbar-toggler
68 | 4. form-inline
69 | 5. navbar-text
70 | 6. collapse.navbar-collapse
71 | 7. nav-link
72 | 8. nav-item
73 |
74 | Note: Always design navbar using "nav" element
75 |
76 | Ex:
77 |
78 |
79 |
80 |
81 |
82 |
83 |
102 |
103 |
104 |
105 |
--------------------------------------------------------------------------------
/OnlineClassNotes/25-04-2020Notes.txt:
--------------------------------------------------------------------------------
1 | Filters in Angular
2 | - Formatting, Filtering and Sorting the Data.
3 | - Angular JS provides the following filters
4 | 1. uppercase
5 | 2. lowercase
6 | 3. number
7 | 4. currency
8 | 5. limitTo
9 | 6. orderBy
10 | 7. filter
11 | 8. json
12 | 9. date
13 | - Filter is a function that reads your value and manipulates by using a built-in functionality and returns the value.
14 | - Filters are applied by using "|"
15 |
16 |
17 | uppercase ] Used to convert values into upper or
18 | lowercase ] lowercase.
19 |
20 | {{ data | uppercase }}
21 |
22 | number : It is used to display number with 1000
23 | separator and decimal places.
24 |
25 | currency : It is similar to number but will have a
26 | currency symbol.
27 |
28 | {{ data | currency : 'symbol': 3 }}
29 |
30 | date : To display date values in various date formats.
31 |
32 | {data | date: 'MM/dd/yyyy' }}
33 |
34 | Ex:
35 |
36 |
37 |
54 |
55 |
67 |
68 |
69 |
70 |
71 |
Filter Products
72 |
73 |
74 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
Products Catalog
87 |
88 |
89 |
90 |
{{product.Name|uppercase}}
91 |
92 |
93 |
94 |
95 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
--------------------------------------------------------------------------------
/OnlineClassNotes/26-03-2020_Notes.txt:
--------------------------------------------------------------------------------
1 | Timer Events
2 | - setTimeout()
3 | - clearTimeout()
4 |
5 | Note: SetTimeout will load the taks into memory, then gives task to process, after process it is removed from memory. Hence task will execute only once.
6 | If you want the task to execute again then you have to load into memory again.
7 | Task - function
8 |
9 | setInterval():
10 | ==========
11 | It is a timer function that loads the task into memory and gives to the process without removing from memory. It continues to give the task to the process until you clear from memory.
12 | Syntax:
13 | setInterval(function(), timeInterval);
14 |
15 | clearInterval():
16 | ============
17 | It is a timer function that clear the task from memory.
18 |
19 | Syntax:
20 | clearInterval(memoryReference)
21 |
22 | Ex: Time
23 |
24 |
37 |
52 |
53 |
54 |
113 |
114 |
--------------------------------------------------------------------------------
/OnlineClassNotes/24-03-2020Notes.txt:
--------------------------------------------------------------------------------
1 | onchange, oncut, oncopy, onpaste, oncontextmenu
2 | onselectstart, onfocus, onblur, onclick, ondblclick, onsubmit, onreset
3 |
4 | Ex: ondblclick
5 | It specifies the actions to perform when user double clicks on any element.
6 |
7 |
8 |
13 |
18 |
19 |
20 |
21 |
Double Click to Open Image
22 |
23 |
24 | Onload : It specifies the actions to perform when bodyloads or any image load.
25 |
26 | Syntax:
27 |
28 |
29 | onsubmit and onreset:
30 | ==================
31 | - Submit and Reset are events defined for form element.
32 | - Submit event firesup on submit click
33 | - Reset event firesup on reset click
34 | - Form can submit or reset only by using the
35 | generic buttons i.e submit or reset.
36 |
37 | Ex:
38 |
39 |
53 |
54 |
55 | FAQ: How to submit the form on any another element event? Like Dropdown selection changed.
56 | A. Write Event for the element
57 | on Element event call "form.submit()" method.
58 | It requires a reference name for form.
59 |
60 | Ex:
61 |
62 |
67 |
68 |
69 |
79 |
80 |
81 | Timer Events:
82 | The timer events are used to perform any specific functionality at regular time intervals.
83 | a) setTimeOut()
84 | b) clearTimeOut()
85 | c) setInterval()
86 | d) clearInterval()
87 |
88 | setTimeout() : It is a timer function, It locks the task and make the task sleep for some duration of time, and release the task after the time interval.
89 |
90 | Syntax:
91 | setTimeOut(function(), timeInterval)
92 | [milliseconds]
93 | 1000 = 1 sec
94 |
95 | clearTimeout(): It is used to clear any function from memory before execution.
96 |
97 | Syntax:
98 | clearTimeout(functionReference);
99 |
100 | Ex:
101 |
102 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/OnlineClassNotes/22-04-2020Notes.txt:
--------------------------------------------------------------------------------
1 | ng-show / ng-hide : Used to show or hide any element
2 | ng-if : It is used to add or remove any element.
3 |
4 | Syntax:
5 | ng-show = true/false
6 | ng-hide = true/false
7 | ng-if = true/false
8 |
9 | Ex:
10 |
11 |
12 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 | ng-repeat: It is used to repeat any HTML element.
32 | It uses an iterator that can read elements
33 | from a collection in sequential order.
34 |
35 |
22 |
23 |
24 |
25 |
26 | 10. remove() : It is used to remove the selected elements from DOM. It will remove the element but not data and its events.
27 |
28 | 11. detach() : It is used to remove the selected element including all child nodes, but data will be there.
29 |
30 | 12. empty() : It removes only data without removing the element.
31 |
32 | 13. attr() : It is used to dymamically control any attribute of element.
33 |
34 | $("#pic").attr("attribute", "value");
35 | $("#pic").attr({"attribute1":"value", "attribute2":"value"})
36 |
37 | Ex:
38 |
39 |
40 |
41 |
42 |
54 |
55 |
56 |
47 |
48 |
49 | Bootstrap Collapse
50 | - It is used to display and hide content dynamically
51 | - The classes used are
52 | a) .collapse
53 | b) .collapsing
54 | c) .collapse.show
55 | - JQuery Attribute are
56 | a) data-target : which content to collapse
57 | b) data-toggle : specifies actions on click
58 |
59 | data-target is used for buttons.
60 | href is used for links.
61 |
62 | Syntax:
63 |
64 |
8 |
9 | 
22 |
23 | 
41 | 
){kind=link}
25 |
26 |
27 | KeyEvents:
28 | - The key events specify actions to perform while user is keying in the characters. [Typing]
29 |
30 | Event Description
31 | ===========================================
32 | onkeyup It specifies actions to perform
33 | when key is released.
34 | onkeydown It specifies actions to perform
35 | when user hold down key.
36 | onkeypress It specifies actions to perform
37 | when user finish a key.
38 |
39 |
40 | KeyEvent Properties Description
41 | ============================================
42 | keyCode It returns the actual key code
43 | ASCII value of key.
44 | A=65, Z=90
45 | charCode It also returns the character code
46 | only on char keys.
47 |
48 | which It is also same as keyCode but
49 | it is suitable for all keyboard
50 | layouts.
51 |
52 | altKey It returns true if alt key used
53 | shiftKey It returns true if shift key used
54 | ctrlKey It returns true if ctrl key used.
55 |
56 | Ex:
57 |
58 |
59 |
60 |
66 |
97 |
98 |
99 | 
21 | 
94 | 
30 | 
33 | 
36 |