Scribd
Upload
12 views17 pages

Lecture 3.2.1

Uploaded by

Abhi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
12 views17 pages

Lecture 3.2.1

Uploaded by

Abhi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

APEX INSTITUTE OF TECHNOLOGY

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

Web Framework in Cloud (AngularJS)(21CST-439)


Faculty: Ms. Rubbina (E16582)

Lecture – 36,37
DISCOVER . LEARN . EMPOWER
1
COURSE OUTCOMES
On completion of this course, the students shall be able to:-
The students will become familiar with the concepts cloud web development, REST
CO1
API’s, use of REST API’s in AngularJS.

The students shall become equipped to build AngularJS applications for helping
CO2
businesses going into digital transformation.

The students shall be able to compare within different frameworks available and select
CO3
best possible framework.

Students will learn methods for deploying AngularJS applications to cloud platforms,
CO4
including considerations for hosting, scalability, and security.

Students will understand common security threats (e.g., XSS, CSRF) and best practices
CO5
for securing AngularJS applications.
2
Unit-1 Syllabus

Unit-2 Web Technologies to work on cloud Contact Hours: 12 hours

Building modern Setting up development environment, Introduction to NodeJS and its modules,
web Applications NPM, Building UI and testing with AngularJS, AngularJS forms and directives
in AngularJS

Web application Introduction to Versioning System – GIT, Clouds and virtualisation, Deployment of
Deployment web application on cloud

3
Contents to be covered

• Building UI and testing with AngularJS

4
Building UI and testing with
AngularJS
• Building a user interface (UI) and testing it using AngularJS involves
several steps, from setting up your development environment to
writing tests to ensure your application works correctly. Here's a
comprehensive guide to get you started:

By: Pramod Vishwakarma (E9758) 5


1. Setting Up Your Development
Environment
• Before you start building the UI, you need to set up your development
environment.
• Install Node.js and npm
• AngularJS requires Node.js and npm (Node Package Manager) to
manage dependencies.
• Download and install Node.js from Node.js official site.
• Verify the installation
• node -v
• npm -v
By: Pramod Vishwakarma (E9758) 6
Set Up an AngularJS Project

•Create a new directory for your project:


sh
mkdir my-angularjs-app cd my-angularjs-app

•Initialize a new Node.js project:


sh
npm init -y

•Install AngularJS and other necessary dependencies:


sh
npm install angular --save

By: Pramod Vishwakarma (E9758) 7


2. Building the UI with
AngularJS
• Create the Project Structure
• Create the following folder structure:
• my-angularjs-app/
• ├── index.html
• ├── app/
• │ ├── app.module.js
• │ ├── app.config.js
• │ ├── components/
• │ │ ├── example/
• │ │ │ ├── example.component.js
• │ │ │ ├── example.template.html
• │ ├── services/
• │ │ └── example.service.js
By: Pramod Vishwakarma (E9758) 8
Continue….
Create the Main HTML File (index.html)

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>My AngularJS App</title>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.config.js"></script>
<script src="app/components/example/example.component.js"></script>
<script src="app/services/example.service.js"></script>
</head>
<body>
<example-component></example-component>
</body>
</html>

By: Pramod Vishwakarma (E9758) 9


Continue…

Create the AngularJS Module (app.module.js)

angular.module('myApp', []);

Create a Simple Component (example.component.js)

angular.module('myApp').component('exampleComponent', {
templateUrl: 'app/components/example/example.template.html',
controller: function() {
this.message = 'Hello, AngularJS!';
}
});

By: Pramod Vishwakarma (E9758) 10


Continue…..

• Create the Component Template (example.template.html)

• <div>
• <h1>{{ $ctrl.message }}</h1>
• </div>
•

By: Pramod Vishwakarma (E9758) 11


3. Testing with AngularJS
• Install Testing Libraries
• You need to install some testing libraries like Jasmine and Karma.
• Install Jasmine and Karma:

• npm install jasmine-core karma karma-jasmine karma-chrome-


launcher --save-dev

By: Pramod Vishwakarma (E9758) 12


Continue..
• Initialize Karma configuration:
• npx karma init

• Configure it as follows:
• Testing framework: Jasmine
• Browsers: Chrome
• Automatically watch files: Yes

By: Pramod Vishwakarma (E9758) 13


SUGGESTIVE READINGS
Text Books / Reference Books
TEXT BOOKS
T1 : Moyer, C.M. (2012). Building applications in the cloud : concepts, patterns, and projects. Upper Saddle River, N.J:
Addison-Wesley.
T2 : Ambler, T. and Cloud, N. (2015). JavaScript frameworks for modern web dev. New York: Apress.

REFERENCE BOOKS
R1 : Zaigham Mahmood (2015). Software engineering frameworks for the cloud computing paradigm. Springer.
R2 : Williamson, K. (2015). Learning AngularJS A Guide to AngularJS Development. Sebastopol O’reilly & Associates.
.

14
Summary
 HTML, or HyperText Markup Language, is the standard markup language used to create web pages. It’s a
combination of Hypertext, which defines the link between web pages, and Markup language, which is used
to define the text document within tags to structure web pages. This language is used to annotate text so
that machines can understand and manipulate it accordingly. HTML is human-readable and uses tags to
define what manipulation has to be done on the text. This guide will help you understand the workings of
HTML and explain it with examples.
 HTML5 is not only a new version of HTML language enriched with new elements and attributes, but a set of
technologies for building more powerful and diverse web sites and applications, that support multimedia,
interact with software interfaces, etc.

15
Assessment Questions
Q What are the primary characteristics that define cloud computing?
Q How did the advent of personal computers (PC Era) change the computing landscape?
Q What is the client-server model, and why was it significant in the evolution of computing?
Q What role did virtualization play in advancing cloud computing technologies?
Q How does the pay-as-you-go pricing model benefit cloud users?
Q How does edge computing differ from traditional cloud computing?
Q What are some common design patterns used in RESTful API development?
Q What tools and technologies can assist in developing and testing RESTful APIs?
Q What factors should businesses consider when choosing a cloud service provider?
Q How does the OpenStack framework facilitate cloud infrastructure management?
Q What are the deployment models of cloud computing (public, private, hybrid, community)?
16
THANK YOU

For queries
Email: [email protected]
17

You might also like